Front-end Frameworks
Front-end Development
-
HTML
-
JS
-
CSS
What purpose?
Create design elements, small pieces to build an awesome global design.
Make the website more user friendly.
Front-end development
On each project you have (more or less):
- navigation
- breadcrumbs
- pagination
- accordions
- buttons
- forms
- blabla blablaw ...
More: You use a grid yhea!?
Front-end Development
Don't rebuild the wheel each time!
DRY must be your guide line
Adopt useful and tested code, VALID code.
A style guide is also a prerogative.
Front-end framework
- Grids
- Framworks
- UI elements
- Libraries
- Bootstrap
Many names, always the same idea...
MAKING FRONT-END DEVELOPMENT
EASIER AND FASTER
So...
What is a front-end framework?
Small pieces of reusable design elements, tested and improved.
Made of HTML, CSS and JavaScripts.
Some frameworks are also a guide to help you to design your code with OOCSS, SMACSS and other modular concepts.
What is a front-end framework?
-
reset.css / normalise.css
-
common UI elements
-
basic form styling
- basic JavaScripts feature plugins
- design of code approach
There are some frameworks who provides a complete bunch of UI elements, you can literally make an entire project with that.
WHY do we need superpowers?
Common UX patterns and style guide
Cross-browser compatibility
Mobile first approach
Rapid prototyping
Tested code
You don't start from nothing.
Save time, save money!
Who're in charges?
Foundation (by Zurb) - MIT licence
Boostrap (by twitter) - Apache licence
Inuit CSS (by Harry Roberts) - Apache licence
Same basic elements,
but different styles
Grid systems
Forms, buttons, tables
Modal windows, sliders
Navigation: tabs, nav bars, breadcrumbs
Alert boxes, labels, tooltips
Typography, icons, lists
Customizable using SASS/LESS
Foundation
Mobile first approach
Semantic code and markup
Fast and stable JavaScripts plugins
(jQuery & Zepto)
Flexible grids (medium support)
No bloated code, use just what you need
Developed in SASS
Twitter Bootstrap
Now mobile first approach
Developed in LESS CSS
A lot of components available
Many JavaScripts feature plugins
Flexible grids system
Inuit CSS
SASS based
Object Oriented Framework
Full objects and abstractions
Use BEM-style naming convention
No JavaScripts component just SCSS files
Style guide and code design base.
How does it work?
(the easy way)
Just copy and paste...
How does it work?
This:
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Gives this:
How does it work?
(the right way)
Using SASS mixins
HOW DOES IT WORK?
(THE RIGHT WAY)
This:
/* @imports ... *//* Using the default styles */ .your-class-name { @include button; }
Gives this:
