The original 960 Robots theme is based on a 960 pixel grid. It has container and grid classes with widths declared in pixels—an absolute metric. In this lesson, we will take a first step in implementing a responsive design: converting absolute units to relative ones. We'll begin this process by editing the 960.css file, which contains the width declarations for our container and grid classes that make up our site's layout. Using the target ÷ context = result formula, we'll convert widths declared in pixels first to ems, then to percentages, with a little nudge of the decimal point over two places.
With our layout's container and grid classes using relative widths declared in percentages, we'll be on well on our way to making our site more fluid and flexible.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 03-fluid-layout)
We're making progress in making our theme more flexible and fluid. Next, we’ll address our site's typography and implement relative font-sizing. This will help ensure that our text is more legible without the need to pinch and zoom. To do this, we’ll convert our font-sizes declared in pixels to ems, using the target ÷ context = result formula. Break out those calculators!
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 04-responsive-typography)
As we've been converting our font-sizes to ems, we've noticed other properties that need updating, including margin and padding. In order to correctly apply our target ÷ context = result formula, we need to know the appropriate value for "context." Converting padding presents us with a new context, different than that of a margin. In this lesson, we'll learn how to determine the appropriate context and convert padding and margin pixels to relative units.
Additional resources
https://github.com/DrupalizeMe/demo-rwd-7x (Checkout branch 05-responsive-padding-margins)
Drupal 8 Core, Now with More Fields
Blog postOne of the the things I like most about Drupal 8 as a site builder is how quickly you can get up and running on creating a new site. Although the installer takes a tad (insert jokes here) longer than Drupal 7, you get so much more out of the box. No need to install Drupal and head to Drush to download/enable a handful of modules just to get your site ready. For example, just to get something like an email field was yet another download. Of course, there is Views in core, but another great thing is a much larger plethora of field types. Now in Drupal 8 there are a handful of useful fields in core:
Our latest podcast, Episode 52: Drupal Community Leadership, has Addi joined by Larry Garfield (Crell), Greg Dunlap (heyrocker), and Gábor Hojsty (Gábor Hojsty); three people who have
Release Day: More Twig Tutorials
Blog postThis week, Leanna Pelham of KnpUniversity continues to show you how to become a Twig expert by demonstrating Twig goodies such as template inheritance, functions, tests, for and if syntax, debugging techniques, macros, and other advanced tips and tricks. Each lesson is a bite sized tutorial and includes downloadable site code that will get you up and running with Twig without getting overwhelmed.
This week we have a ton of new tutorials for you to enjoy. We're very happy to bring back our friends from KnpUniversity to provide a great little series on the Twig templating system, and we're also wrapping up the entire O'Reilly Using Drupal book series with the final tutorials.
In this short series you will learn how to find and evaluate Drupal modules for your project. This first tutorial will show you where to find modules on Drupal.org, and various ways you can use Drupal.org's search tools.
Additional resources
Drupal.org Modules page
Drupal module categories
Similar modules group
Drupal case studies
Planet Drupal
An open source project’s strength comes from the power of its base of contributors, and a Drupal project is no different. Although every line of code added or changed in Drupal core goes through rigorous peer review, contributed modules are more of a Wild West where anyone who jumps through a few basic hoops can add modules for everyone to download. Whether or not a module is well maintained, its overall code quality, and how well used it is in the overall community are all important factors for you to consider when selecting modules. This tutorial will talk about determining these factors by closely inspecting the tools Drupal.org provides, starting with the central feature of all Drupal modules: the project page.
By far, the best way to keep up-to-date on which modules are the most useful, and to ensure that those modules do what you need, is to actually get directly involved and help. The Drupal community offers a myriad of ways for everyone, from the person who just installed Drupal for the first time yesterday to the person who has been coding since she was in diapers, to give something back. In this tutorial we'll look at all of these options and explain how you can dive in.
Additional resources
Many businesses, both large and small, would like to take better advantage of their web presence by selling their products or services directly online. Setting up ecommerce, however, can be a very daunting task. In this series you will create an online t-shirt shop, and in the process you will learn how to use the basic pieces of Drupal Commerce, including setting up a Paypal payment system, along with an introduction to the Feeds module, for importing our catalog, and the Rules module, to set up taxes. In this lesson we'll kick things off by reviewing the requirements for the Sweet Tees store, and discuss how we'll be going about implementing them.
Additional resources
Drupal Commerce is a complete package for running an online store. As such, it actually contains numerous submodules that each implement features of an online store, and can be turned on or off depending on the precise functionality required. In this section, we’ll look at each module in turn, and outline its purpose and where it fits. In this lesson we'll get an overview of the major components of Drupal Commerce, including:
- Carts, checkout, taxes, and payment
- Customers and orders
- Products and pricing
- Additional Drupal Commerce add-ons
Additional resources
Before we get to the first step in creating our store—adding products—it’s worth taking some time to discuss and understand how Drupal Commerce treats products within the system. While product management may appear unintuitive at first, the product management features in Drupal Commerce are designed to allow for maximum flexibility. In this lesson we'll explain what product types are, and take a look at both the required fields that come with them, and the custom fields you can add.
Additional resources
The first step in setting up our online t-shirt store is to turn on a formidable array of modules to enable the Drupal Commerce module, and then set up product types for the merchandise that Sweet Tees sells: T-shirts and stickers. In this lesson we'll get the right modules enabled, configure our two product types, and then create some sample products to make sure it's all working the way we expect.
Additional resources
The Feeds module provides the capability to ingest data from any number of different sources and transform it into native Drupal constructs. It’s a versatile tool that can be used for things such as large-scale data migration, automatically populating a block of recent content from external sites, or synchronizing content posted among multiple sites. In this lesson we'll learn how Feed importers are created with the three main pieces of Fetchers, Parsers, and Processors.
Additional resources
Using Drupal, 2nd edition
Using Drupal source code
Feeds project
Now that we’re familiar with the Feeds module’s data import tools, let’s turn our attention to importing t-shirt products for Sweet Tees. Sweet Tees has kindly furnished us with a comma-separated values (CSV) file containing all of their t-shirt product data for this purpose. CSV is a common data export format from databases and spreadsheet programs. A CSV file is a simple text file that encodes a data set with each record on its own line, and a separator (such as a comma or tab) between the data values. In this lesson we'll create a feed importer for CSV files, map the CSV data to our Drupal Commerce products, and then actually import the CSV product data into our store.
Additional resources
Now that all of this groovy product data is showing up fine in the administrative interface, there’s just one problem: how do we expose these products on our public website to our customers? And further, how do we avoid displaying a product catalog with 25 entries in it, when from a customer’s point of view we only sell four products (three t-shirts and a sticker)? In this lesson we'll get an overview of how Drupal Commerce handles this with the concept of product displays and product attributes.
Additional resources
In this lesson we'll put what we just learned into action by creating a content type for product displays, and a few sample products to get the hang of how things work.
Additional resources
In this lesson we'll create a nice interface for browsing our products. We will categorize our product displays using the taxonomy system to get our like items grouped together. We'll walk through the process for creating a catalog vocabulary and terms, and then configure the content type and product type to bring it all together.