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