Introduction to Bootstrap: Design for Developers
4 likes1,352 views
The document provides an introduction to Bootstrap, one of the most popular front-end frameworks. It discusses basic design principles like proximity, alignment, repetition and contrast. It then covers key aspects of Bootstrap like the grid system, CSS components, JavaScript plugins, customization options, and how it relates to basic design principles. The benefits of Bootstrap are faster development, powerful grid system, customizable styles and responsive components, while potential drawbacks include file size overhead and templates looking similar without customization.
Introduction to Bootstrap: Design for Developers
- 1. Bootstrap 101 Introduction to one of the most popular front-end frameworks
- 2. Design for Developers Introduction and Overview
- 3. Basic Principles of Design Proximity Alignment Repetition Contrast Bonus Colour Typography
- 4. Proximity The way elements are grouped together creates a sense of unity. Closeness implies a relationship.
- 5. Proximity Some examples A menu of list that belong to a category PLATFORM Playstation 4 XBOX One XBOX 360 Nintendo Wii GENRE Action Adventure First-Person Shooter Role Playing Game SIZE Small Medium Large PLATFORM Playstation 4 XBOX One XBOX 360 Nintendo Wii GENRE Action Adventure First-Person Shooter Role Playing Game SIZE Small Medium Large
- 6. Alignment Elements should not be placed arbitrary. Place elements in relation to others.
- 7. Alignment Some examples Aligning elements horizontally and vertically . (and some proximity too)
- 8. Alignment Some examples Tetris Fail
- 9. Alignment The Grid A network of uniformly spaced horizontal and perpendicular lines.
- 10. Alignment The Golden Ratio Divine proportion 1.61803398875
- 11. Repetition Repeat elements, styles and design consistency •Font-size and Family across headers and text •Bullet styles •Color •Borders/Styles •Margins/Paddings
- 12. Repetition An example www.britishairways.com
- 13. Contrast When two items are different, it creates contrast. Sort of different is not different, it’s conflict. REALLY Different!
- 14. Contrast Good & Bad Contrast, Contrast and Contrast
- 15. Color Color can be very emotional (psychology) or scientific (theories and schemes) Associations, Temperatures, Models, Color wheels and schemes
- 16. Typography Fonts to the rest of us. Typography matters. Web fonts are free and well supported. (and don’t use decorative fonts, even if they’re cute)
- 17. Typography In Ten Minutes practicaltypography.co m 1. BODY TEXT More text than anything. Focus on that first. 80/20 Rule 2. POINT SIZE CSS: font-size 3. LINE SPACING CSS: line-height 4. LINE LENGTH CSS: width of the container 5. FONT CSS: font-family (don’t use system fonts!)
- 18. Typography Web Fonts! There’s good free resources! Paid for services aren’t expensive. Limit your fonts. Browser support is good, but still use fallback fonts.
- 19. Bootstrap Most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
- 20. What is Bootstrap? Sleek, Intuitive, and powerful Mobile first Front- End Framework •Style guide for HTML Markup •Common web design and layout patterns (CSS) •Common widgets and functionality (JS) •Faster and easier web development Created by Mark Otto and Jacob Thornton when working @Twitter to encourage consistency across internal tools and speed up development
- 21. Bootstrap: Getting Started • Getting started is as simple as dropping some CSS and Javascript into the root of your site. • Customize variables, components, Javascript plugins and more. http://getbootstrap.com/customize/ • The fastest way is to download the compiled and minified versions of our CSS and Javascript, along with the included fonts. http://getbootstrap.com/getting-started/ • CDN (Content Delivery Network) http://www.bootstrapcdn.com/
- 22. Bootstrap: Basic Template <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Bootstrap 101 Template</title> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <script src= "ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script src="js/bootstrap.min.js"></script> </body> </html>
- 23. The Grid 12 column Advanced Grid <div class=“container”> <!-- every row must have 12 columns --> <div class=“row”> <div class=“col-md-4”> <!– content --> </div> <!– 8 more columns --> </div> </div>
- 24. The Grid 12 column Advanced Grid Bootstrap 3 features an always-responsive grid with a maximum size: 1.col-xs-* grids have no maximum size (auto) <768px (Extra Small Devices) 2.col-sm-* grids resize ≥768px (Small Devices) 3.col-md-* grids resize ≥992px (Medium Devices) 4.col-lg-* grids resize ≥1200px (Large Devices) You should choose col-md or col-lg for desktop sites
- 25. The Grid You can use two grid sizes for different screen sizes: <div class=“row”> <div class=“col-md-4 col-xs-6”> <!-- content --> </div> <div class=“col-md-8 col-xs-6”> <!-- content --> </div> </div>
- 26. Bootstrap: CSS • Typography • Tables • Forms • Buttons • Images http://getbootstrap.com/css/
- 27. Bootstrap: Components Over a dozen reusable components •Glyphicons •Dropdowns •Navbar •Breadcrumbs •Alerts http://getbootstrap.com/components/
- 28. Bootstrap: Javascript Brings components to life with custom plugins •Modals •Tabs •Tooltips •Alerts •Carousel http://getbootstrap.com/javascript/
- 29. Bootstrap: Customize and Download • Customize Bootstrap’s components, LESS variables and jQuery plugins to get your very own version. http://getbootstrap.com/customize/
- 30. How Bootstrap relates to Design Principles • Proximity : Designer’s responsibility • Alignment : 12 column advanced grid • Repetition : Default typography, Buttons, Classes • Contrast : Designer’s responsibility, but components have decent contrast • Color : Designer still needs to craft a color palette • Typography: Default provided, designer may have to use web fonts.
- 31. Benefits • Faster prototyping and development • Powerful Grid • Easily Customizable and Well tested Styles • Mobile first/ Responsive Components • Nearly Perfect Documentation • Huge Community Support
- 32. Drawbacks • Overhead (v3 not bad: 127k => 92k CSS + 28k JS) • Bootstrap design looks like Bootstrap design • ‘DIV Bloat’ if you’re not careful or don’t fully customize
- 33. @melvindidit