August 2015

Greetings!

This week we're releasing a new batch of videos in the "Front End Development" collection that tackle some of the nuances of SASS and CSS. For example, if you have two elements on a page with the same background color, should they share a class name? Or, what happens if you set a SASS variable in one selector and then use it in a different selector? If you're working towards becoming a front end expert, these are things you need to know.

Enjoy!


How to troubleshoot SASS nesting and prefixing conflicts New!

Screenshot for How to troubleshoot SASS nesting and prefixing conflicts

It's been a while since we've reviewed our template. In this video, we go back to the template and find a little problem with a header that can be traced to an inaccurate assumption how how we can structure our SASS.

Review of the typographic elements we have templated New!

Screenshot for Review of the typographic elements we have templated

Here we look through our mockup for typographical elements we've coded and identify a couple we still have left to tackle.

How to use a footer HTML tag and add a copyright symbol New!

Screenshot for How to use a footer HTML tag and add a copyright symbol

In this video we start coding the site-wide footer for our page. While we could use a div or section HTML tag, we do a bit of quick research to see if there's maybe a different tag that might be better suited to the task. We also explore how to incorporate HTML entities like a copyright or trademark symbol in our HTML code.

Adding SASS scaffolding for the footer New!

Screenshot for Adding SASS scaffolding for the footer

Once we have the HTML code for our footer section, it's time to give it some style. Before we can do that, we have to figure out where our styles go and what selectors to use. Here we do just that.

Setting a default text color for the footer New!

Screenshot for Setting a default text color for the footer

When there are multiple colors competing for dominance in a component, it's tough to figure out what kinds of defaults you should user. In this video we evaluate what might be a good default color for the footer and talk through the process of capturing the hexadecimal value of the color.

Why to avoid creating classes for common CSS property values between elements New!

Screenshot for Why to avoid creating classes for common CSS property values between elements

With CSS, there's a huge amount of freedom when it comes to organizing how properties apply to selectors. One pattern you'll begin to recognize is when multiple elements have the same variation of style. In those cases, does it make more sense to create a unique class name and associate styles with it, or to apply the style individually to the elements with those properties? In this video we explore the options.

Troubleshooting editing SASS partial styles with the browser inspector New!

Screenshot for Troubleshooting editing SASS partial styles with the browser inspector

Here we use the browser inspector to alter some of our CSS code, but find that when we do, something unexpected happens.

