Advanced Drupal Training Documentation - OPIN

Advanced Drupal Training Course

Title Page

Advanced Drupal Training Course INDSTRUCTORS’S CONTACT NAME, ADDRESS AND TELEPHONE NUMBER: Christopher Smith President and CEO OPIN Software Inc. 205 – 4 Florence St., Ottawa, Ontario, Canada K2P 0W7 Tel: 613-‐656-‐9983; Email: [email protected]

PREPARED ON: 13 November 2013

Proprietary and Confidential 12 November 2013

opin.ca © 2013 OPIN


Table of Contents Drupal .................................................................................................................................................... 3 Drupal is a Content Management System ........................................................................................... 3 Drupal is a Web Application Framework ............................................................................................. 3 Drupal is a Community ........................................................................................................................ 4 Installation ............................................................................................................................................. 5 Installing Drupal 7 ............................................................................................................................... 5 Obtaining Drupal ................................................................................................................................ 6 Selecting an installation profile ........................................................................................................... 6 Minimal profile ....................................................................................................................................... 6 Standard profile ...................................................................................................................................... 7 Language selection ............................................................................................................................. 7 Requirements check ........................................................................................................................... 7 Database configuration ....................................................................................................................... 8 Configure site ..................................................................................................................................... 8 Theming ............................................................................................................................................... 10 What is a theme? .............................................................................................................................. 10 The output of a Drupal theme ........................................................................................................... 10 Theme files ....................................................................................................................................... 11 Creating a New Theme ...................................................................................................................... 12 Creating a new theme through sub-‐theming ....................................................................................... 12 Selecting a base theme ......................................................................................................................... 12 Installing With Sub Theme .................................................................................................................... 13 Styling the new theme .......................................................................................................................... 13 Syntactically Awesome Style Sheets (SASS) ........................................................................................... 14 Installing SASS .................................................................................................................................. 14 Variables .......................................................................................................................................... 14 Nesting ............................................................................................................................................. 15 Partials ............................................................................................................................................. 16 Import .............................................................................................................................................. 16 Mixins ............................................................................................................................................... 17 Extend/Inheritance ........................................................................................................................... 17 Operators ......................................................................................................................................... 18




Drupal Drupal is a great content management system, a powerful framework for web applications, and a cutting edge social publishing platform. Above all, Drupal is more than software—it is a vibrant community of developers, designers, project managers, business innovators, technology strategists, user experience professionals, standards and accessibility advocates, and people who just mess around with stuff until they figure it out.

DRUPAL IS A CONTENT MANAGEMENT SYSTEM With Drupal, you get all the features of a powerful content management system, or CMS—user login and registration; definition of types of users and content; different levels of permissions; content creation, editing, categorization, and management; syndication and aggregation—out of the metaphorical box. In addition to this core functionality, there’s an expanding universe of additional functionality available from the rising influx of community contributions. The Views module allows you to organize and display content in any number of ways. The Groups module can be used to create online workgroups, discussion groups, and more. Drupal Commerce allows you to configure full online stores. This is just a small sampling of the powerful extensions available to Drupal through contributed modules. From theming examples to make your site look better to command line tools to powerful search, if you want to build it in Drupal, it’s very likely that someone already has—and has contributed the code or the instructions back to the community. If you want to go beyond functionality that anyone has contributed yet by writing your own modules, there will be a lot of help out there for that, too. Drupal is written in PHP with a great deal of JavaScript (mostly using the JQuery library) for the front-‐end experience, and it uses a database such as MariaDB/MySQL or PostgreSQL to store both content and configuration. Of course, by doing enough custom coding with these or other programming languages and databases, a developer can do anything a Drupal site can do. But why? Using Drupal saves site builders from reinventing the wheel, allowing a focus on achieving their goals. Drupal takes you where you drive it, without you having to build a car first.

DRUPAL IS A WEB APPLICATION FRAMEWORK Drupal has become so solid at its core, so extensible, and so powerful for building different kinds of web sites that it is more than a CMS: it is a platform for developing serious web applications. Each major release includes better APIs (Application Programming Interfaces; how code talks to code) and other powerful features that take it beyond being a CMS.




