Back Button Vue

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.

7 episodes
1:41:11 hrs
Start Series
  • Latest Episode: The Illusion of Typed Text

  • Like this series? Share the love!

    1. Run Time 25:08 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.

    2. 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.

    3. 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.

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

    5. 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.

    6. 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?

    7. Run Time 15:14 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.

You May Also Enjoy...

Here are some additional series that may be up your alley.

Vue Laravel and the Front-end

Let's take a break from the back-end, and instead focus on that other world: the front-end! Don't worry, Laravel 5 has made this process as enjoyable...

49:57 mins
Vue Do You React?

While Laracasts is dedicated to PHP and Laravel, the reality is that most of us need to write JavaScript daily as well. In this series, we'll learn ab...

1:25:24 hrs
Vue The Vast World of Vue.js 0.12

Vue.js is the best JavaScript framework that you've likely never heard of. We've already covered React here at Laracasts, so let's move on to somethin...

3:08:08 hrs
Vue Painless Builds With Elixir

Laravel Elixir takes the yawn out of writing your Gulpfiles. Why spends hundreds of lines writing what can be accomplished with just a few?

1:37:02 hrs
Vue Learn Flexbox Through Examples

Flexbox is easily one of the most important additions to CSS in the last decade. The only problem is that there's a bit of a learning curve. Trust me,...

1:12:25 hrs