Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - CSS Frameworks

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>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.</p> <h2><a id="Stackbit__Sponsor_9" name= "Stackbit__Sponsor_9"></a>Stackbit - Sponsor</h2> <p>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 <a href= "https://www.stackbit.com/syntaxfm/">stackbit.com/syntaxfm</a>.</p> <h2><a id="Show_Notes_13" name="Show_Notes_13"></a>Show Notes</h2> <p>2:52 - What is a CSS framework?</p> <ul> <li>Pre-written CSS that takes over the basic styling of your app</li> <li>Can include just utilities or lots of styles (minimal to overboard)</li> <li>Twitter Bootstrap and Zurb Foundation were the pioneers</li> <li>Follow different CSS styles from “functional CSS” to utility-first to BEM</li> </ul> <p>7:33 - Functional (aka Utility) based</p> <ul> <li>Tachyons</li> <li>Tailwind</li> </ul> <p>9:59 - Preprocessor based</p> <ul> <li>Bootstrap</li> </ul> <p>11:33 - Styled Components based</p> <ul> <li>Rebass</li> <li>Styled Systems</li> <li>Facepaint</li> </ul> <p>15:50 - Why use one?</p> <ul> <li>Makes styling FAST</li> <li>Makes hard things easy</li> <li>Some, like Bootstrap, have themes</li> <li>Keeps your own CSS minimal and organized</li> <li>Built on an established system</li> <li>Lots of people use the same CSS</li> </ul> <p>19:22 - Why not use one?</p> <ul> <li>CSS class hell</li> <li>Stops you from learning how CSS works</li> <li>Size (not all have this problem)</li> <li>Brotli, Purify CSS</li> <li>You will be overriding a ton of it</li> <li>You like exclusively writing the code you need and nothing else</li> </ul> <h2><a id="Links_56" name="Links_56"></a>Links</h2> <ul> <li><a href="https://jamstack.org/">Jamstack</a></li> <li><a href="https://www.gatsbyjs.org/">Gatsby</a></li> <li><a href="https://gohugo.io/">Hugo</a></li> <li><a href="https://jekyllrb.com/">Jekyll</a></li> <li><a href="https://getbootstrap.com/">Bootstrap</a></li> <li><a href="https://foundation.zurb.com/">Foundation</a></li> <li><a href="https://tailwindcss.com/">Tailwind CSS</a></li> <li><a href="https://tachyons.io/">Tachyons</a></li> <li><a href="https://github.com/styled-system/styled-system">Styled System</a></li> <li><a href="https://rebassjs.org/">REBASS</a></li> <li><a href= "https://github.com/emotion-js/facepaint">Facepaint</a></li> <li><a href="https://github.com/google/brotli">Brotli</a></li> <li><a href="https://github.com/purifycss/purifycss">Purify CSS</a></li> <li><a href="https://www.cloudflare.com/">Cloudflare</a></li> </ul> <h2><a id="Tweet_us_your_tasty_treats_72" name= "Tweet_us_your_tasty_treats_72"></a>Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li><a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li><a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li><a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li><a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

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

Aplikace Youradio Talk

Hasty Treat - CSS Frameworks

Poslechněte si podcast