Drupal is used as the basis for different types of applications, from smart phone and Facebook apps to web sites with complex business logic (nysenate.gov/mobile, data.gov.uk, zagat.com) to social media and retail-‐ready software as a service (buzzr.com). Drupal can also be found in such non-‐CMS roles as the front end for Java-‐based applications and the back end for AJAX or Flash-‐driven front ends. Where this distinction between framework and CMS or other product can mean the most to you is the growth of distributions built on Drupal to solve specific use cases. Examples include OpenAtrium (openatrium.com) for team intranets, Drupal Commons (drupalcommons.com) for social business, OpenPublish (openpublishapp.com) for online publishers, and OpenScholar (scholar.harvard.edu) for personal academic and research web sites. (See Chapter 34 for more on distributions, including how to create your own.)

DRUPAL IS A COMMUNITY Another reason to choose Drupal is this book—and many, many other books, videos, web sites, classes, and songs. (Well, maybe not the songs. Search at your own risk.) The large number of beginner-‐friendly and expert-‐ready resources growing up around Drupal are both an effect of and a contributor to its success and growth. The top 10 Drupal shops in the world could switch to stone tablet technology tomorrow and there would still be an amazing array of contributors to carry development forward. Not many free software projects can say that, and, of course, no proprietary products can make such a claim. Of course, most Drupal companies are growing along with Drupal, not leaving the scene. The number one reason to use Drupal is not the functionality, the extensibility, the power, the flexibility, or even anything related to the code. The number one reason to use Drupal is the breadth and depth of the community. Let’s get started.




Installation Before we start looking at all of the great new features in Drupal 7 in detail, let's walk through the process for installing Drupal 7. Several aspects of the installation process have changed since previous versions, including: • • •

A new installation option that installs commonly-‐used features by default A command-‐line installation process Better support for installation profiles

INSTALLING DRUPAL 7 Drupal's installation process has always been very easy to use, and the Drupal 7 installation makes things even easier. Before beginning to install Drupal 7, you will need a web server running the Apache HTTPD web server. You can also use IIS on Microsoft Windows, but the Apache server is preferred and you will be able to obtain support from the community more easily if you use the Apache server. Want to easily install Apache onto a Microsoft Windows machine? Try XAMPP, which is published by Apache Friends. This package includes Apache, MySQL, and PHP with a standard Microsoft Windows installer. You can download XAMPP from http://www.apachefriends.org/en/xampp.html. Other options include WAMP (http://www.wampserver.com/en/) and MoWeS Portable (http://www.chsoftware.net/en/mowes/mowesportable/mowes.htm). Your server will also need PHP installed on it. Drupal requires at least PHP version 5.2.0. As of this writing, there are some hosts that still do not have PHP 5.2.0 or later installed on their shared hosting accounts, and Red Hat does not include PHP 5.2.0 or later in its default distribution. Check with your host or system administrator before installing Drupal to make sure that the correct version is available. In addition to the web server and PHP, you will also need a database. MySQL and PostgreSQL are the databases that are most frequently used with Drupal, and of the two, MySQL is much more widely used. That being said, you can use Drupal with many different databases and the new DBTNG database abstraction layer will make it easier to deploy to any database. If you are using MySQL, you will need version 5.0.15 or later installed. If you are using PostgreSQL, you will need PostgreSQL 8.3.0 or later. SQLite is also officially supported for use with Drupal and you will need version 3.4.2 or later. After you have a server set up with the proper software, you can download Drupal and begin the installation process.




OBTAINING DRUPAL If you have used previous versions of Drupal, the process for downloading Drupal is the same as always. If you are new to Drupal, you will use the following process: 1. Go to the Drupal project page on Drupal.org: http://drupal.org/project/ drupal. 2. Find the latest official release of Drupal 7 and click on the Download link. The release will be named 7.0 or similar. 3. Your browser will ask whether you want to download or Open the file. Make sure to download it to your computer. 4. The file you downloaded is a .tar.gz file, which is a compressed archive similar to a .zip file. You will need to extract the files from this archive onto your computer. If your computer doesn't already have a program that an open .tar.gz files, try 7-‐Zip, an open source application that easily handles these files. You can download 7-‐Zip from http://www.7-‐zip.org. 5. After you have extracted the files, you will need to copy them to your web server's document root. 6. You are now ready to start the installation process. Simply navigate to http://yoursite.com/install.php. Let's step through the installation process in detail now.

