introduction to bootstrap: design for developers
TRANSCRIPT
Bootstrap 101Introduction to one of the most popular front-end frameworks
Design for DevelopersIntroduction and Overview
Basic Principles of DesignProximity AlignmentRepetition Contrast
BonusColour Typography
ProximityThe way elements are grouped together creates a sense of unity. Closeness implies a relationship.
Proximity Some examples
A menu of list that belong to a category
PLATFORMPlaystation 4XBOX OneXBOX 360Nintendo WiiGENREActionAdventureFirst-Person ShooterRole Playing GameSIZESmallMediumLarge
PLATFORMPlaystation 4XBOX OneXBOX 360Nintendo Wii
GENREActionAdventureFirst-Person ShooterRole Playing Game
SIZESmallMediumLarge
AlignmentElements should not be placed arbitrary.Place elements in relation to others.
Alignment Some examples
Aligning elements horizontally and vertically .(and some proximity too)
Alignment Some examples
Tetris Fail
Alignment The Grid
A network of uniformly spaced horizontal and perpendicular lines.
Alignment The Golden Ratio
Divine proportion1.61803398875
RepetitionRepeat elements, styles and design consistency•Font-size and Family across headers and text•Bullet styles•Color•Borders/Styles•Margins/Paddings
Repetition An example
www.britishairways.com
ContrastWhen two items are different, it creates contrast.
Sort of different is not different, it’s conflict.
REALLY Different!
Contrast Good & Bad
Contrast, Contrast and Contrast
ColorColor can be very emotional (psychology) or scientific (theories and schemes)
Associations, Temperatures, Models, Color wheels and schemes
TypographyFonts 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)
Typography In Ten Minutes
practicaltypography.com
1. BODY TEXT
2. POINT SIZE
3. LINE SPACING
4. LINE LENGTH
5. FONT
More text than anything. Focus on that first. 80/20 Rule
CSS: font-size
CSS: line-height
CSS: width of the container
CSS: font-family(don’t use system fonts!)
TypographyWeb Fonts!
There’s good free resources! Paid for services aren’t expensive.
Limit your fonts. Browser support is good, but still use fallback fonts.
BootstrapMost popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
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
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/
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>
The Grid12 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>
The Grid12 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
The GridYou 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>
Bootstrap: CSS• Typography• Tables• Forms• Buttons• Images
http://getbootstrap.com/css/
Bootstrap: ComponentsOver a dozen reusable components
•Glyphicons•Dropdowns•Navbar•Breadcrumbs•Alerts
http://getbootstrap.com/components/
Bootstrap: JavascriptBrings components to life with custom plugins•Modals•Tabs•Tooltips•Alerts•Carousel
http://getbootstrap.com/javascript/
Bootstrap: Customize and Download• Customize Bootstrap’s components,
LESS variables and jQuery plugins to get your very own version.
http://getbootstrap.com/customize/
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.
Benefits• Faster prototyping and development• Powerful Grid• Easily Customizable and Well tested Styles• Mobile first/ Responsive Components• Nearly Perfect Documentation• Huge Community Support
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
@melvindidit