Run Time 25:08Free
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.
Run Time 10:31
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.
Run Time 13:10
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.
Run Time 14:34
Let's have some more fun with Flexbox, as we review several different use-cases, including creating grids, common layouts, and more.
Run Time 14:10
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.
Run Time 8:24Free
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?
Run Time 15:14Free
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.