iteration

CSS Frameworks 🏗

Episode Summary

Deep dive into some of the popular CSS frameworks. Bootstrap, tachyons tailwind and more. Tips, tricks, pros cons lessons and frustrations. It's all here.

Episode Notes

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:

• "Copy css" from sketch

• Css in Figma

• Re-pick: https://refactoringui.com/ (Same guy behind Tailwind)

• Referenced: https://a.singlediv.com/