Download as PDF, PPTX
Uploaded byVardot
Bootstrap UI Library Introduction
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.
![Web Design & UI/UX Bootcamp [Online & Offline] In Bangla](https://cdn.slidesharecdn.com/ss_thumbnails/uiuxwebdesignboothcamp-200705134701-thumbnail.jpg?width=640&height=640&fit=bounds)
Bootstrap UI Library Introduction
- 1. BOOTSTRAP UI LIBRARY A beautifulwebsite in hours, or less
- 2.
- 3. www.vardot.com Mohammed J. Razem CEO& Founder of Vardot m.razem@vardot.com @moerazem d.o/user/255384
- 4. What do Iknow about Bootstrap?
- 5. WE BUILD WEBSITES ONBOOTSTRAP
- 13. Before we discuss whatis Bootstrap
- 14.
- 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.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. Contrast • When twoitems are different, it creates contrast
- 25. Contrast • Use coloranalyzer tool • Check WCAG 2.0, Level AA • WCAG 2.0 is a law in Europe
- 26.
- 27. Repetition • Repeat elements,styles and design consistently.
- 28. Repetition • Font-size andfamily across headers and copy • Bullet styles • Color • Border thickness / style • Margins / padding • Components • Buttons • Forms
- 29.
- 30.
- 31.
- 32.
- 33. Proximity • The wayelements are grouped together creates a sense unity. Closeness implies a relationship.
- 34.
- 35.
- 36. Color Color can bevery 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.
- 39.
- 40.
- 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 arefree and supported by browsers!
- 43.
- 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.
- 46.
- 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.
- 50. What we willsee together 1. Mobile-first grid 2. Base CSS for common UI elements 3. Components 4. JavaScript 5. Customize
- 51.
- 52.
- 53.
- 54.
- 55.