Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Bootstrap presentation

A brief Bootstrap overview
by

Antigoni Makri

on 2 February 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Bootstrap presentation

When
IE6

support is

not

required
speeds up development
customizable
responsive + mobile first approach
unifies naming conventions among teams
allows for rapid prototyping
contains a grid system
contains an extensive list of components
includes javascript functionality
workarounds offered to make it compatible to IE7+
it is well documented and supported
TO USE OR NOT TO USE?
When is it worth using Bootstrap?
When a
responsive
solution is required
Install Bootstrap
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
├── js/
│ ├── bootstrap.js
│ └── bootstrap.min.js
└── fonts/
├── glyphicons-halflings-regular.eot
├── glyphicons-halflings-regular.svg
├── glyphicons-halflings-regular.ttf
└── glyphicons-halflings-regular.woff
Some good reasons why we should use Bootstrap

The grid.. explained
There are four Grid Systems in Bootstrap v3, with the width of the viewport being the parameter that differentiates them. The widths that set the frontiers between one and another are as follows:

Extra small devices ~ Phones (< 768px)
Small devices ~ Tablets (>= 768px)
Medium devices ~ Desktops (>= 992px)
Large devices ~ Desktops (>= 1200px)

There 4 different grid classes you can use to address each of the different supported viewports:

col-xs-* Extra small devices
col-sm-* Small devices
col-md-* Medium devices
col-lg-* Large devices

*number of columns

In Bootstrap the grid is controlled by the
viewport size
via the media queries and that as the browser width gets wider, the different column class will overwrite the previous.

Lets get it starteeeed
Markup structure
Make up your mind
Use Bootstrap only as a responsive grid
(no more styles)
for Bootstrap
Uses "less" and it’s not compatible with "Sass"
Most of the cons have to do with the design aspects of Bootstrap. The easy answer to all that is that Twitter
Bootstrap is not meant to be a design solution. It’s a development solution.
(At least for us)
Messy markup
Non-supported HTML attributes
Uses of PX instead of EMs
Some people would argue that:
When design follows a grid
strictly
customize Bootstrap package http://getbootstrap.com/customize/
MAKE SURE YOU SAVE THE CUSTOM URL
include Bootstrap css and js files
Take care of IE by doing the following:
-Add
boxsizing
behavior:url(/css/boxsizing.htc); (required polyfil to make the "box model" work on ie7-)
- Add
respond.js
(polyfill for min/max-width CSS3 Media Queries)
- Add
htmlshiv
html5 polyfil
"front-end framework for developing responsive,
mobile first
projects on the web."
Minimum requirements:
Make the most of Bootstrap's component library
Start with basic Bootstrap code, customize and add on your
built as you go
Compiled source
To make use of the Grid System you'd need a container element, with a class "container", and inside a second container with a class "row"

<div class="
container
">
<div class="
row
">
<div class="
col-xs
-6
">col-xs-6</div>
<div class="
col-xs
-6">col-xs-6</div>
</div>
</div>

For a fluid layout use class "container-fluid"
MOBILE FIRST APPROACH EXPLAINED...
All of the default styles are
designed for mobile
As your device or browser
width increases
, additional
styles are being loaded
via media queries.
if you are viewing the site on your mobile, then you are only using what you need, no bloat.
Thinking about your mobile experience and styles first, not starting with desktop and pairing down to mobile.
On tight timescales - Bootstrap can save you time
Basic Single Columns
<div class="
col-md-6
">I'm on the left</div>
<div class="
col-md-6
">I'm on the right</div>
http://www.helloerik.com/column-examples/example1.html
Mixin
<div class="left-and-right">
<div class="left">I'm on the left</div>
<div class="right">I'm on the right</div>
</div>

.left-and-right {
.make-row();
.left {
.make-md-column(6);
}
.right {
.make-md-column(6);
}
}
you don’t have to include any markup in the HTML.
http://www.helloerik.com/column-examples/example3.html
Pull/Push/Offset columns (eg ovoenergy.com)
flip where columns are positioned
http://www.helloerik.com/column-examples/example4.html
http://WWW.ovoenergy.com
Mixed Width Columns
<div class="col-md-6 col-lg-4">I’m on the left</div>
<div class="col-md-6 col-lg-8">I’m on the right</div>
http://www.helloerik.com/column-examples/example2.html
Different uses of the Grid
Row structure
bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│ ├── css/
│ ├── js/
│ └── fonts/
└── docs/
└── examples/
Precompiled source
SOURCE CODE
Features
+mobile/responsive support

Number and quality of components


Majority
How old is the framework
Cleanliness and clear concept

Spread/Activity
How well known and supported the framework is

Customizability
Underlying CSS precompiler
Framework internal configuration parameters

How to choose between frameworks
Nest columns
<div class="row">
<div class="col-md-9">
Level 1: .col-md-9
<div class="row">
<div class="col-md-6">
Level 2: .col-md-6
</div>
<div class="col-md-6">
Level 2: .col-md-6
</div>
</div>
</div>
</div>

http://getbootstrap.com/css/#grid-nesting
Full transcript