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
In this video Jerad Bitner walks you through the process of how to make a patch for a change to a contributed module on Drupal.org. We go through the steps for creating an issue, creating the patch and then submitting the patch. This video assumes that you have a git clone of a contributed module and are familiar with the basics of using git.
For instructions on getting a clone of a Drupal.org module and for applying a patch that you find on Drupal.org, watch the Applying a patch to a module video.
This video goes through the process of finding a patch from the Drupal.org issue queue, and then applying it to a contributed module. After testing the patch and confirming that it fixes the bug, we then walk through the process of reporting back that the patch has been reviewed and tested by the community and is ready to be applied to the module's main branch. This video will show you how to clone a Drupal.org project, but it assumes that you already have git installed and are familiar with the basics of using git.
Here's more information on how to set up your command line to show the git branch release context.
For instructions on creating a patch and submitting it to Drupal.org, watch the Creating a patch for a module video.
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.
PHP Service Classes
FreeIn this course, we're going to continue on from the Introduction to Object-Oriented PHP series. We're working on the same spaceship project: it has ships, you choose them, then they engage in epic battle!
In an editor, far far away, you'll see a simple application that runs this: index.php is the homepage and battle.php does the magic and shows the results. In the first course, we created a single class called Ship
, which describes all its properties—it's like a container for one ship's details. In this tutorial we're going to replace our flat functions and create a BattleManager
service class to provide the methods we'll need to do that.
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 configuration management based on official releases of Drupal 8, view tutorials in our Configuration Management series.
[# card #]
nid: 2458
title: Config Management series
[# endcard #]
This presentation introduces the Drupal 8 configuration management system (CMI). Learn why configuration management is one of the most eagerly anticipated features of Drupal 8, and how it has the potential to completely change the workflow we use for building sites with Drupal. By addressing a number of long-standing issues in Drupal, CMI helps to separate content from configuration, provides a simple user interface for transporting configuration changes between multiple instances of the same site, and gives developers a consistent way to store and retrieve configuration in their code that is guaranteed to work with the rest of management tools provided.
Here's what we'll cover in this presentation:
- What is configuration management, and what problems does it solve
- The CMI user interface, and changes for site-builders
- The CMI API, and changes for modules developers
- What you can start learning now to ensure you're ready to use CMI
After watching this presentation you should have a better understanding of the importance of the new configuration management system and be excited about the improved workflows and ability to follow current best practices that it introduces to Drupal.
Additional resources
- Configuration Management tutorial series (Drupalize.Me)
- Introduction to YAML video tutorial
- Drupal.org documentation: Configuration API in Drupal 8
- Drupal.org documentation: Managing configuration in Drupal 8
- Principles of Configuration Management - Part One article by Chapter 3
- Principles of Configuration Management - Part Two article by Chapter 3
- The Drupal 8 configuration schema cheat sheet
This tutorial provides an overview of the major shift in Drupal 8 to an object-oriented architecture and was created to help you understand which concepts and terminology you will need to learn in order to interact with modules at a code level.
Other tutorials in this series on "What's New in Drupal 8" will cover major changes in specific areas of Drupal 8 module development, such as entities and fields, configuration management, web services, and hooks. This tutorial will focus on object-oriented PHP architectural changes, concepts, and terminology you will need to know as a module developer.
Specifically, we will present:
- an overview of object-oriented PHP
- why it was introduced into Drupal 8
- how it differs from procedural programming
- major OO-PHP concepts you'll find in core
To learn object-oriented PHP, you should begin with our OOP topic page.
[# card #]
nid: 2926
title: OOP topic
[# endcard #]
Additional resources
- Object-oriented PHP topic page (drupalize.me)
- Why the big architectural changes in Drupal 8 article (buytaert.net)
- PHP Manual: Classes and Objects (php.net)
- Objected-oriented programming conventions (api.drupal.org)
- Services and Dependency Injection Container (api.drupal.org)
This video was part of a series of presentations produced in anticipation of Drupal 8's official release. For information about Drupal 8 module development based on official releases of Drupal 8, view tutorials in our Drupal 8 Module Development series.
[# card #]
nid: 2766
title: Drupal 8 Module Development Guide
[# endcard #]
One of the things that makes Drupal an attractive platform for developers to build their applications with is its extensibility. If you've ever used a contributed module, or written your own, you've taken advantage of this fact. Almost everything about the way that Drupal core works can be altered, extended or even replaced in order to allow developers total control. Historically that's always been done by implementing hooks. In Drupal 8 however, we've got some new tools to allow module developers to extend, alter, and enhance core's functionality.
In this presentation we'll take a high-level look at these new options, including:
- The role of hooks in Drupal 8
- The new plugin system for adding functionality
- Using routes to map HTTP requests to custom code
- Events and event listeners
- The service container and adding new services
- Using the Entity API for data storage
After watching this presentation you should have basic knowledge of the various ways in which Drupal 8 can be extended, and when to use each one. You'll also get information about what you can do now to start preparing for using these new tools.
Additional resources
API Documentation on api.drupal.org:
Articles and Video Tutorials:
- Module Development Essentials (KnpUniversity on Drupalize.Me)
- Dependency Injection and the Art of Services and Containers video tutorials
- Responding to Events in Drupal 8 article
- Unravelling the Drupal 8 Plugin System article
- An Introduction to YAML (Drupalize.Me)
DrupalCon:
- Altering, Extending, and Enhancing Drupal 8 — Joe Shindelar (eojthebrave) (DrupalCon New Orleans, May 2016)
Drupal's Change log: