Grid Placements

Grid Line-based Placement grid-column-start/endgrid-row-start/end Example: Negative Grid Line-based Placement Column ExamplesStretch from first to last grid line. Rows ExamplesStretch from […]

Read More

Basics

What is CSS Grid CSS Grid is the most powerful layout system in CSS.With it, you can build layouts faster […]

Read More

Formatting & Tools

Formatting CSS A comprehensive example Use CSS Comb to bring order to your CSS code. Useful Tools CSS Resets You can create […]

Read More

Specificity

Classes vs. IDs Use IDs as JS hooks or as fragments identifiers in our page. Style with classes first. IDs […]

Read More

CSS Architecture: SMACSS

Scalable Modular Architecture for CSS, or SMACSS.Helps structure code for projects on any scale, similar to OOCSS.Combine repeating CSS patterns […]

Read More

CSS Architecture: OOCSS

Object Oriented CSS (OOCSS).The “object” here is a repeating visual pattern you see. Visual pattern are then abstracted into indepenedant […]

Read More

CSS Architecture: Grouping

Group repeated CSS properties together into one rule, then add the selectors that share these properties into it. Before After

Read More

Debugging in the Browser with Source Maps

With source maps (i.e. the .css.map files), we can use our browser’s developer tools to view the original Sass source, instead […]

Read More

6. Defining Media Queries

There are many benefits to using Sass when building or refactoring responsive layouts. In this video, we’ll cover some the […]

Read More

5. Convert Repeating Declaration Groups Into Mixins

Mixins are a smart way of reusing our code. One of the last steps in refactoring is replacing common patterns […]

Read More

4. Create Variables for Repetitive Values

Styles File Structures The _extends.scss file contains all the placeholders that you’ll @extend in your partials. scss |__ style.scss |__ base | _index.scss | […]

Read More

3. Nest Where It Makes Sense

Don’t over-nest code! Refer to the following page for more details on Nested Selectors Ampersand (&)

Read More

2. Extract Repeating Patterns Into Extends

Common Sass Structures The _extends.scss file contains all the placeholders that you’ll @extend in your partials. scss |__ style.scss |__ base | _index.scss | […]

Read More

1. Break Related Sections Into Partials

Common Sass Structures An example would be scss |__ style.scss |__ base | _index.scss | _base.scss |__components | _index.scss | […]

Read More

Refactoring CSS to Sass

Break related sections into partials Extract repeating patterns into extends Nest where it makes sense Create variables for repetitive values […]

Read More

Ampersand (&)

Sass lets you reference the parent selector of a nested rule using the ampersand (&) symbol. The & becomes the parent […]

Read More

Nested Selectors

Nested selectors make writing descendant and complex selectors fast and simple. .card { display: flex; h1 { color: $color-primary; } […]

Read More

Variables

Style reusability with Sass variables makes you save a lot of time and confusion. .card h1 { color: #278da4; } […]

Read More

Compile & Watch

Compile Sass sass input.scss ouput.css Watch Changes If you run the following command, you wont have to compile sass every […]

Read More

Installing Sass

What is Sass? A CSS preprocessor. A program that takes source code written in one type of language as input, […]

Read More