In order to get started with Sass, we're going to need to install it. There is really only one major prerequisite for using Sass, and that's that you will need to have Ruby installed. Ruby is a very popular language, which Sass is written in. Ruby is easy to install, and once you have it installed, you won't need to really work with Ruby directly. Some systems come with Ruby already installed, like OS X, but if you don't have Ruby installed it only takes a few minutes. In this lesson we will be installing Sass and Ruby on Windows, because Windows does not have Ruby installed for us already. Once we have Ruby installed, we'll use the command line to quickly install Sass, which is the same on all systems. Then we'll do a quick test to make sure it is working properly. There are apps that you can use to do all of this for you using a GUI, but we want to start with the fundamental pieces, and we'll cover the GUI applications in another lesson.
Additional resources
In this lesson we're going to review a lot of the special terms that are used in Sass. Different categories of features you can use with Sass have their own names, and are used in specific ways in the Sass world. We're also going to take a look at scss versus sass, and get a feel for how Sass code looks before and after compilation.
Whenever people speak about Sass, they normally also mention Compass in the same breath. It isn't always clear what the difference between these tools are. Compass is a library that adds lots of new features to your standard Sass setup. In this lesson, we'll discuss why you want to use Compass, then take a look at the Compass documentation and the main features that it provides for you.
Additional resources
What Is jQuery?
FreejQuery makes using Javascript easy. A description of the basic jQuery library, and a brief history of why jQuery exists and how it can be used to simplify development of Javascript for your site.
Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.
A brief summary of the material covered in the Introduction to jQuery video series
Overview the Firebug extension for Firefox and how it can be used to aid in the development of Javascript. Real time development and debugging of Javascript.
Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.
Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.
Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.
Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content
Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.
(function($){ $(document).ready(function(){ $('#sidebar .block .content').hide(); $('#sidebar .block h3').css('cursor', 'pointer').click(function(){ $(this).parent().children('.content').slideToggle(); }); }); })(jQuery);
Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.
Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.
What's New in Drupal 8
CourseThis video was part of a series of presentations produced in anticipation of Drupal 8's official release. For information about theming based on official releases of Drupal 8, view tutorials in our Drupal 8 Theming Guide.
[# card #]
nid: 2512
title: D8 Theming series
[# endcard #]
This presentation outlines some of the major changes to the way that themes are built in Drupal 8 and is intended to help you generate a list of the things you're going to need to know in order to start making awesome Drupal 8 themes. A lot has changed, and there are a lot of new things to learn. However, one of the primary focuses has been on making the theme layer easier to understand, and easier to get started with.
Almost every aspect of the theming layer has been touched in one way or another during the Drupal 8 development cycle. We think some of the important ones to learn about are:
- How Drupal 8 makes the theme layer easier to understand
- Changes to help make Drupal responsive and mobile friendly
- The adoption of current best practices for HTML5, CSS, and JavaScript
- The addition of a new template engine based on Twig
After watching this presentation you should have a better understanding of the things you'll need to learn in order to create themes in Drupal 8 and where you might need to brush up.
Additional resources
- Drupal 8 Theming Guide (Drupalize.Me)
- Changes for themers
- Twig Theming video tutorial series
- Acquia's Ultimate Guide to Drupal 8: Episode 5 - Front-End Developer Improvements
- DrupalCorn Presentation by Marc Drummond: Building a Drupal 8 theme with new fangled awesomeness
- DrupalCon Sydney Presentation by Jen Lampton: Twig, and the New Theme Layer in Drupal 8
- DrupalCon Austin Presentation by Scott Reeves and Joël Pittet: Drupal 8 Theme System: hook_theme to Twig Template
This video was part of a series of presentations produced in anticipation of Drupal 8's official release. For information about multilingual sites based on official releases of Drupal 8, take a look at our Multilingual sites topic.
[# card #]
nid: 2925
title: Multilingual sites topic
[# endcard #]
This presentation outlines some of the major changes to the Drupal core multilingual system. A lot of features that were in contributed modules have been rolled into core, and a number of existing multilingual features have been greatly improved. There are a lot of cool new things to get up to speed with. In this video, we'll review:
- New and obsolete modules
- UI changes
- Developer changes
After watching this presentation you should have a better understanding of the things you'll need to learn to get up to speed with the new multilingual features in Drupal 8, including things to watch for on the module development and theming sides.
Additional resources
Drupal 8 Multilingual Initiative site
Gábor Hojtsy's Multilingual Changes Summary (PDF)
This presentation walks through quite a long list of major contributed modules and best practices that have been incorporated into Drupal 8 core. There are a lot of new features that you'll get out of the box, from Views to Services. In particular we'll cover:
- Exactly what best practices mean
- How core and contributed modules help the community define best practices
- List the major categories of features that have been incorporated
After watching this presentation you should have a better understanding of what best practices are, and a list of the major contributed modules from Drupal 7 that have been added, in one form or another, into Drupal 8.
In this tutorial we're going to play with some extra nice things you can do with Twig. We're going to get expert control of our blocks with the block function, work with concatenating strings, controlling our whitespace, and using undefined variables with the default filter. We'll wrap things up with a look at escaping HTML. Whenever you render content that may have been filled in by the user, you need to escape it. This prevents people from writing HTML tags that you don’t want or, worse, JavaScript code that could be used for cross-site scripting attacks.