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!

Transcript

1. FRAMEWORKS The power of Bootstrap and Foundation Ian Ryan Clarke @tridotdesigns
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
14. CSS PRE-PROCESSORS BOOTSTRAP FOUNDATION Pre-Processor LESS SASS Compiler Node Ruby 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
17. SO, WHICH ONE IS BETTER?
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?