Sass partials are a way to break out your Sass code into multiple files, and then import them to be compiled into one master CSS file. This feature helps you organize your Sass code the way that makes the most sense for you while working.
When you install Compass from the command line, or with certain apps, it comes with a special file names "config.rb" which is where Compass stores the various ways you can configure it to work with your project. Not all apps will create this file for you however, and it is a good thing to create and understand. In this lesson, we'll take a look at this file and explain the most common configuration options.
Additional resources
When you install Compass, in addition to a large mixin and function library, you are also installing a command line application. The commands that Compass provides make it easy to do common tasks, very quickly from the command line — things like creating a new project, and compiling your Sass into regualr CSS. Even if you are not familiar with the command line, these are very simple to use.
Additional resources
Sass is our base tool, and Compass is almost always used with Sass. Compass provides some great tools for us, but there are a few more resources out there that are worth knowing about and taking a look at. In this lesson we'll take a quick tour of some grid frameworks designed to work with Sass, as well as another popular mixin library.
Additional resources
In this lesson we take a tour of some other tools for working with Sass and Compass. We look at some sites with good information or helpful tools to use, and a few different apps that are made to make your workflow better. We can't cover everything out there, but these are tools that we've used ourselves, or are generally popular right now. There will always be more cool things coming out to help you be more efficient when working with Sass and Compass, but these should get you looking in the right direction.
Additional resources
When working with your CSS you will often have instances where something should include all of the styling associated with a class, in addition to a few extras that are specific to just that item. In regular CSS you would normally put the general class on the item, and add a more specific class with the additional styling. With the Sass @extend directive, you can have the more specific class inherit the styling of another class, so that you can just use the specific class in your HTML, keeping you HTML markup nice and concise.
Functions are another form super-variable, as it were, where you do a bunch of work that is assigned to something you can print out. But in this case you aren't injecting a bunch of CSS, instead you are just printing out a nice, final value. For many things you will want to do with functions, someone else has probably already written it. Sass comes with a lot of predefined functions for you to use, and there are libraries, like Compass, which provide many more. We'll take a look at some of the functions that Sass provides for us and see a function in action, along with our mixin, side by side, to really see the difference between them.
Additional resources
A mixin is a term used for a feature of preprocesors which acts a lot like a super-variable. You can write up larger chunks of CSS and assign them to a mixin name, then when you "include" that mixin, it will inject all of that CSS into the location. This is great for setting up common ways of displaying things, or handling common problems, and then just reusing that same method throughout. You can also add arguments to your mixin so that you can tweak the output according to your use case. This takes the reusable concept of variables up a notch.
One of the big advantages to using Sass is being able to reuse code. The simplest form of this is using variables. Variables in Sass work just like they do in other scripting languages. You simply assign a value to a variable name and then you can use that variable name anywhere you like. This is super helpful for doing things like defining the hex value for the color "blue" and then you can use the name "blue" wherever you want to use that hex value. This makes it easy to update that value in one place instead of having to find every instance of it and update all of them.
Additional resources
Sass' nesting feature makes it easy to organize your CSS in a way that makes it clear which selectors are related and generally provides a cleaner, clearer stylesheet. In this lesson we'll look at nesting, how to use it, and talk about making sure you don't nest unnecessarily.
Sass has a neat way of managing comments, where you can choose to either compile the comments, or not, from your scss. We're going to take a quick look at the two comment styles, and see how they appear (or don't) in our finished, compiled CSS.
We've looked at how easy it is to set Sass and Compass up from the command line, but for folks who prefer a nice GUI application, there are a few options available. Scout is a free Sass/Compass application that works cross-platform. In this lesson, we'll get Scout set up and see how it works to watch our projects.
Notes on Installing Scout:
- On OSX, If you double-click the .dmg and you get an error message saying you can't open this because it's from an unrecognized developer, control-click on the .dmg and select "Open" from the menu, then select "Open" from the dialogue box to open the .dmg installer.
- After installing Scout, OSX may again prevent you from opening it (depending on your security preferences) when it auto-opens it after installation. Navigate to where you installed it (i.e. "Applications"), control-click on the Scout icon, select open from the menu, and select "Open" from the dialogue box once again.
- If you get an error about Java, "No Java runtime present, requesting install," see the Scout GitHub issue queue for a solution.
Additional resources
Now that we have Ruby and Sass ready to go and working, let's also get our handy dandy mixin library, Compass, installed as well. We'll be using the command line in this lesson, but it's super simple to get this installed, and then we'll create a project to make sure everything is firing correctly. We'll look at a GUI tool to do this in another lesson.
Additional resources
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.
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)