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.
This 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.
YAML, which stands for YAML Ain't Markup Language, is a human-readable data serialization format that's been widely adopted in a variety of use cases in Drupal. Anyone wanting to write modules, or themes, for Drupal will need to understand YAML syntax. Even site builders are likely to encounter YAML at least in passing as YAML is the data-serialization format of choice for Drupal's configuration management system. Good thing it's pretty easy to learn even with the most basic of programming backgrounds.
This tutorial will look at the YAML data format and provide examples of how to write and read YAML. Starting with an introduction to the language's syntax and some of the strengths of YAML. Then looking at the difference between scalar data types like strings and integers, and collection data types like lists and associative arrays.
Since YAML in the Drupal world is read into PHP and ultimately becomes a PHP data structure that we can use in our own code we'll also look at how the YAML we write in a .yml file is represented in PHP data types. To do this we'll use the YAML Sandbox module that provides a handy textarea into which we can type YAML and have it parsed into PHP data structures.
Learning objectives
- Explain what YAML is and its strengths as a data serialization format
- Create scalar key/value pairs in YAML
- Create lists, and associative arrays using YAML collections
- Understand how the YAML you write is represented in PHP
Tips
- In Drupal, use the .yml extension and not .yaml
- Ensure your code editing application is configured to use spaces (preferably 2 spaces, as per Drupal coding standards), not the tab character when the TAB key is pressed. If you have tab characters in a YAML file within a Drupal environment, a fatal PHP error will be thrown and you'll see a White Screen of Death (WSOD).
- Copy and paste from an existing YAML file to ensure the formatting is correct, and edit from there.
Additional resources
- http://www.yaml.org
- YAML Sandbox module
- Find other tutorials and external resources related to YAML on our YAML topic page (Drupalize.Me)
AJAX is one of the main reasons to use a Javascript library such as jQuery. See how simple it is to perform a previously difficult task that required complex browser specific code to preform reliably and was prone to simple mistakes. Implement basic AJAX requests using jQuery's built in methods which make it extremely simple to send an asynchronous request to a server, gather the returned data, and insert it into the page.
Example code:
// AJAX Live Function
$('.content p').live('mouseenter mouseleave',
function() {
$(this).toggleClass('hilight');
}
);
// AJAX Example
$('.node_read_more a').click(function() {
var url = $(this).attr('href');
var link = this;
$.ajax({
url: url,
success: function(data) {
var $fullContent = $('#content-output .content', data);
var html = $fullContent.html();
$(link).closest('div.node').find('div.content').html(html);
$(link).hide();
}
});
return false;
});
In its short history, jQuery has revolutionized front-end web development, making it faster, easier, and more rewarding to write JavaScript – allowing easier selection and manipulation of HTML elements, and ensuring that scripts work across the ever increasing landscape of browsers and operating systems.
Nate Haug and Jeff Robbins show many hands-on examples demonstrating how to use jQuery's simple syntax to choose and manipulate HTML elements, traverse the document object model (DOM), and to attach event handlers which can react to user interaction with the page.
In this video, Jeff and Nate introduce themselves and the agenda for this series, including Selectors, Effects, and AJAX.
Just like PHP or JavaScript, Twig has functions that can be used once we’re inside either a Twig delimiter. To see the built-in functions, check out the bottom of the Twig documentation page. In your application, especially if you’re using Twig inside something like Symfony or Drupal, you may have even more functions available to you. Fortunately, the syntax to use a function is always the same: just check out your project’s documentation to see what other goodies you have. In this tutorial, you will start using Twig functions and filters to get the length of a collection in our demo site. We'll also play around with the dump
function to see how we can go about debugging Twig.
Additional resources
Until now, we’ve been working with simple values like pageTitle or products, which is an array that contains simple values where we loop over and print each out. In this tutorial, you will work with more complicated arrays, using keys, and figure out how to get at object data as well.