SELECTING AN INSTALLATION PROFILE The first step in the installation process is selecting an installation profile. Drupal prompts you with a screen asking for which installation profile you want to use during the installation: By default, Drupal comes with two installation profiles, the Standard profile and the Minimal profile. Custom distributions may come with additional profiles. We will discuss creating custom installation profiles at the end of this chapter.

MINIMAL PROFILE The Minimal profile installs a basic configuration of Drupal with only the required functionality enabled. This profile is even more minimal than the base Drupal 6 installation. This profile should be used if you are very familiar with setting up Drupal and don't want some of the additional features activated in the Standard profile.




STANDARD PROFILE The Standard Drupal profile installs and activates several commonly-‐used features to make your Drupal site more useful immediately. These additional features include: • • • • • •

• • •

•

Search form installed on the left sidebar. Powered by Drupal block enabled in the footer. A basic page content type is automatically created to store static content on your site. An article content type is automatically created to store time-‐specific content. The article content type replaces the story content type from Drupal 6. Both content types are set up with RDF capabilities. User profiles have pictures enabled by default. Profile pictures can have a maximum size of 1024x1024 pixels and be up to 800 KB when they are uploaded. They will be displayed using the thumbnail image style. A taxonomy called Tags is created to allow easy categorization of content on your site. The article content type is enhanced by adding an image field, which allows PNG, GIF, and JPG files to be attached to the article. An administrator role is created that has all permissions activated for it. As new modules are activated, the administrator role will automatically be updated with the permissions for the new module. The Seven theme is activated for the administration section of the site.

In most cases, you will want to start with the Standard installation profile, especially if you are setting up an entirely new site or if you are new to Drupal.

LANGUAGE SELECTION The next step in the installation is choosing the language with which you want to install Drupal. By default, Drupal only includes an English installer. If you want to want to install Drupal in another language, you will need to download a translation from Drupal.org. A complete list of translations is available at http://drupal.org/ project/translations. After you download the translation you want to use, you will need to unpack the translation and copy it to your document folder. The process to unpack and copy the files is similar to the process we used when we unpacked and copied the core Drupal files to your server.

REQUIREMENTS CHECK Drupal will now check the requirements of your server to ensure that it meets the minimum requirements to run Drupal and to ensure that everything is ready for the installation to proceed. If Drupal does discover any problems, it will give you information about how to correct the problem. In our case, it looks like we forgot to set up our settings file. The settings file tells Drupal which database to




connect to as well as the connection information. To create a settings file, navigate to your document root and then navigate to the sites/default folder. Copy the default.settings.php file to settings.php. You do not need to change any of the information within the file. After you have corrected any problems, click on the proceed with the installation link. Drupal will re-‐ evaluate the requirements and let you know if anything else needs to be changed.

DATABASE CONFIGURATION The next step in installing Drupal is configuring the database where Drupal will store the content and configuration information for your site. The functionality of this screen has also been enhanced in Drupal 7. The key difference is that Drupal 7 will automatically check which types of databases are available to you based on your server setup. Then, it will only allow you to select a database which will work. If you want to run Drupal using a different database server than your web server, you can use the ADVANCED OPTIONS link to configure the database server and port. You can also use ADVANCED OPTIONS if you are setting up multiple sites within a single database. For a Standard installation, enter the name of your database as well as the username and password for the database. This functionality remains the same as in Drupal 6. You will need to create a database outside of the Drupal installation. The actual steps for creating a new database vary depending on your website host. Many hosts have installed phpMyAdmin, which allows you to manage your databases with an easy-‐to-‐use web-‐based interface. If you use phpMyAdmin to create your database, you will need to log in to phpMyAdmin and create a database. You can create a new user for the database in the Privileges tab. After you have entered your database settings, click on the Save and continue button. Drupal will now configure the database and set up your site. As the installation proceeds, Drupal will display its progress. The installation may take several minutes to complete.

CONFIGURE SITE After the Standard installation has completed, you will need to configure your site. The basic configuration starts by asking you for the SITE INFORMATION and SITE MAINTENANCE ACCOUNT details. The site maintenance account has the ability to change all settings within the site. You should make sure that the Password is difficult to guess and that it is stored securely.




