Send the link below via email or IMCopy
Present to your audienceStart 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.
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.
Transcript of Bootstrap presentation
speeds up development
responsive + mobile first approach
unifies naming conventions among teams
allows for rapid prototyping
contains a grid system
contains an extensive list of components
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?
solution is required
│ ├── bootstrap.css
│ ├── bootstrap.min.css
│ ├── bootstrap-theme.css
│ └── bootstrap-theme.min.css
│ ├── bootstrap.js
│ └── bootstrap.min.js
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
via the media queries and that as the browser width gets wider, the different column class will overwrite the previous.
Lets get it starteeeed
Make up your mind
Use Bootstrap only as a responsive grid
(no more styles)
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)
Non-supported HTML attributes
Uses of PX instead of EMs
Some people would argue that:
When design follows a grid
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:
behavior:url(/css/boxsizing.htc); (required polyfil to make the "box model" work on ie7-)
(polyfill for min/max-width CSS3 Media Queries)
"front-end framework for developing responsive,
projects on the web."
Make the most of Bootstrap's component library
Start with basic Bootstrap code, customize and add on your
built as you go
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"
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
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
">I'm on the left</div>
">I'm on the right</div>
<div class="left">I'm on the left</div>
<div class="right">I'm on the right</div>
you don’t have to include any markup in the HTML.
Pull/Push/Offset columns (eg ovoenergy.com)
flip where columns are positioned
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>
Different uses of the Grid
│ ├── css/
│ ├── js/
│ └── fonts/
Number and quality of components
How old is the framework
Cleanliness and clear concept
How well known and supported the framework is
Underlying CSS precompiler
Framework internal configuration parameters
How to choose between frameworks
Level 1: .col-md-9
Level 2: .col-md-6
Level 2: .col-md-6