FOUNDATION VS BOOTSTRAPJan De Wilde — Sam Vloeberghs
— @MrJean @samvloeberghs
CC Front-end & UX
FOUNDATION VS BOOTSTRAP
a. What's in a name
b. Introducing Foundation
c. Introducing Bootstrap
d. Hands-on & comparisson
WHAT'S IN A NAME
a. Totally not basic
b. Many predefined styles
c. Common JS components
d. Extensive possibilities to extend
ZURB FOUNDATION
"Foundation is the most advancedresponsive front-end framework in the
world"
ZURB FOUNDATION
a. Created at Zurb
b. Opensource, but paid maintenance
c. 5th major release, 6th on its way
d. Offer certification & trainings
e. Frameworks for websites, applications & email templating
TWITTER BOOTSTRAP
"Bootstrap is the most popular HTML, CSS,and JS framework for developing
responsive, mobile first projects on theweb."
TWITTER BOOTSTRAP
a. Created at Twitter
b. Opensource, backed by community
c. 3th major release
HANDS-ON & COMPARISSON
a. Grid System
b. Responsive tables
c. Utilities
d. Customisation: Foundation Sass vs Bootstrap LESS
e. Components:
Orbid vs Carousel
Magellan vs Scrollspy
Joyride vs Popover
Responsive tables
GRID SYSTEM
Foundation Bootstrap
Responsive, fluid & mobile first
Scales to 12 columns
Predefined classes & mixins
Responsive, fluid & mobile first
Scales to 12 columns
Predefined classes & mixins
More More
GRID SYSTEM: ROW & COLUMN
Foundation Bootstrap
Predefined grid classes:
Columns must have a row directly asparent
Columns have a gutters based on thedefault fontsize(16px):rem-calc(30);
Always place columns in .rows whendeepnesting
Predefined grid classes:
Columns must have a row directlyas parent
Columns have a gutters of 30px(15px on each side)
Place rows in .container (fixed-width) or .container-fluid (full-width)
More More
.small-6 .columns .col-xs-4
GRID SYSTEM: MEDIA QUERIES & BREAKPOINTS (1)
Foundation Bootstrap
Default 4 breakpoints:
$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em,99999em);
Default 3 breakpoints:
768px
992px
1200px
More More
GRID SYSTEM: MEDIA QUERIES & BREAKPOINTS (2)
Foundation Bootstrap
4 breakpoints means, styling for 5levels:
< 640px
≥ 641px
≥ 1025px
≥ 1441px
≥ 1921px
3 breakpoints means, styling for 4levels:
< 768px
≥ 768px
≥ 992px
≥ 1200px
More More
GRID SYSTEM: GRID BEHAVIOUR
Foundation Bootstrap
Does not provide a certainbreakpoint for column collapsing
Define it yourself
< 768px: Collapsed at all times
≥ 768px: Collapsed to start,horizontal above breakpoints
More
GRID SYSTEM: CONTAINER WIDTH
Foundation Bootstrap
.row acts as a container
width is determined by a variable(default 1000px)
< 768px: none (auto)
≥ 768px: 750px
≥ 992px: 970px
≥ 1200px: 1170px
More More
@include grid-row(..)$row-width: rem-calc(1000);
.container
.container-fluid
GRID SYSTEM: CLASS PREFIXES
Foundation Bootstrap
breakpoints defined as defaultvariables
variables can be adapted, so namingstays, but values change
default generic naming:
< 768px:
≥ 768px:
≥ 992px:
≥ 1200px:
More More
.small-10
.medium-6
.large-4
.xlarge-2
.large-1
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
GRID SYSTEM: COLUMN WRAPPING
Foundation Bootstrap
When placing more than 12 columns ina row, they will wrap on a new line. eg.small-9 + small-4 = 13 columns > 12columns
When placing more than 12 columns ina row, they will wrap on a new line. eg.col-xs-9 + col-xs-4 = 13 columns > 12columns
More More
GRID SYSTEM: COLUMN RESETS
Foundation Bootstrap
based on the parent .row, ::afterpseudo element
clear manually , an extra HTMLelement
Bootstrap does column resets byadding an extra HTML element in yourgrid.
More More
GRID SYSTEM: OFFSET
Foundation Bootstrap
It is possible to give a column an offsetof * columns.
It is possible to give a column an offsetof * columns.
More More
.large-10 large-offset-1 column .col-md-offset-*
GRID SYSTEM: ORDERING
Foundation Bootstrap
Ordering can be done by using push orpull.
Easily change the order of our built-ingrid columns with some classes.
and
modifier classes.
Ordering can be done by using push orpull.
Easily change the order of our built-ingrid columns with
and
modifier classes.
More More
small-10 small-push-2 columns
small-2 small-pull-10 columns
.col-md-push-*
.col-md-pull-*
GRID SYSTEM: LESS MIXINS & VARIABLES
Foundation Bootstrap
A set of variables and mixins can becustomised and used withinFoundation.
Example:
A set of variables and mixins can becustomised and used within Bootstrap.
Example:
More More
$row-width: rem-calc(1000);$column-gutter: rem-calc(30);$total-columns: 12 ;
@grid-columns: 12;@grid-gutter-width: 30px;@grid-float-breakpoint: 768px;
UTILITIES
General visibility rules
Print styles
GENERAL VISIBILITY RULES
Foundation Bootstrap
Based on your viewport it's possible toshow/hide content. Compared toBootstrap this is extensive. Visibilityrules can rely on:
Type & orientation of the device
Width of the viewport
Examples:
Based on the width you are on it ispossible to show / hide content usingjust classes. These helper classes arefairly basic.
More More
.hide-for-large-up
.show-for-large-up
.show-for-landscape
.hide-for-touch
.visible-*-*
.hidden-*
PRINT STYLES
Foundation Bootstrap
Helper classes to show or hide contenton print are fairly basic but handy.
Helper classes to show or hide contenton print are fairly basic.
More More
.show-for-print
.print-only
.hide-for-print
.hide-on-print
.visible-print-block
.visible-print-inline
.visible-print-inline-block
.hidden-print
CUSTOMISATION
Foundation Bootstrap
a. build on Sass
b. entirely customizable
online basic customisation
customise every tiny detail
define your own semantic css
a. Built on Less, but official Sassvariant available
b. Colors
c. Scaffolding
d. Links
e. Typography
f. Icons
g. Components
h. Vendor Mixins
i. Utility Mixins
More More
COMPONENTS
Foundation Bootstrap
OrbidMagellanJoyrideResponsive tables
CarouselScrollspyPopoverResponsive tables
vs.
COMPONENTS
Orbit Carousel
JavaScript component
uses slick & its options
deprecated ( just use slick )
poor accessibility
JavaScript based
Extension on top of Bootstrap
Pay attention to accessibility
Animation not supported in IE 8 & 9
Customising: Some options,methods and events are available
More More
COMPONENTS
Magellan Scrollspy
JavaScript component
style-agnostic plugin
fixed position content navigation
JavaScript based
Extension on top of Bootstrap
Needs the Bootstrap navcomponent
Customising: Some options,methods and events are available
More More
COMPONENTS
Joyride Popover
JavaScript component
Guided tour
JavaScript based
Requires the tooltip plugin
Could be used to give a tour whenusing an application or website forthe first time
Customising: Some options,methods and events are available
More More
COMPONENTS
Responsive tables Responsive tables
JavaScript & CSS based
Does some DOM manipulation
Purely CSS based
Uses a wrapper with overflow-xdisabled and overflow-y set to auto
More More
DOCUMENTATION / LINKS ETC.
Foundation website
Bootstrap website
Sass website
LESS website
THAAAAAAANKS!
Jan De Wilde — Sam Vloeberghs — @MrJean @samvloeberghs
CC Front-end & UX
Top Related