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.
Welcome to Iteration, a weekly podcast about programming, development, and design.
πor π on writing CSS?
What do you love about CSS, what do you hate?
To this day, what are some of the things you don't understand?
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
Tailwind
Pro: Using tailwind for side project. Wrote 0 css
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
Boostrap
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
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
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/