The next set of configuration options allow you to determine which country your site is located in as well as the Default time zone for the site. The Default country setting is new to Drupal 7 and the Default time zone setting has been made easier to understand by adding the name of the time zone. The final set of configuration options are related to updating your site. These settings allow you to have Drupal automatically check if any updates are available for Drupal or any contributed modules you have installed. If there are any updates available, you can optionally have Drupal e-‐mail you so you don't have to constantly check for updates on your own. It is highly recommended that you activate both of these options. After you have entered the configuration options to your satisfaction, click on the Save and continue button to finalize your choices. After all options have been saved to the database, you will be given a final status screen stating that the installation completed successfully. Now that the installation is finished, we can finally navigate to our site by clicking on the Visit your new site link.




Theming The theme employed on your Drupal site defines the visual appearance of the site. The theme files control the placement of the elements on the screen and impact both the presentation of the contents and the usability of the functionality. How well a theme is designed and implemented is, therefore, largely responsible for the first impression made by your site. Themes are the most visible, and arguably the most influential, element of your Drupal site.

WHAT IS A THEME? In the context of Drupal, the term "theme" means a collection of inter-‐related files that are responsible for the look and feel of a Drupal website. Other content management systems (CMS) use different names for the files that perform the same function in their particular systems—the most common term used being "template." There are a couple of different ways you can look at the function Drupal themes: • • •

Expressed conceptually: A theme is a visual container that is used to format and display data on the screen Expressed in terms of its component parts: A theme is a collection of files that format data into the presentation layer viewed by site visitors and system administrators Expressed in simple terms: A theme determines how your site looks!

A theme contains many types of files that are familiar to web designers, including stylesheets, images, and JavaScript. A theme may also include some files whose extensions may not be so familiar, for example *.tpl.php files – an extension that is used to designate template files that use the PHPTemplate theme engine supplied with Drupal. Throughout this book, we will use "theme" to refer collectively to the files responsible for displaying the information on the page. We will use "template" to refer to a specific type of file found in themes, that is, the .tpl.php file.

THE OUTPUT OF A DRUPAL THEME When you visit a website powered by Drupal, what you see on the screen is the result of the site's active theme files. The theme's various files contain the functions that produce the data and also set the styling, position, and placement of the data on your screen. A lot of work for a small group of files. When creating the theme, the designer designates areas inside the layout to fulfill various functions. For example, in a typical three-‐column theme, the center column is used to hold the primary content whereas




the two smaller side columns contain secondary information. Screen space within each of those areas is also allocated according to the designer's priorities. One of the key functions of the page template file in a Drupal theme is to provide placeholders for the elements on the page. The placeholders are called regions. A theme developer can insert the regions anywhere on the page by adding a short statement to the code of the appropriate file. Regions are created by placing simple, standardized PHP snippets inside the page template file. The PHP statement will automatically include the items assigned to the region. The region statement is typically wrapped with a div to allow you to control the placement of the region on the screen. Regions are, in other words, placeholders inside the page layout where a site administrator can position functional output; this is most frequently done by assigning blocks to the region desired. Wherever regions have been specified, the site administrator can assign module output.

THEME FILES A diverse group of files work together to enable themes in Drupal. While the ones you need are kept in the themes directory, the theme engine and other helper files are located in a different place. • • •

The core themes and their respective files are kept in the directory named /themes on your server. The PHPTemplate engine files are located in the /engines sub-‐directory inside the /themes directory. The html.tpl.php file is located in the /modules/system directory. This file is new in Drupal 7 and is used to provide header and doctype data used by all the themes.

The PHPTemplate-‐specific files all follow the same naming convention — *.tpl. php. The prefix of each of those files is specific in that they are intended to override functions defined elsewhere. For the system to recognize that these files in the theme directory are intended to override the originals, the names must be consistent with the originals. The naming of some of the other theme files is flexible and within the discretion of the author. To create a theme that uses the PHPTemplate theme engine, you need three files: • • •

page.tpl.php: The file containing the regions and the key elements of the layout style.css: The Cascading Style Sheet for the theme; this is needed only for styling unique to the theme .info: This file sets a number of parameters for your theme, including the theme's name, description, and version information




CREATING A NEW THEME While many people may undertake a theme project by copying, and then customizing, the files of an existing theme, in this chapter we cater to the purists who want to do it all themselves. To follow fully the examples in this chapter, you will need your favorite code editor and, preferably, access to a server upon which to preview your work. In the section dealing with sub-‐themes, we will be using as our example the Fusion theme, which you can download from Drupal.org. In this chapter, we'll cover: • • •

The basics of creating a new theme employing the PHPTemplate engine The various tasks required to produce a fully functional theme New theme creation with the aid of a sub-‐theme

The advantages of using a sub-‐theme for creating your new theme are: • • • •

Faster site build Common resources are already coded The base theme can be upgraded separately Your code is reusable

CREATING A NEW THEME THROUGH SUB-‐THEMING Creating a new theme by creating a sub-‐theme is faster and easier than theming from scratch. There exist a number of themes that have been specifically built with this purpose in mind—so-‐called base themes or "starter" themes. Though you can create a sub-‐theme from any other theme, starter themes are tailored to providing you with useful resources, such as an assortment of common templates and stylesheets. Some starter themes are very basic, others are feature-‐rich.

SELECTING A BASE THEME If you have decided to proceed via sub-‐theme creation, the first issue you need to address is selection of a base theme. All sub-‐themes are premised on a base theme. You should do a bit of research to identify the base theme that is most suitable for your needs. It's best to select a theme that has the features that you want and, ideally, exhibits some of the layout and styling you want. Among the candidates, you might want to consider are:

Adaptivetheme The Adaptivetheme starter theme is one of the more feature-‐rich options. The theme includes a wide array of layout options and styles that can be implemented directly from the Theme Manager. The package includes a ready-‐to-‐use sub-‐theme and the project page has links to documentation and tutorial Proprietary and Confidential 12 November 2013



resources. The only downside to Adaptivetheme is that it does employ a few non-‐standard implementations that may make it a slightly less attractive choice, if you are a purist. To learn more and download the theme, visit the Adaptivetheme project: http://drupal.org/ project/adaptivetheme. Zen This theme is one of the most popular in the Drupal collection. Zen has been around for years but continues to evolve and improve. The current version is tailored for use as a starter theme with a wide range of features and ready-‐to-‐go sub-‐themes. It is a solid choice but is often criticized (mildly) for being heavy on the code and the stylesheets. Visit the Zen project to learn more and download the theme at: http://drupal.org/project/zen.

INSTALLING WITH SUB THEME To begin with, install the Fusion theme on your site. The project page is http:// drupal.org/project/fusion. Make sure you grab the most recent version suitable for Drupal 7. 1. Once it is installed, access the /sites/all/themes directory on your server. 2. Access your Drupal installation on the server, then make a copy of the /fusion_starter_lite theme directory. 3. Next, paste that directory into the /sites/all/themes directory and rename it. Let's call our new theme: Cold Fusion. So you should now have a new directory at: /sites/all/themes/coldfusion. 4. Next, let's update the theme name inside all the files we've kept. We need to change every occurrence of fusion to coldfusion. If you've got a code editor, you can run a find/replace to get this done, if not, you'll need to crack open each file and do this. 5. If all has gone according to plan, the new Cold Fusion theme can now be seen inside the Disabled Themes section of your site's Theme Manager.

STYLING THE NEW THEME Styling the new theme will require various techniques, depending on your needs. As this book is neither a dissertation on site architecture nor a CSS tutorial, we are going to focus on review of the different options available to you and how, in brief, to implement them. It's up to you to decide what you need to achieve your theming goals. The principles discussed here in the context of Fusion are applicable with other themes, except where noted.




Syntactically Awesome Style Sheets (SASS) CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass lets you use features that don't exist in CSS yet like variables, nesting, mixins, inheritance and other nifty goodies that make writing CSS fun again. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it out as a normal CSS file that you can use in your web site.

INSTALLING SASS There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it). 6. 7. 8. 9. 10. 11. 12. 13. 14.

CodeKit (Paid) Compass.app (Paid, Open Source) Hammer (Paid) Koala (Open Source) LiveReload (Paid, Open Source) Mixture (Paid) Prepros (Open Source) Prepros Pro (Paid) Scout (Open Source)

