Introduction to Bootstrap: Design for Developers

Bootstrap 101
Introduction to one of the most popular front-end frameworks

Design for Developers
Introduction and Overview

Basic Principles of Design
Proximity Alignment
Repetition Contrast
Bonus
Colour Typography

Proximity
The 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
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

Alignment
Elements 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 proportion
1.61803398875

Repetition
Repeat 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

Contrast
When 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

Color
Color can be very emotional (psychology) or
scientific (theories and schemes)
Associations, Temperatures, Models, Color
wheels and schemes

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)

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!)

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.

Bootstrap
Most 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 Grid
12 column Advanced Grid
<div class=“container”>

<div class=“row”>
<div class=“col-md-4”>
<!– content -->
</div>
<!– 8 more columns -->
</div>
</div>

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

The Grid
You can use two grid sizes for different screen sizes:
<div class=“row”>
<div class=“col-md-4 col-xs-6”>

</div>
<div class=“col-md-8 col-xs-6”>

</div>
</div>

Bootstrap: CSS
• Typography
• Tables
• Forms
• Buttons
• Images
http://getbootstrap.com/css/

Bootstrap: Components
Over a dozen reusable components
•Glyphicons
•Dropdowns
•Navbar
•Breadcrumbs
•Alerts
http://getbootstrap.com/components/

Bootstrap: Javascript
Brings 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

Introduction to Bootstrap: Design for Developers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (7)

Similar to Introduction to Bootstrap: Design for Developers

Similar to Introduction to Bootstrap: Design for Developers (20)

Recently uploaded

Recently uploaded (17)

Introduction to Bootstrap: Design for Developers