Intermediate

Modern CSS Workflow

The way we construct and think of CSS has changed drastically in the last ten years. In this series, we'll review key tools in every modern frontender's belt. This includes everything from the popular BEM methodology, to the wonders of flexbox, to bullet-proof grid frameworks.

Start Series

Share this series on:

  • 01

    Episode 1 Run Time 25:08

    Stylus and Components Free

    Let's begin with a quick review of how I currently prepare the CSS structure for a new project. We'll use Stylus (my personal preprocessor of choice) with Laravel Elixir, while organizing our various sections and components into their own files.
  • 02

    Episode 2 Run Time 10:31

    Get Lost with Grids

    It wasn't always this way, but, today, there are countless CSS grid frameworks available. My personal preference at this moment is called Lost, by Cory Simmons. As a PostCSS extension, it allows for a very readable and intuitive interface.
  • 03

    Episode 3 Run Time 13:10

    Flexbox is Amazing

    In my mind, Flexbox is the best thing to happen to CSS in a long time. It takes all of those annoying layout quirks, and demotes them to non-issues.

  • 04

    Episode 4 Run Time 14:34

    More Fun With Flexbox: Grids and Layout

    Let's have some more fun with Flexbox, as we review several different use-cases, including creating grids, common layouts, and more.
  • 05

    Episode 5 Run Time 14:10

    BEM Workflow

    BEM is simply a naming convention. Nothing more, nothing less. But if integrated into your workflow, you just might find that it significantly improves the organization and readability of your stylesheets.
  • 06

    Episode 6 Run Time 8:24

    Simpler Sass Styling in the Browser Free

    You know the drill: open Chrome dev tools, toy around with styling an element, copy your changes, open the editor, find the Sass partial, paste it in. What a waste. What if you could instead do all of that in one go?
  • 07

    Episode 7 Run Time 15:14

    The Illusion of Typed Text Free

    A project I'm working on required that a front page headline display as typed text in real-time. You've seen this effect before, where it appears as if somebody behind the scenes is typing out each letter. I recently learned a fun technique from Lea Verou that makes this possible with CSS alone. Let's learn how.

    View the source for this episode on GitHub.