Post on 08-Aug-2015
www.vardot.com
Mohammed J. Razem
CEO & Founder of Vardotm.razem@vardot.com@moerazemd.o/user/255384
You already: *• Know what HTML is• Know what CSS is• Can tell the difference between JavaScript
and jQuery• Can tell the difference between what runs in
a browser (aka, client-side), and what runs on a server (aka, server-side)
* You know these, right?
Repetition• Font-size and family across headers and
copy• Bullet styles• Color• Border thickness / style• Margins / padding• Components• Buttons• Forms
Proximity• The way elements are grouped together
creates a sense unity. Closeness implies a relationship.
ColorColor can be very emotional (as in
psychology) or scientific (theories and schemes)
• Color Association - How colors make us feel• Color Temperatures – Warm and Cool• Color Models – Additive and Subtractive • Color Wheels and Schemes
Color•Red
•Orange•Yellow
•Green
•Blue
•Purple•White•Black
Adrenaline, blood pressure, anger, love. Darker = indulgence, Browner = Fall / HarvestActive, energetic, more informal, appetiteHighly Active, visible (hello Taxi’s!), overpoweringNature, soothing, growth, freshness, hope, less activeOpenness, intelligence, faith, calming, reduce appetite,Royalty, power, innovation, wealthClean, perfection, light, purityDeath, evil, power, elegance
www.practicaltypography.com
• BODY TEXT: More text than anything else. Focus on that first. (80 / 20 rule)
• POINT SIZE: (CSS: font-size) 10 to 12 for Print 15 to 25 for Web
• LINE SPACING: (CSS: line-height) 120-145% of the point size
• FONT (CSS: font-family) Don’t use System Fonts, you’re better than that
Typography
• Google Fonts (FREE!)http://www.google.com/fonts
• Adobe Edge Web Fonts (FREE!)http://html.adobe.com/edge/webfonts
• Fonts.com ($10/month)http://www.fonts.com
• TypeKit.com ($25/Year)http://typekit.com
• Font Squirrel (FREE!)http://www.fontsquirrel.com
Typography
Bootstrap• Front-End Framework
• Simple Terms: A CSS and JS File (optional)
• Common Web Design and Layout Patterns (CSS)
• Common Widgets and Functionality (JS)
• Built using LESS & SASS
• Created by Mark Otto and Jacob Thornton when working @Twitter
Why use it? Popular!It is one the most popular projects on GitHub
• 4,800+ watchers
• 31,500+ forks
• 11,000+ issues closed
What we will see together1. Mobile-first grid
2. Base CSS for common UI elements
3. Components
4. JavaScript
5. Customize
Cheatsheet
www.cheatography.com/masonjo/cheat-sheets/
bootstrap/