SlideShare a Scribd company logo

Fun with css frameworks

•
•
Mario Noble
Mario Noble

An overview of the reasons why or why not you might want to use CSS frameworks like Bootstrap, Foundation, Semantic UI, Pure or Skeleton on your projects.

Related slideshows

Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015Front End Tooling and Performance - Codeaholics HK 2015
Front End Tooling and Performance - Codeaholics HK 2015
 
Front End Web Development Basics
Front End Web Development BasicsFront End Web Development Basics
Front End Web Development Basics
 
1 of 23
Download to read offline
Fun with CSS Frameworks Or, everything you wanted to know about CSS frameworks but were afraid to ask... Image Source Http://9circuits.com/blog/wp-content/uploads/hamstermachine.jpg
Who the heck are you? I’m Mario Noble Web Designer Front end developer UX Designer Los Angeles cliche
What we’ll be covering What is a CSS Framework? Why use one? Pros and Cons of using frameworks. What’s usually in a framework Let’s dive into a little hands on Choosing the right one for you and a bit of theory background Q&A Image Source Http://media-cdn.tripadvisor.com/media/photo-s/02/fa/13/9c/campo-rico-ziplining.jpg
What the heck is a CSS Framework? CSS - It’s a starting CSS (Cascading Style Sheet) structure that’s meant to be extended by someone else. JS - It may also have additional components, graphics and browser compatibility fixes. Docs - It has documentation that others can refer to when working with it. Image Source Https://www.youtube.com/watch?v=8h4Hr1e2IP4
Basically, it’s a DIY kit Get ready to unbox!
Why the heck should I use one? It gets you up and running quickly. Enhanced teamwork Scalability and flexibility Real world tested Feature goodies
Luke, feel the Force Do not turn to the inline css side.
What are the Pros and Cons? Help or hinder your process?
Pros Better team member on boarding Documentation written (so you don’t have to) Increased capabilities Consistent naming and conventions Community bugfixes
Cons Can be a “cookie cutter” look and feel. Sometimes a steep learning curve Bloated code offering more than you need. Might be wrong You didn’t do it!
What’s in a typical CSS Framework? Let’s pop the hood
CSS (of course) Basic CSS files May include “browser fixes” like normalize.css, reset.css, etc. SASS/SCSS or LESS authoring files Minified CSS A particular structure and aesthetic choices out-of-the-box Grid system, Responsive styling, Utility classes
Modules / Components / Patterns Pieces of CSS that are meant to work together to create a web component or interface like a nav bar, side bar, carousel, etc. JavaScript that enhances or enables many patterns Task runner files like Grunt/Gulp to auto compile or setup new projects JavaScript libraries like jQuery, Respond.js and Modernizr that enable behaviors or provide fallbacks for unsupported features across browsers Resources such as web icons and animations
Documentation and Community Extensive documentation Community forums “Wisdom of the crowds” Collaborative environment New team members Image Source Http://www.science20.com/alpha_meme/democracy_and_wisdom_crowds-83550
A few frameworks Twitter Bootstrap Zurb Foundation Skeleton Pure Ink Semantic UI
If you use pre-made themes, you may be using a framework... now. but just don’t know it.
You could also make your own... The Joy of Crafting your own stuff to share. Copyright Nick Offerman Aka “Ron Swanson”- Image Source - Https://wiggersfurniture.wordpress.com/
Let’s get a little hands on! It’s demo time. Time to get down and dirty. Image Source Http://www.unfinishedman.com/what-women-really-think-men-benefits-car-maintenance/
How do you choose a framework? How fast, cheap and good does your project need to be? How many people are on your team? What are your skill sets? How much time do you have to test? How custom/bespoke does your project need to be? How much does the project need to scale over time?
Who took the Cascading out of my CSS! A short digression... SMACSS BEM Docssa Web Components Angular.js, React.js and their kind...
Next Steps Download and try a simple CSS framework Play around with it on a basic no pressure project Learn some SASS/SCSS or LESS. Just the basics. Get a CSS complier like Scout App or Codekit Read some framework documentation a bit at a time Learn a tiny bit of jQuery Have fun!
What we went over What is a CSS Framework and why would you use one Some Pros and Cons Some nitty gritty pieces Got a little hands on Some guidance on choosing the right one for a project Some theory Q&A
Q&A “Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude

