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

getbootstrap.com/


Inuit CSS (by Harry Roberts) - Apache licence

inuitcss.com/

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:






it's like magic




Questions?




Thank you!

Front-end Frameworks

By Ben

Made with Slides.com

Front-end Frameworks

This is a small and simple presentation of front-end frameworks in general. We see general concepts, and how to use them in different ways.

  • 2,182