iteration cover image

iteration

CSS Frameworks 🏗

Apr 20, 2020
01:07:28

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:

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode