12. HTML and CSS-based design templates for
● typography
● forms
● buttons
● navigation
● other interface components
● optional JavaScript extensions
Responsive framework
13. ● This is frontend intermediate session!
● Not an endorsement
● I think both Frameworks are great
● Goal: no coding and inspiration!
Disclaimer
14. ● Company behind: Twitter
● No.1 of Github
● Current Version 3:
○ 3.0: 19-Aug-2013
○ 3.1: 30-Jan-2014
In the red corner: Bootstrap
15. ● License: MIT License
○ Apache License 2.0 prior to 3.0.1
● Community!
● Website: http://getbootstrap.com
● Bootstrap Expo
● Components
In the red corner: Bootstrap
47. ● Responsive lightboxes
● https://drupal.
org/project/zurb_clearing
● http://foundation.zurb.
com/docs/components/clearing.html
● Depends on media 2.x-dev &
File Entity
● Foundation 4
Foundation: ZURB Clearing
48. ● Need to highlight the differences
between two images?
● https://drupal.
org/project/zurb_twentytwenty
● http://zurb.
com/playground/twentytwenty
● Foundation 4
Download pligin to
sites/all/libraries/twentytwenty
Foundation: Twenty-Twenty
49. ● Loads only one image for
resolution
● https://drupal.
org/project/zurb_interchange
● http://foundation.zurb.
com/docs/components/interchange.
html
● Uses media queries
● Foundation 4
● Requires
field_formatter_setting
Foundation: ZURB Interchange
64. ● LESS is based on JavaScript
● You must use either a local LESS preprocessor or install
and enable the LESS module - 7.x-3.0-rc1 or higher
● https://drupal.org/project/less
Bootstrap: LESS
65. ● Requires Ruby
● Can use https://drupal.org/project/sass
Foundation: SASS
68. ● Bootstrap looks solid
○ updated regularly
○ extra modules more stable
○ more examples than Foundation
● Foundation 5 was just released
○ 5 days ago
○ requires jQuery 1.10 (jQuery_update)
Right now in Drupal...
72. ● Bootstrap has way more elements
than Foundation
● Bootstrap UI elements looks cooler
UI elements
73. ● Bootstrap doesn’t have semicolons in JavaScript
● Coding standards
Coding style
74. ● Bootstrap uses pixels, Foundation: em (4), rem (5)
● REM affects whole component, no cascading issues
● Use SASS mixin for conversion
.element {
width: rem-calc(10px); // will be converted to
REMs
}
Measuring: px VS em
75. ● Bootstrap was designed mobile first for 4
platforms: mobile, tablet, desktop &
large desktop
● Foundation was designed for any 4
screens
Mobile first VS mobile also
76. ● Foundation: grid size depends on browser
width
○ Adapts flexibly
● Bootstrap grids are predefined for main
devices and sizes
○ Changes it's grid on breakpoint
Grids
77. ● Bootstrap can be used without JS
● Fondation needs JS to start
Start me up!