CSS Frameworks 🏗

iteration

Content provided by iteration podcast, John Jacob, and JP Sio - Web Developers. All podcast content including episodes, graphics, and podcast descriptions are uploaded and provided directly by iteration podcast, John Jacob, and JP Sio - Web Developers or their podcast platform partner. If you believe someone is using your copyrighted work without your permission, you can follow the process outlined here https://podcastplayer.com/legal.

5y ago 1:07:28

MP3•Episode home

Welcome to Iteration, a weekly podcast about programming, development, and design.

First, some fun questions:

👍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?
- 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/

78 episodes

#Business #Design #Ruby On Rails #Ruby #Code #JP Sio - Web Developers #John Jacob #Web Development #Tech #Software Development #Iteration #Programming #JavaScript

CSS Frameworks 🏗

iteration

113 subscribers

published 5y ago

MP3•Episode home

Welcome to Iteration, a weekly podcast about programming, development, and design.

First, some fun questions:

👍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?
- 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/

78 episodes

#Business #Design #Ruby On Rails #Ruby #Code #JP Sio - Web Developers #John Jacob #Web Development #Tech #Software Development #Iteration #Programming #JavaScript

All episodes

Welcome to Player FM!

Player FM is scanning the web for high-quality podcasts for you to enjoy right now. It's the best podcast app and works on Android, iPhone, and the web. Signup to sync subscriptions across devices.

Listen to 500+ topics

Similar to iteration

Podcasts Worth a Listen

iteration « » CSS Frameworks 🏗

First, some fun questions:

Frameworks

Pros / Cons

Frameworks - Pros and Cons of Each

Implementation

Picks

CSS Frameworks 🏗

First, some fun questions:

Frameworks

Pros / Cons

Frameworks - Pros and Cons of Each

Implementation

Picks

Podcasts Worth a Listen

Welcome to Player FM!

Similar to iteration

iteration « »
CSS Frameworks 🏗