VARIABLES Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to make something a variable. Here's an example: $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

When the Sass is processed, it takes the variables we define for the $font-‐stack and $primary-‐color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. Proprietary and Confidential 12 November 2013



body { font: 100% Helvetica, sans-serif; color: #333; }

NESTING When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation: nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }

You'll notice that the ul, li, and a selectors are nested inside the nav selector. This is a great way to organize your CSS and make it more readable. When you generate the CSS you'll get something like this: nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }




PARTIALS You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should be generated into a CSS file. Sass partials are used with the @import directive.

IMPORT CSS has an import option that lets you split your CSS into smaller, more maintainable portions. The only drawback is that each time you use @import in CSS it creates another HTTP request. Sass builds on top of the current CSS @import but instead of requiring an HTTP request, Sass will take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser. Let's say you have a couple of Sass files, reset.scss and base.scss. We want to import reset.scss into base.scss. /* _reset.scss */ html, body, ul, ol { margin: 0; padding: 0; } /* base.scss */ @import 'reset'; body { font-size: 100% Helvetica, sans-serif; background-color: #efefef; }

Notice we're using @import 'reset'; in the base.scss file. When you import a file you don't need to include the file extension .scss Sass is smart and will figure it out for you. When you generate the CSS you'll get: html, body, ul, ol { margin: 0; padding: 0; } body { background-color: #efefef; font-size: 100% Helvetica, sans-serif; }




MIXINS Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes. Here's an example for border-‐radius. @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

To create a mixin you use the @mixin directive and give it a name. We've named our mixin border-‐radius. We're also using the variable $radius inside the parentheses so we can pass in a radius of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin. When your CSS is generated it'll look like this: .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }

EXTEND/INHERITANCE This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. In our example we're going to create a simple series of messaging for errors, warnings and successes. .message { border: 1px solid #ccc; padding: 10px; color: #333; } .success { @extend .message; Proprietary and Confidential 12 November 2013



border-color: green; } .error { @extend .message; border-color: red; } .warning { @extend .message; border-color: yellow; }

What the above code does is allow you to take the CSS properties in .message and apply them to .success, .error, & .warning. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like: .message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

OPERATORS Doing math in your CSS is very helpful. Sass has a handful of standard math operators like +, -‐, *, /, and %. In our example we're going to do some simple math to calculate widths for an aside & article. .container { width: 100%; } article[role="main"] { float: left; width: 600px / 960px * 100%;




} aside[role="complimentary"] { float: right; width: 300px / 960px * 100%; }

We've created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. The generated CSS will look like: .container { width: 100%; } article[role="main"] { float: left; width: 62.5%; } aside[role="complimentary"] { float: right; width: 31.25%; }



Advanced Drupal Training Documentation - OPIN

Advanced Drupal Training Documentation - OPIN

Suggest Documents

Drupal Training Services.pdf - Google Drive

Advanced Advanced Training

Strategy Guideline: Advanced Construction Documentation ...

Loan Documentation Masterclass - Euromoney Training

GOOD DOCUMENTATION PRACTICES TRAINING COURSE ...

GOOD DOCUMENTATION PRACTICES TRAINING COURSE ...

Sacramento County Adult Documentation Training

Drupal 7 Entities.pdf - Drupal Groups

Advanced - Inspired Cosmetic Training

Advanced - Inspired Cosmetic Training

Setting Up Oracle Advanced Collections - Oracle Documentation

Programming in Java Advanced Imaging - Oracle Documentation

Oracle Advanced Collections User Guide - Oracle Documentation

Advanced technologies for archaeological documentation ... - CiteSeerX

Advanced Construction Documentation Recommendations for ... - NREL

Software Project Documentation - International Journal of Advanced ...

H:\My Documents\ConnectND Training-Documentation\Finance ...

Integrating Technical and Training Documentation ... - CiteSeerX

Oracle Training Administration User's Guide - Oracle Documentation

H:\My Documents\ConnectND Training-Documentation\Finance ...

iOS Android Windows - OPIN Systems

Starter Kit Training Guide - Drupal Web Starter Kit - University of ...

2bits - drupal

Martin Yelling's Advanced training plan