fun with css frameworks
Post on 11-Apr-2017
402 Views
Preview:
TRANSCRIPT
Fun with CSS FrameworksOr, 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 NobleWeb DesignerFront end developerUX DesignerLos 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 kitGet 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?
ProsBetter team member on boarding
Documentation written (so you don’t have to)
Increased capabilities
Consistent naming and conventions
Community bugfixes
ConsCan 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 StepsDownload 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 overWhat 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
top related