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