Hasty Treat - CSS Frameworks

In this Hasty Treat, Scott and Wes talk about CSS frameworks - what they are, why they’re important, and when (and when not) to use them.

Stackbit - Sponsor

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

Show Notes

2:52 - What is a CSS framework?

• Pre-written CSS that takes over the basic styling of your app
• Can include just utilities or lots of styles (minimal to overboard)
• Twitter Bootstrap and Zurb Foundation were the pioneers
• Follow different CSS styles from “functional CSS” to utility-first to BEM

7:33 - Functional (aka Utility) based

• Tachyons
• Tailwind

9:59 - Preprocessor based

• Bootstrap

11:33 - Styled Components based

• Rebass
• Styled Systems
• Facepaint

15:50 - Why use one?

• Makes styling FAST
• Makes hard things easy
• Some, like Bootstrap, have themes
• Keeps your own CSS minimal and organized
• Built on an established system
• Lots of people use the same CSS

19:22 - Why not use one?

• CSS class hell
• Stops you from learning how CSS works
• Size (not all have this problem)
• Brotli, Purify CSS
• You will be overriding a ton of it
• You like exclusively writing the code you need and nothing else

Links

• Jamstack
• Gatsby
• Hugo
• Jekyll
• Bootstrap
• Foundation
• Tailwind CSS
• Tachyons
• Styled System
• REBASS
• Facepaint
• Brotli
• Purify CSS
• Cloudflare

Tweet us your tasty treats!

• Scott’s Instagram
• LevelUpTutorials Instagram
• Wes’ Instagram
• Wes’ Twitter
• Wes’ Facebook
• Scott’s Twitter
• Make sure to include @SyntaxFM in your tweets