More Related Content

Fun with css frameworks

  • 1. Fun with CSS Frameworks Or, everything you wanted to know about CSS frameworks but were afraid to ask... Image Source Http://9circuits.com/blog/wp-content/uploads/hamstermachine.jpg
  • 2. Who the heck are you? I’m Mario Noble Web Designer Front end developer UX Designer Los Angeles cliche
  • 3. What we’ll be covering What is a CSS Framework? Why use one? Pros and Cons of using frameworks. What’s usually in a framework Let’s dive into a little hands on Choosing the right one for you and a bit of theory background Q&A Image Source Http://media-cdn.tripadvisor.com/media/photo-s/02/fa/13/9c/campo-rico-ziplining.jpg
  • 4. What the heck is a CSS Framework? CSS - It’s a starting CSS (Cascading Style Sheet) structure that’s meant to be extended by someone else. JS - It may also have additional components, graphics and browser compatibility fixes. Docs - It has documentation that others can refer to when working with it. Image Source Https://www.youtube.com/watch?v=8h4Hr1e2IP4
  • 5. Basically, it’s a DIY kit Get ready to unbox!
  • 6. Why the heck should I use one? It gets you up and running quickly. Enhanced teamwork Scalability and flexibility Real world tested Feature goodies
  • 7. Luke, feel the Force Do not turn to the inline css side.
  • 8. What are the Pros and Cons? Help or hinder your process?
  • 9. Pros Better team member on boarding Documentation written (so you don’t have to) Increased capabilities Consistent naming and conventions Community bugfixes
  • 10. Cons Can be a “cookie cutter” look and feel. Sometimes a steep learning curve Bloated code offering more than you need. Might be wrong You didn’t do it!
  • 11. What’s in a typical CSS Framework? Let’s pop the hood
  • 12. CSS (of course) Basic CSS files May include “browser fixes” like normalize.css, reset.css, etc. SASS/SCSS or LESS authoring files Minified CSS A particular structure and aesthetic choices out-of-the-box Grid system, Responsive styling, Utility classes
  • 13. Modules / Components / Patterns Pieces of CSS that are meant to work together to create a web component or interface like a nav bar, side bar, carousel, etc. JavaScript that enhances or enables many patterns Task runner files like Grunt/Gulp to auto compile or setup new projects JavaScript libraries like jQuery, Respond.js and Modernizr that enable behaviors or provide fallbacks for unsupported features across browsers Resources such as web icons and animations
  • 14. Documentation and Community Extensive documentation Community forums “Wisdom of the crowds” Collaborative environment New team members Image Source Http://www.science20.com/alpha_meme/democracy_and_wisdom_crowds-83550
  • 15. A few frameworks Twitter Bootstrap Zurb Foundation Skeleton Pure Ink Semantic UI
  • 16. If you use pre-made themes, you may be using a framework... now. but just don’t know it.
  • 17. You could also make your own... The Joy of Crafting your own stuff to share. Copyright Nick Offerman Aka “Ron Swanson”- Image Source - Https://wiggersfurniture.wordpress.com/
  • 18. Let’s get a little hands on! It’s demo time. Time to get down and dirty. Image Source Http://www.unfinishedman.com/what-women-really-think-men-benefits-car-maintenance/
  • 19. How do you choose a framework? How fast, cheap and good does your project need to be? How many people are on your team? What are your skill sets? How much time do you have to test? How custom/bespoke does your project need to be? How much does the project need to scale over time?
  • 20. Who took the Cascading out of my CSS! A short digression... SMACSS BEM Docssa Web Components Angular.js, React.js and their kind...
  • 21. Next Steps Download and try a simple CSS framework Play around with it on a basic no pressure project Learn some SASS/SCSS or LESS. Just the basics. Get a CSS complier like Scout App or Codekit Read some framework documentation a bit at a time Learn a tiny bit of jQuery Have fun!
  • 22. What we went over What is a CSS Framework and why would you use one Some Pros and Cons Some nitty gritty pieces Got a little hands on Some guidance on choosing the right one for a project Some theory Q&A
  • 23. Q&A “Yeah, well, you know, that’s just, like, your opinion, man.” — The Dude