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.
01
قسمت 1
Stylus and Components
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
قسمت 2
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
قسمت 3
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
قسمت 4
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
قسمت 5
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
قسمت 6
Simpler Sass Styling in the Browser
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
قسمت 7
The Illusion of Typed Text
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...
این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.