Pro Yearly is on sale from $80 to $50! »

Frameworks workshop

346a18ecad3be442898fc28c02230c93?s=47 Ian Clarke
September 25, 2014

Frameworks workshop

A workshop that was for fellow students in the Bachelor of Information Technology program at Carleton University. It covers CSS frameworks such as Foundation, Bootstrap and Neat!


Ian Clarke

September 25, 2014


  1. FRAMEWORKS The power of Bootstrap and Foundation Ian Ryan Clarke

  2. WHAT ARE FRAMEWORKS? A standardized set of concepts, criteria and

    practices A web framework is a package of HTML, CSS and JavaScript that are standardized Used as the building blocks when developing a new webpage
  3. WHY USE FRAMEWORKS? Rapid development of websites from scratch Pre-packaged

    standardizations Scalable design for all devices Cross-browser compatibility ‘Normalize.css’
  4. WHAT IS A GRID SYSTEM? Most, if not all, web

    frameworks are build on a 12 grid system Each line or area is split into 12 ‘blocks’ and this is how content is organized
  5. GRID SIZES Rule of thumb

  6. OFFSET Various ways to offset elements

  7. NESTING Nesting elements

  8. FORMATTING Examples of a grid system declared through HTML classes

    Bootstrap Foundation
  9. WHAT FRAMEWORK TO CHOOSE? There are 2 primary frameworks: Bootstrap

    and Foundation Each one handles development differently Each one has different pro’s and con’s
  10. Foundation 5 (vs) Bootstrap 3

  11. LETS BREAK IT DOWN We’ll be investigating these points to

    compare the two: UI Elements Units (Pixels, EM, REM) Pre-processors Community Philosophy
  12. UI ELEMENTS BOOTSTRAP FOUNDATION Extensive Yes No Elements Nearly everything

    Basic buttons, forms Customizable Yes Yes Size Very large Lightweight
  13. UNITS BOOTSTRAP FOUNDATION Units used Pixels (px) Root EM (rem)

    Scalable No Yes Compatibility All browsers (yes, even netscape, jk) IE 8 and above

    Complex Loops / Inheritance (OOP) No Yes
  15. COMMUNITY BOOTSTRAP FOUNDATION Size Very large Medium to smaller size

    Templates Huge selection Few Documentation Extensive Extremely extensive Outlook Use pre-packaged styles Make your own styles and feel
  16. PHILOSOPHY BOOTSTRAP FOUNDATION Mobile also Mobile First Rapid development prototypes

    Build it yourself Use everything prepacked (even themes) Customize and tailor to your needs

  18. IT ALL DEPENDS If you want something super easy to

    develop without having to worry about forms, buttons etc: Bootstrap If you want something super lightweight and your own look: Foundation Each has their positives and negatives
  19. HOWEVER, If you want something different from Bootstrap/Foundation style……

  20. A SEMANTIC GRID FRAMEWORK Semantic Framework: clean and concise Neat

    is build off of Thoughtbot’s Bourbon (mixins) and Bitters (scaffolding) Focuses on shifting the markup into SASS files Cleans up HTML
  21. RESULT Clean, concise HTML, with grids defined in SASS files

  22. REFILLS! Another available feature with neat is: It’s prepackaged styles

  23. Thanks! Thats it! Any questions?