DEV Community

Iteration Podcast

CSS Frameworks 🏗

Welcome to Iteration, a weekly podcast about programming, development, and design.

First, some fun questions:

  1. 👍or 👎 on writing CSS?

  2. What do you love about CSS, what do you hate?

  3. To this day, what are some of the things you don't understand?

    • JP: CSS Grid, Floats (kind of. I always forget what the clearfix thing is for)

Frameworks

WTF ?— Here is a set of components you can build, pre-defined styles, gives you a starting point. Pre-buit UI.

Popular Ones

  • Boostrap — Pre-defined class "Components" card shadow

  • Tailwinds — Much more like Tachyons md:flex g-white rounded-lg p-6

  • Material UI

  • Foundation

  • Atomic CSS / Tachyons

  • Skeleton

Pros / Cons

  • Tailwind

    • Pro: Using tailwind for side project. Wrote 0 css

      • Tailwind components (Basically a better looking bootstrap)

    • Con: Output is derivative

      • JP's argument — you could design anything you wanted

      • It's more of a function of what the docs provide.

    • Pro for Tailwind — Tailwind doesn't come with baked in components

  • How do we overcome derivative sites?

    • Could be tools

    • But I think it's more about pushing the design side more

    • Thinking in terms of "Bootstrap Components"

    • Think more first principle

    • Strong designer to push you too break the bounds of these frameworks

Frameworks - Pros and Cons of Each

  • Boostrap

    • John: My top choice. I know it better than any other framework. I don't think it's "The best"

  • Tailwinds

  • Tachyons

    • John: Worked with it a lot, had some client projects use their own fork. Really powerful but it starts just feeling like "inline styles" SO MANY Classes

      • bg-dark-green ba bw5 dshadow2 br2 pb3

      • It's like ok ok calm down.

  • Material UI

  • Skeleton

    • Nice for quick projects. Super lightweight. Our agency site was built in Skeleton

Implementation

  • Customizing it

    • Tailwind

      • Example: H1's — identifying patterns

      • Take a set of classes and use the "apply" function

      • Single set to define your custom classes.

      • You throw those into a single class called "Heading"

    • Bootstrap

      • Starts with customizing variables

      • These variabels are used in the

Picks

JP: https://thoughtbot.com/blog/running-specs-from-vim

John:

Episode source