This document provides an overview of Bootstrap, a popular front-end framework for building responsive, mobile-first websites. It discusses what Bootstrap is, why it's commonly used, how to get started with it, and some helpful tools for working with Bootstrap. Specifically, it notes that Bootstrap provides common web design patterns through CSS and widgets/functionality through optional JavaScript. It also highlights some of Bootstrap's key features like its mobile-first grid system, base CSS, components, and customization options.

1. BOOTSTRAP
UI LIBRARY
A beautiful website in hours, or less

2. About

3. www.vardot.com
Mohammed J. Razem
CEO & Founder of Vardot
m.razem@vardot.com
@moerazem
d.o/user/255384

4. What do I know about
Bootstrap?

5. WE BUILD WEBSITES
ON BOOTSTRAP

13. Before we discuss
what is Bootstrap

14. ASSUMPTIONS!

15. 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?

16. PRINCIPLES OF
DESIGN
Part 1

17. Contrast
1

18. Repetition
2

19. Alignment
3

20. Proximity
4

21. Color
5

22. Typography
6

23. Contrast
1

24. Contrast
• When two items are different, it creates
contrast

25. Contrast
• Use color analyzer tool
• Check WCAG 2.0, Level AA
• WCAG 2.0 is a law in Europe

26. Repetition
2

27. Repetition
• Repeat elements, styles and design
consistently.

28. Repetition
• Font-size and family across headers and
copy
• Bullet styles
• Color
• Border thickness / style
• Margins / padding
• Components
• Buttons
• Forms

29. Alignment
3

30. Alignment

31. Alignment

32. Proximity
4

33. Proximity
• The way elements are grouped together
creates a sense unity. Closeness implies a
relationship.

34. Proximity

35. Color
5

36. Color
Color 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

37. Color
• Red
• Orange
• Yellow
• Green
• Blue
• Purple
• White
• Black
Adrenaline, blood pressure, anger, love.
Darker = indulgence, Browner = Fall /
Harvest
Active, energetic, more informal, appetite
Highly Active, visible (hello Taxi’s!),
overpowering
Nature, soothing, growth, freshness, hope,
less active
Openness, intelligence, faith, calming,
reduce appetite,
Royalty, power, innovation, wealth
Clean, perfection, light, purity
Death, evil, power, elegance

38. Color
colourlovers.com

39. Typography
6

40. Typography

41. 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

42. Typography
Web fonts are free and supported by
browsers!

43. Typography

44. • 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

45. BOOTSTRAP 3
Part 2

46. What is Bootstrap?

47. 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

48. Why use it? Popular!
It is one the most popular projects on GitHub
• 4,800+ watchers
• 31,500+ forks
• 11,000+ issues closed

49. Getting started
getbootstrap.com

50. What we will see together
1. Mobile-first grid
2. Base CSS for common UI elements
3. Components
4. JavaScript
5. Customize

51. HELPFULL TOOLS
Part 3

52. Cheatsheet
www.cheatography.com/
masonjo/cheat-sheets/
bootstrap/

53. Snippets
www.bootsnipp.com

54. Bootstrap Resources
expo.getbootstrap.com/
resources/

55. Q + A