Fun with css frameworks
1 like641 views
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.
![[WEB UI BASIC] CSS_1](https://cdn.slidesharecdn.com/ss_thumbnails/webuibasicweek2css-150419055801-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (17)
Similar to Fun with css frameworks (20)
More from Mario Noble (9)
Recently uploaded (20)
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? Im Mario Noble Web Designer Front end developer UX Designer Los Angeles cliche
- 3. What well be covering What is a CSS Framework? Why use one? Pros and Cons of using frameworks. Whats usually in a framework Lets 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 - Its a starting CSS (Cascading Style Sheet) structure thats meant to be extended by someone else. JS - It may also have additional components, graphics and browser compatibility ?xes. Docs - It has documentation that others can refer to when working with it. Image Source Https://www.youtube.com/watch?v=8h4Hr1e2IP4
- 5. Basically, its 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 ?exibility 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 dont have to) Increased capabilities Consistent naming and conventions Community bug?xes
- 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 didnt do it!
- 11. Whats in a typical CSS Framework? Lets pop the hood
- 12. CSS (of course) Basic CSS ?les May include browser ?xes like normalize.css, reset.css, etc. SASS/SCSS or LESS authoring ?les Mini?ed 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 ?les 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 dont 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. Lets get a little hands on! Its demo time. Time to get down and dirty. Image Source Http://www.un?nishedman.com/what-women-really-think-men-bene?ts-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, thats just, like, your opinion, man. The Dude