FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!

FIN

In summary

questions…

Pick and choose

photo credit - iirraa - Flickr - CC

Lock in for the ride…

photo credit - OctopusHat - Flickr - CC

MaintainabilityMore difficult to compile and setup

I suspect more time spent cross browser testing (unproven)

Smaller user community

Less Stack Overflow

Bourbon Neat grid

Customisable by default

Modular - pick and choose

Invisible so looks professional

Tiny

Great range of JS componants

Semantic - have it your way

Compass philosophy so great for Rails folks

Extensive - Bitters has parallax, ribbon, textures etc.

Angular JS UI (Foundation for apps)

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach

Saves time debugging and cross browser testing

Native validation styles for forms

LESS and SASS

Gives structure and consistancy for large dev groups

Vanilla look and feel

Comprehensive JS library

Use ems for typography

Largish overhead at 130kb especially for mobile users

Opinionated framework

Zurb FoundationTwitter Boostrap

Rapid front end development

Trusty grid structure

Works in all modern browsers

"Mobile first" approach as of v3

Saves time debugging and cross browser testing

Big user community

LESS

Gives structure and consistancy for large dev groups

Helps developers - eg. geonet.org.nz and bidbud.co.nz

Lots of starter themes available

Has a range of Jquery plugins

Large overhead at 161kb especially for mobile users

jQuery plugins are limited

They changed their classes and grid structure

No colons in Javascript

Opinionated framework

Customisable but a lot of sites end up looking the same

Late to the SASS party

Jasny bootstrap - default huge and still missing some key

features

Pros and consRandom things!

Now you can tell how big this presentation is

Here is a banana

Bourbon Neat grid

Media queries

Zurb FoundationTwitter BoostrapGrid structure161kb

34kb

130kb 30kb

47kb

Worth mentioning…

css + js .min css + js .min

https://cdnjs.com/

Size is keyMIXINS

direction-context

display-context

fill-parent

media

omega

outer-container

pad

row

shift

shift-in-context

span-columns

reset-display

reset-layout-direction

reset-all

VARIABLES

disable-warnings

column

gutter

grid-columns

max-width

border-box-sizing

default-feature

default-layout-direction

visual-grid

visual-grid-color

visual-grid-index

visual-grid-opacity

FUNCTIONS

new-breakpoint

Sass Structure

Variables

Grid Settings

Typography

Lists

Forms

PATTERNS

Accordion / Tabs

Cards

Centered Navigation

Comments

etc.

COMPONANATS

Modal

Pagination

Parallax

Progress Bars

Ribbon

Responsive Video Embed

etc.

TYPE SYSTEMS

Neat / Bitters / Refills

Animation

Animation Delay

Animation Direction

Animation Duration

Animation Fill Mode

Animation Iteration Count

Animation Name

Animation Play State

Animation Timing Function

Appearance

Backface Visibility

Background

Background Image

Border Image

Box Sizing

Calc

Columns

Filter

Flexbox

Font Face

Font Feature Settings

HiDPI Media Query

Hyphens

Image Rendering

Keyframes

Linear Gradient

Perspective

Placeholder

Radial Gradient

Selection

Text Decoration

Transform

Transitions

User Select

Bourbon.ioFUNCTIONS

Flex Grid

Golden Ratio

Grid Width

Linear Gradient

Modular Scale

Pixel to Ems

Pixel to Rems

Radial Gradient

Strip Units

Tint & Shade

Unpack

ADD-ONS

Border Color

Border Radius

Border Style

Border Width

Buttons

Clearfix

Directional Property

Ellipsis

Font Stacks

Hide Text

HTML5 Input Types

Inline Block

Margin

Padding

Position

Prefixer

Retina Image

Size

Timing Functions

Triangle

Word Wrap

Zurb FoundationSass

JavaScript

Kitchen Sink

Media Queries

Grid

Block Grid

Interchange

Utility Classes

Right-to-Left Support

Off-canvas JS

Top Bar JS

Icon Bar

Side Nav

Sub Nav

Breadcrumbs

Pagination

Orbit Slider JS

Thumbnails

Clearing Lightbox JS

Flex Video

Forms

Switches

Range Sliders JS

Abide Validation JS

Buttons

Button Groups

Split Buttons JS

Typography

Inline Lists

Labels

Keystrokes

Reveal Modal JS

Alerts JS

Panels

Tooltips JS

Joyride JS

Dropdowns JS

Pricing Tables

Progress Bars

Tables

Accordion JS

Tabs JS

Random things!

Your skin is full of salts, loose cells, moisture and other delicious

things flies like to eat, even more so during warm weather.

Look closely and you'll see the fly walking around on your skin with

it's mouth-tube (forgot the name) prodding around on you. That's

the fly eating off you.

Why do flies like landing on our skin?

from Reddit - Xerologic 1845 points 6 months ago

Twitter Boostrap

Glyphicons

Dropdowns

Button groups

Button dropdowns

Input groups

Navs

Navbar

Breadcrumbs

Responsive embed

Wells

Panels

Pagination

Labels

Badges

Jumbotron

Page header

Thumbnails

Alerts

Progress bars

Media object

List group

Javascript

Grid system

Typography

Tables

Forms

Buttons

Images

Helper classes

Responsive utilities

Less

Sass

Mixins

Waht’s in the box?

...because fast is awesome

...because grids and mobile are awesome

...because Bourbon is awesome*

*disclaimer

Why?

Bourbon.io“A simple and lightweight mixin library for Sass.”

5,281

Like Compass

Created by thoughtbot.com

Released under MIT License In 2011

Full framework split into Neat, Bitters and Refills

Zurb Foundation“The most advanced responsive front-end framework in

the world.”

19,245

Opinionated framework

ZURB is a privately held interaction US design company

V 2.0 first released under MIT License In October 2011

https://en.wikipedia.org/wiki/Foundation_(framework)

Twitter Boostrap“Bootstrap is the most popular HTML, CSS, and JS

framework for developing responsive, mobile first projects

on the web.”

77,194Opinionated framework

June 2014 it was the No.1 project on GitHub

Developed by Mark Otto and Jacob Thornton at Twitter

Released to Open Source in August 2011

https://en.wikipedia.org/wiki/Bootstrap_%28front-end_framework%29

What?ezrakeddell

Husband / Dad

1337 H4X0R

Digital media designer

Front end developer

ROR advocate

Sportsball lover

ezy

ezy_

Who?

Vs.with Random Things!