"Ruby Basics (Retired)" was retired on November 13, 2017.
- CSS
- Intermediate
About this Course
Today’s websites and applications are larger than ever and a lot hinges on the CSS architecture. CSS that is poorly thought-out can be a strain on development and maintenance in the long run.
In this course, we're going to build a UI toolkit using many of the best practices and principles of modular CSS architecture. We'll learn how a modular approach with Sass can boost our workflow and cut down maintenance by reducing the amount of code we write. It can also improve how our code scales because we're able to reuse it on other parts of our project.
What you'll learn
- The patterns of BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS)
- Writing code that scales, no matter how big the project
- Writing code that others can easily use and maintain
- Writing CSS components that don't rely on context
Getting Modular with Mixins and Functions
We'll start by creating our project's main configuration file, then write mixins and functions that will help make our project easier to scale and maintain.
10 steps-
Course Overview
1:52
-
The Project Config File
9:14
-
Pixels to Em Function
6:35
-
Sass Function Challenge
1 objective
-
Colors with Sass Maps
6:35
-
Nested Sass Maps
7:20
-
Review: Mixins and Functions
5 questions
-
Background Image Mixin
7:30
-
Pseudo-Element Mixin with @error
5:45
-
Sass Directives Challenge
1 objective
Sass and BEM
With the BEM (Block, Element, Modifier) methodology we're able to define a naming convention that will help make our CSS modular, portable and easier to understand by other designers and developers.
9 stepsSMACSS and Sass
SMACSS (Scalable and Modular Architecture for CSS) is a style guide for organizing our CSS. It aims to identify repeating patterns we then code into flexible, re-usable modules. In this stage, we'll continue following the patterns of BEM while using the organization methods of SMACSS.
6 stepsSass Grid System
In this stage, we'll learn how to build an easily configurable fluid grid system you can use on any Sass project.
6 stepsModular Media Queries
In this stage, we'll learn how to write modular media queries with Sass.
7 stepsTeacher
-
Guil Hernandez
Guil is a Full Stack JavaScript and Front End Web Development instructor.