CSS Frameworks 🏗

iteration

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/