Bootstrap UI Library Introduction
•
6 likes•3,616 views
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.
Recommended
More Related Content
What's hot
What's hot (12)
Similar to Bootstrap UI Library Introduction
Similar to Bootstrap UI Library Introduction (20)
Recently uploaded
Recently uploaded (20)
Bootstrap UI Library Introduction
- 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?
- 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
- 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
- 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
- 50. What we will see together 1. Mobile-first grid 2. Base CSS for common UI elements 3. Components 4. JavaScript 5. Customize
- 55. Q + A