How to adjust spacing between paragraphs in CSS New!
(This one's FREE!)

Screenshot for How to adjust spacing between paragraphs in CSS

In this video we cover a staple of CSS problem-solving: How to change the amount of space between paragraphs.

How variable scope works in SASS New!
(This one's FREE!)

Screenshot for How variable scope works in SASS

If you've worked with a programming language before, the idea of variable scope will be familiar to you. If not, then this video will throughly explain the idea. Even if you are familiar with scope, this video might point out some differences between how SASS interprets scope and how you might be used to it working in other languages.

How to use HTML comments and preparing to code the footer menu New!

Screenshot for How to use HTML comments and preparing to code the footer menu

Here we comment out some of our HTML code to give us some visual room to begin building our footer menu.

Greetings!

One of the things that makes working with SASS a challenge is tying the CSS the browser uses with the SASS that we write. Instead of rummaging around your code for clues, you can instead set up something called a 'source map,' and this will allow you to jump directly to the SASS code responsible for the CSS you're viewing in a browser inspector. Super cool!

So we start out this week looking at how source maps work, and then continue on to talk about why there are so many individual pieces of software that go into front end development, and how they connect to one another. This was one of my favorite videos to make and I've made it free as a way for front end developers to explain to the non-initiated why the added complexity of all this software is justified and simplifies things down the road.

Finally, we talk about Bundler and how to use SASS extensions to further increase the power that SASS has out of the box. Good stuff!

Enjoy!


Reassurance that splitting our single SASS files into multiple partials is not over-engineering New!

Screenshot for Reassurance that splitting our single SASS files into multiple partials is not over-engineering

Our project, thus far, is not terribly complicated. It might seem that splitting out our SASS into multiple files is overkill, and if that's what you're thinking, you would be right if our project wasn't destined to become more complicated as we move forward. Most modern web projects, especially at the enterprise level, requires a structure that scales well for multiple front-end contributors and rapid CSS pre-processing, and using partials can help make that happen.

How CSS source maps work and how they allow us to inspect the SASS source of CSS properties New!
(This one's FREE!)

Screenshot for How CSS source maps work and how they allow us to inspect the SASS source of CSS properties

I'm so excited you've made it to the video where I get to show you how you can use the browser inspector to find the exact location in your SASS where a CSS rule is created. This is made possible through the use of CSS source maps, and it's a beautiful, beautiful thing.

How to use CSS source maps in Firefox New!
(This one's FREE!)

Screenshot for How to use CSS source maps in Firefox

While we use Chrome throughout this series, Firefox also supports source maps, so we do a quick demonstration of how to use them here.

How to navigate to SASS variable definitions in the browser New!

Screenshot for How to navigate to SASS variable definitions in the browser

Not only can you delve into your SASS directly in the browser, but you can track down where variables are defined. In this video we show you how.

Why it makes sense to use the SASS Globbing extension for automatically including partials New!

Screenshot for Why it makes sense to use the SASS Globbing extension for automatically including partials

Now that we've separated out our SASS into files that correspond to components, we now have several manual steps we have to take to add a new component in. Luckily, we can automate one part of this with the SASS glowing extension, and in this video we talk about how it works.

How to install a SASS extension and automatically include partials from a folder New!

Screenshot for How to install a SASS extension and automatically include partials from a folder

One of the benefits of SASS is the rich library of extensions developed by the SASS community. Here we walk through installing the 'SASS globbing' extension to automatically pull in all partials in a specific folder.

The benefits and costs of using the SASS Globbing extension New!

Screenshot for The benefits and costs of using the SASS Globbing extension

SASS Globbing is awesome, but it's important to understand how it works so you don't get bit by it later on. In this video we summarize why it's so useful but also in what situations you might want to steer clear and just manually add your partials.

The pros and cons of using local software like SASS and Bower for front end development New!

Screenshot for The pros and cons of using local software like SASS and Bower for front end development

Throughout this series we've introduced a number of pieces of software, including Ruby, Bower, SASS and SASS extensions. Hopefully you're sold on the usefulness of these tools, but you also might get a sinking feeling when you think about how you're going to help a fellow developer set up their local environment. Here we talk about the potential issues of using local software for front-end development, in a large part so we can address how to resolve them in later videos.

Map of local software needed for front end development and how the parts relate to one another New!
(This one's FREE!)

Screenshot for Map of local software needed for front end development and how the parts releate to one another

It may seem like there's an endless chain of software components that we need in order to accomplish what used to be simple HTML and CSS. In this video we explain that there's a limit to the software components that we'll need, and also use a handy visualization to see how the different components connect and support each other.

Why there are so many individual pieces of front end software New!
(This one's FREE!)

Screenshot for Why there are so many individual pieces of front end software

Wouldn't it be nice if there was just one piece of software you could turn on to get all the tools you need for front end development? It would, but there's a good reason that isn't happening right now. Here we discuss briefly why.

How to learn more about SASS with the SASS documentation New!

Screenshot for How to learn more about SASS with the SASS documentation

So far we've talked about how to use variables, partials and includes in SASS, but not about how we learned how to do that. Here we step back for a minute to go to the source and show you where you can learn more about SASS conventions and syntax.

Why we're choosing not to use Compass just yet New!

Screenshot for Why we're choosing not to use Compass just yet

When many front end developers learn how to use SASS, they use it in tandem with a tool called Compass. However, unless your project really needs Compass, there are some compelling reasons to use straight-up SASS. In this video we talk about what those reasons are.

How to install Bundler New!

Screenshot for How to install Bundler

Bundler allows you to install specific versions of gems (like SASS and SASS Globbing) for each project. Here we take the first step and install Bundler.

How to generate a Gemfile with Bundler New!

Screenshot for How to generate a Gemfile with Bundler

Once we have bundler installed, we need to create a Gemfile - which is just a file without an extension called 'Gemfile' - and in this video we use Bundler to do just that.

How to add dependencies to a Bundler Gemfile New!

Screenshot for How to add dependencies to a Bundler Gemfile

Just like we did with Bower, we're going to list out the dependencies our project has and run a command line command to install them. With Bower, it was packages bundled through Packagist. With Bundler, it will be with gems supplied by any online source that makes gems available.

How to use project-specific versions of gems with 'bundle exec' New!

Screenshot for How to use project-specific versions of gems with 'bundle exec'

Bundler doesn't affect the gems installed in your local system, so to use them, you have to prefix your commands with 'bundle exec'. Sounds simple, but we walk through it in this video as well as demonstrating how to test if 'bundle exec' is actually working.

How the Bundler Gemfile.lock file works New!

Screenshot for How the Bundler Gemfile.lock file works

While we can specify version ranges in our Gemfile, our Gemfile.lock file keeps a record of the specific versions being used in a project. Here we talk through the purpose of the lock file and how to work with it.

How to use 'bundle exec' with 'sass watch' and 'sass globbing' New!

Screenshot for How to use 'bundle exec' with 'sass watch' and 'sass globbing'

We know now that the 'bundle exec' command is how to route our commands through bundler, and in this video we demonstrate how that works.

How to specify a version range in Bundler that updates to the latest patch version New!

Screenshot for How to specify a version range in Bundler that updates to the latest patch version

Earlier in this series we used the Bower package manager to manage which versions of third party libraries we were going to use. In Bundler we can do the same thing, but the syntax is a little different. In this video we demonstrate how to set up a version range with a tilde and greater-than symbol.

Setting up a README.md file and how we're automating documentation New!

Screenshot for Setting up a README.md file and how we're automating documentation

Because we're using package managers for our third party libraries, we have a lot less documentation do manually compose in order to ensure that our future selves and fellow teammates can work on the project. However, when we do have something that's not clear from our project's structure, we should add some notes. Here we create a README file to hold these.

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.