July 2015

Greetings!

First of all, thank you for everyone who stepped up to donate to the Drupal 8 Accelerate fund over the last couple weeks, it was a great turnout and the winner of the 12-month membership has been selected. But you're all winners, because your contributions will help bring about the release of Drupal 8, something we're probably all pretty excited to see.

This week we're releasing 20 new videos that continue our dive into using SASS (Syntactically Awesome Style Sheets) as a way to make our CSS more powerful and sane. This time, we work through the process of converting our SASS into CSS, talk about how to use variables (one of the first 'ah-ha' moments many of us have with CSS preprocessors) and why it makes sense to split out SASS into multiple files.

We're just getting warmed up in the SASS department here, so enjoy and stay tuned for more!


How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues New!

Screenshot for How to install Ruby and SASS on Windows and upgrade RubyGems (the 'gem' tool) to fix SSL issues

Installing SASS on Windows requires also installing Ruby, so in this video we walk through the steps involved and also discuss how to resolve issues with our installation. You will hopefully not run into the same error, but we outline the steps for resolving command line issues in general, just in case.

What a CSS preprocessor does and why we're using the .scss syntax instead of .sass New!
(This one's FREE!)

Screenshot for What a CSS preprocessor does and why we're using the .scss syntax instead of .sass

Now that we have SASS installed, we take another angle on what a CSS preprocessor actually does, and explain why we're choosing the less laconic but more CSS-like SCSS syntax.

How to convert a .scss file to a .css file New!

Screenshot for How to convert a .scss file to a .css file

Here's where the magic starts. In this video we convert our first .scss file over to a .css file that the browser can understand.

How and why to use variables in SASS New!
(This one's FREE!)

Screenshot for How and why to use variables in SASS

One of the most valuable uses of SASS is to reduce repetition in your code. In this video we discuss one of the most powerful ways of reducing repetition while adding meaning to your code.

How to trigger CSS compiling when a file is changed with the SASS 'watch' command New!

Screenshot for How to trigger CSS compiling when a file is changed with the SASS 'watch' command

Up until this point, we've been compiling our SASS manually on the command line, but it would be a pain to have to re-compile our code this way throughout the entire templating process. Luckily, there's a better way! In this video we demonstrate how SASS can look for changes to files and re-compile CSS automatically.

Why to create a common color palette and converting our SASS to use one New!

Screenshot for Why to create a common color palette and converting our SASS to use one

So far we've used a color picker to figure out what colors are being used for background, text and borders. However, if we had a consistent color palette using SASS variables, we would be able to easily create visual consistency across our template and have easy-to-remember variables to boot! Here, we walk through the process of converting our code to use a color palette instead of hodge-podging it.

How to add comments in CSS and SASS New!

Screenshot for How to add comments in CSS and SASS

With any code, adding comments can be a lifesaver when it comes to understanding what's going on. In this video we demonstrate how to add comments in CSS and an additional syntax that SASS gives us to work with.

How to use TODOs to mark code to change later without interrupting your workflow New!

Screenshot for How to use TODOs to mark code to change later without interrupting your workflow

Sometimes you'll run across issues in your code that you can't tackle right away. To remember, you can use a standard TODO comment and easily find it later on when you have the time. Here we walk through the process of adding one for a bit we don't have time for just yet.

Wrapping up our review of values that could be converted to variables New!

Screenshot for Wrapping up our review of values that could be converted to variables

In this video we complete the process of reviewing our code for any potential values we could pull into variables.

How to use nesting in SASS to reduce selector repetition New!
(This one's FREE!)

Screenshot for How to use nesting in SASS to reduce selector repetition

Nesting is one of the most exciting parts of SASS for many front-end developers. It allows you group styles together in a meaningful way and significantly reduce repetition. Here we adjust our code to use nesting and simplify our styles.

Why it makes sense to use separate SASS files for each component New!

Screenshot for Why it makes sense to use separate SASS files for each component

It may sound like a dramatic leap, but in this video we talk about why it might make sense to split off each of our component's CSS rules into separate files. It's not a trivial shift, but it's one that will be important for the sustainability of our project in the long term.

How to use parent selectors as a prefix with the ampersand in SASS New!

Screenshot for How to use parent selectors as a prefix with the amperstand in SASS

We've managed to reduce repetition quite in our CSS by using SASS variables and nesting. In this video we implement one additional feature of SASS, which is the ability to use a selector as a prefix for the selectors nested inside it's definition. Since we're using SMACSS, this works brilliantly to nearly eliminate the need for repeating our component names in our selectors.

Why it's important to review the CSS that your SASS creates New!
(This one's FREE!)

Screenshot for Why it's important to review the CSS that your SASS creates

SASS provides a rich syntax for organizing your CSS selectors in a meaningful way. However, it's easy to use SASS in a way that creates inefficient and unnecessary CSS. Here we talk about why it's important to review the processed CSS, especially when you're experimenting with new features in SASS.

How to efficiently code an anchor tag with multiple states in SASS New!

Screenshot for How to efficiently code an anchor tag with multiple states in SASS

In our template, our most complicated and verbose selector is for an anchor tag and all of its states. In this video we talk through how to re-code this in SASS, making it far less redundant and easier to read.

How to resume from this point (part 1, step 19) New!

Screenshot for How to resume from this point (part 1, step 19)

If you want to hop into this video series from here, this video will show you how to get your examples squared away so you can dive right in.

Re-organizing our file structure into folders and how to use SASS watch on folders New!

Screenshot for Re-organizing our file structure into folders and how to use SASS watch on folders

Up until this point, we've used a flat file structure (i.e. no folders) for all of our project files. However, we're getting to a point where it makes sense to break it down. As a bonus, by moving our SASS into a folder, we'll be able to watch all the files in the folder instead of specifically watching a single file.

How to use partials to split SASS into smaller files New!

Screenshot for How to use partials to split SASS into smaller files

We talked earlier about how it might make sense to split out the SASS for our components into separate files. In this video we use the SASS concept of partials to begin this process and explore exactly how partials work.

Moving the rest of our component SASS into separate partials New!

Screenshot for Moving the rest of our component SASS into separate partials

In this video we rapidly finish separating out our component SASS into individual files.

Updating the paths in our HTML to reflect the new file structure New!

Screenshot for Updating the paths in our HTML to reflect the new file structure

After moving our files around, we now need to update the paths in our index.html file to reflect the new location of our CSS and image files. Here we take care of that.

How to split our variables and base styles into meaningful SASS partials New!

Screenshot for How to split our variables and base styles into meaningful SASS partials

At this point our styles.scss file is looking more like a container for partials than a stylesheet itself. In this video we discuss where to put the code that is still living in the styles.scss.

Greetings!

If you've never used Bower before, you're in for a treat. In addition to making life easier for managing third party front front end libraries, learning how to use it will also set the foundation for using other package managers throughout the series. This week we start by empowering you though the exercise of installing Bower and giving it a go.

This week we're also talking about CSS units, including the difference between relative and absolute units and what "pixel" actually means. Good stuff.

One more thing: If you didn't enter to win the drawing for a free 12-month membership to BuildAModule, you still have 6 more days to make a donation to Drupal 8 Accelerate. See last week's newsletter for more info.


How to install Bower and the Normalize.css Bower package New!
(This one's FREE!)

Screenshot for How to install Bower and the Normalize.css Bower package

Now that we've gotten Node.js installed, we can get Bower set up. In this video we install Bower and download our first Bower package. Nice!

What JSON is and exploring our first Bower package New!

Screenshot for What JSON is and exploring our first Bower package

In the last video we installed the Normalize.css Bower package, and here we take a look at where that package was installed and what the file structure looks like.

Overview of Semantic Versioning and using a package manager for version management New!

Screenshot for Overview of Semantic Versioning and using a package manager for version management

We discuss Semantic Versioning (also known as Semver) at length in another video on BuildAModule, but here we do a quick overview and talk about why a package manager is useful for managing semantically-versioned packages.

How to create a bower.json file for private projects New!

Screenshot for How to create a bower.json file for private projects

Bower is used for creating public packages like the Normalize.css package we just downloaded, but we can also use it for a private project. In this video we walk through the process of creating a bower.json file for a project we're not planning on sharing with the world at large.

How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*) New!

Screenshot for How to specify Semantic Versioning ranges with a tilde (~) or asterisk (*)

It would be nice to be able to pull in third party library updates into our project without having to worry about breaking things, right? In this video we talk about how to use version ranges with Bower to pull in just patch updates to our project to minimize the impact of making updates.

How to update bower packages and the benefits of using Bower New!

Screenshot for How to update bower packages and the benefits of using Bower

In this video we demonstrate how to pull in updates to our Bower packages with a single, simple command line command. We also talk briefly about why doing updates this way makes so much sense.

The difference between absolute and relative CSS units and what a pixel unit is New!
(This one's FREE!)

Screenshot for The difference between absolute and relative CSS units and what a pixel unit is

A pixel on your screen isn't the same as a pixel unit, which is something that confuses many a new front end developer. In this video we talk about what a 'pixel' really is, and compare the two kinds of CSS units for measurement: absolute and relative.

How the 'em' relative CSS unit works New!

Screenshot for How the 'em' relative CSS unit works

Up until this point, we've been using pixels to measure our fonts and font properties. In this video we explore a relative measurement called 'em'. Em's are pretty handy in the right contexts, but rather a pain in the wrong ones. Here we talk about how they work.

How using absolute CSS units like 'px' prevents font resizing New!

Screenshot for How using absolute CSS units like 'px' prevents font resizing

One of the main arguments against using pixels as a CSS unit is that it freezes the ability to adjust the size of the font, making sites more difficult to use for those who are visually impaired. For those of us who don't adjust the default font size in our browser, it's good to see how it's done and what our site so far will look like to someone who's adjusted their font size.

How the 'rem' CSS unit works and why it can be hard to use New!

Screenshot for How the 'rem' CSS unit works and why it can be hard to use

Rem to the rescue! If pixels are to rigid and em's are to unpredictable, 'rem' units are the happy medium. In this video we explain how they work and address the one issue that can make them challenging to work with.

Add to playlist

Add to , or

Add to new playlist:

Add to playlist
This is a member-only feature
But, it's easy to become a member

Add to cart:


Loading...
Contact us

Below are the supported keyboard shortcuts for our video player.

space
Start / stop video
shift
Go to next video
shift
Go to previous video
Increase or decrease player speed by 20%
Skip ahead or go back by 15 seconds
1...9
Jump to a percentage (2 is 20%, for example)
f
Toggle full screen
Videos Pricing More Search
BuildAModule Logo Icon BuildAModule Logo Icon
Become a member!
$29
1 month
$156
6 months
10% off
$276
12 months
20% off
All memberships come with the following:
24 / 7 access to the entire 1800+ video library
An innovative video player with a rolling transcript
Extensive Drupal and cross-platform training
A thorough and thoughtful training style
Progress tracking
Take notes on specific video sections
Intuitive multi-user management
How many users?
user
Go solo with a single user, or give multiple team members access through one account and get discounts by bundling multiple users into a single membership.