Rails camp '15 presentation - Bootstrap v. Foundation v. Bourbon
- 2. Who?
- 3. ezrakeddell Husband / Dad 1337 H4X0R Digital media designer Front end developer ROR advocate Sportsball lover ezy ezy_
- 4. What?
- 5. Twitter Boostrap “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.” 77,194 Opinionated 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
- 6. 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)
- 7. 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
- 8. Why?
- 9. ...because fast is awesome ...because grids and mobile are awesome ...because Bourbon is awesome* *disclaimer
- 10. Waht’s in the box?
- 11. 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
- 12. 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
- 13. Zurb Foundation Sass 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
- 14. 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.io FUNCTIONS 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
- 15. MIXINS 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
- 16. Size is key
- 17. 161kb 34kb 130kb 30kb 47kb Worth mentioning… css + js .min css + js .min https://cdnjs.com/
- 18. Grid structure
- 19. Twitter Boostrap
- 20. Zurb Foundation
- 21. Bourbon Neat grid Media queries
- 22. Random things! Now you can tell how big this presentation is Here is a banana
- 23. Pros and cons
- 24. Twitter 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
- 25. 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 Foundation
- 26. More 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.
- 27. Maintainability
- 28. Lock in for the ride… photo credit - OctopusHat - Flickr - CC
- 29. Pick and choose photo credit - iirraa - Flickr - CC
- 31. FIN