MuraCon Notes - Ready? Bootstrap! Go!
October 02, 2013
Ready? Bootstrap! Go! - Guust Nieuwenhuis
What is Bootstrap?
Web UI framework
css, images, icons, javascript
great for kicking off your project, so you don't need to repeat the same basic stuff by hand
open source - apache v2.0 license
picked up really fast by the community
so why bootstrap (instead of, say, jqueryui)?
documentation -- some OS projects have no documentation, Bootstrap has great docs
cross-browser support out of the box
responsive and mobile first
-- can build sites, STARTING from the small devices, and allow the interface to grow "up" to bigger devices (instead of the other way around)
uses LESS
-- can write "dynamic CSS", use variables, function calls, etc.
how to get started --
getbootstrap.com
"download" button on the front page includes EVERYTHING (LESS files, etc)
click "getting started" - download from there, gives you the compiled version, fewer files, no LESS components, etc.
Customize tab
-- grab whichever pieces you want, removing the rest
-- can even customize LESS variables in your download...so by default it uses a different background color, font size, etc.
then just click "compile and download" at the bottom and it'll grab everything with your customizations.
Features --
Grid System
mobile first, helps with dev'ing for a wide range of screen sizes
can really customize the whole grid if you play with the LESS variables
Base CSS
typography
code
tables
forms
buttons
images
etc
components --
extend what's already there
glyphicons
dropdowns
button groups
breadcrumbs
pagination
labels
etc
(all of it is pure CSS, nothing interactive)
...all the things you want to be baked into HTML, but aren't there yet
jQuery Plugins
transitions
modals
dropdowns
scrollspy
tooltips
affix
carousel
collapse
etc
(this is where it adds the interactive stuff)
New in version 3--
mobile first and always responsive
fixed width got REMOVED
super-powered grid system
new glyphicons icon font (they used TO be sprites)
added/removed some components
--- removed query type-head plugin (it's now a complete separate project), for example
dropped ie7 and FF 3.6 support
and more
check here for more info:
blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
"span" has been changed to
.col-
md-1
...notations
ex:
<div class="row">
<div class col-md-4>
md = medium (screen size)
.col-xs-12 col-md-8
xs = extra small
so on medium screens this is 8 columns of your screen, on extra small ones it's 12 columns
xs
md
lg
...extra small, medium and large
and it just picks which one you specify
don't have to use all 3, can just play with, say, medium and it will just use that if you don't define anything else
xs - smart phones
sm - tablets
md - laptops
lg - TVs huge displays, etc.
can nest columns
can edit the defaults for background colors, fonts, etc, SAFELY via the variables.less file
just make your changes in there to reset any of the defaults
@grid-colums: 12
...want to use a 14 or 16 column design instead? just change this value! boom, done!
tables
add class=table-striped and you instantly get alternating colors on the table rows
table-bordered
table-hover...mouseover color changing on the rows
table-condensed
etc
Forms --
to add a warming/error to a field
div class=form-group has-warning or has-error
nice!
btn-success for the green/friendly colored buttons
class=disabled to disable a control, make a button un-clickable, etc.
Responsive Utilities --
will show you which controls are visible on the given screen size, which are hidden, etc.
nav bar demo
menus demo
progress bar demo
modal popup demo
Mura and Bootstrap --
Mura heavily uses bootstrap
used in 3 areas
Admin
HTML rendering
Bootstrap theme
Admin
-- doesn't look like basic/default Bootstrap because they customized it
HTML thats rendered on the front-end (i.e. a local content index)
the code generated to do that is Bootstrap by default
and the default theme in Mura is Bootstrap
can use Bootstrap in the Mura admin plugins
easier to make plugins match the look/feel of the rest of the admin UI (easier to make them match the theme of Mura Admin than it was in 5.x)
Mura 6.1 uses Bootstrap 3 (6.0 used 2)
The Bootstrap Ecosystem --
themes
bootswatch.com
wrapbootstrap.com
flatui
--designmodo.github.io/Flat-UI/
BootMetro
aozora.github.io/bootmetro/
Geo for Bootstrap
divshot.github.io/geo-bootstrap/
--- example of how Bootstrap is not guarantee for a successful design. :)
ala GeoCities sites
Theme Builders
geobootstrap.com/customize/
stylebootstrap.info
pikock.github.io/bootstrapmagic/
etc
Components
jQuery uI Bootstrap
Datepicker (gh.com/eternicode/bootstrap-datepicker/
Select2 -- great drop down plugin
X-editable --
jQueryUI and Bootstrap together so you can get the power of both in 1 site
Bootstrap Data Table
Bootstrap Switch
File Uploader
Bootstro.js
-- to build tutorials/demos on your sites
Tools
Design
Bootstrap PSD
-- PSD file template to give to a designer
CDN
BootstrapCDN
bootstrapcdn.com
-- instead of hosting Bootstrap files yourself, can use the CDN and point to their servers for those files
so same benefits as using Google's query file, etc.
rollingstones.com
fender.com
...both use bootstrap and it's so customized that it doesn't LOOK like bootstrap
can make sites look very unique
peep.asso.fr -- using bootstrap and Mura
bootsnipp.com
Prototyping
jetstrap.com
divshot.com
pingendo.com
layoutit.com
...and more
Bootsnipp resources list
bootsnipp.com/resources
Boots Hero Res. List
Twitter Bootstrap Web Development How To -- book
packtpub.com
(not updated for v3 yet)
@lagaffe
prisma-it.com
on getbs.com
migrating from 2.x to 3.0
shows you how to upgrade from one to another
some classes were "changed" and others were REMOVED so make sure you check this when upgrading a site
What is Bootstrap?
Web UI framework
css, images, icons, javascript
great for kicking off your project, so you don't need to repeat the same basic stuff by hand
open source - apache v2.0 license
picked up really fast by the community
so why bootstrap (instead of, say, jqueryui)?
documentation -- some OS projects have no documentation, Bootstrap has great docs
cross-browser support out of the box
responsive and mobile first
-- can build sites, STARTING from the small devices, and allow the interface to grow "up" to bigger devices (instead of the other way around)
uses LESS
-- can write "dynamic CSS", use variables, function calls, etc.
how to get started --
getbootstrap.com
"download" button on the front page includes EVERYTHING (LESS files, etc)
click "getting started" - download from there, gives you the compiled version, fewer files, no LESS components, etc.
Customize tab
-- grab whichever pieces you want, removing the rest
-- can even customize LESS variables in your download...so by default it uses a different background color, font size, etc.
then just click "compile and download" at the bottom and it'll grab everything with your customizations.
Features --
Grid System
mobile first, helps with dev'ing for a wide range of screen sizes
can really customize the whole grid if you play with the LESS variables
Base CSS
typography
code
tables
forms
buttons
images
etc
components --
extend what's already there
glyphicons
dropdowns
button groups
breadcrumbs
pagination
labels
etc
(all of it is pure CSS, nothing interactive)
...all the things you want to be baked into HTML, but aren't there yet
jQuery Plugins
transitions
modals
dropdowns
scrollspy
tooltips
affix
carousel
collapse
etc
(this is where it adds the interactive stuff)
New in version 3--
mobile first and always responsive
fixed width got REMOVED
super-powered grid system
new glyphicons icon font (they used TO be sprites)
added/removed some components
--- removed query type-head plugin (it's now a complete separate project), for example
dropped ie7 and FF 3.6 support
and more
check here for more info:
blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
"span" has been changed to
.col-
md-1
...notations
ex:
<div class="row">
<div class col-md-4>
md = medium (screen size)
.col-xs-12 col-md-8
xs = extra small
so on medium screens this is 8 columns of your screen, on extra small ones it's 12 columns
xs
md
lg
...extra small, medium and large
and it just picks which one you specify
don't have to use all 3, can just play with, say, medium and it will just use that if you don't define anything else
xs - smart phones
sm - tablets
md - laptops
lg - TVs huge displays, etc.
can nest columns
can edit the defaults for background colors, fonts, etc, SAFELY via the variables.less file
just make your changes in there to reset any of the defaults
@grid-colums: 12
...want to use a 14 or 16 column design instead? just change this value! boom, done!
tables
add class=table-striped and you instantly get alternating colors on the table rows
table-bordered
table-hover...mouseover color changing on the rows
table-condensed
etc
Forms --
to add a warming/error to a field
div class=form-group has-warning or has-error
nice!
btn-success for the green/friendly colored buttons
class=disabled to disable a control, make a button un-clickable, etc.
Responsive Utilities --
will show you which controls are visible on the given screen size, which are hidden, etc.
nav bar demo
menus demo
progress bar demo
modal popup demo
Mura and Bootstrap --
Mura heavily uses bootstrap
used in 3 areas
Admin
HTML rendering
Bootstrap theme
Admin
-- doesn't look like basic/default Bootstrap because they customized it
HTML thats rendered on the front-end (i.e. a local content index)
the code generated to do that is Bootstrap by default
and the default theme in Mura is Bootstrap
can use Bootstrap in the Mura admin plugins
easier to make plugins match the look/feel of the rest of the admin UI (easier to make them match the theme of Mura Admin than it was in 5.x)
Mura 6.1 uses Bootstrap 3 (6.0 used 2)
The Bootstrap Ecosystem --
themes
bootswatch.com
wrapbootstrap.com
flatui
--designmodo.github.io/Flat-UI/
BootMetro
aozora.github.io/bootmetro/
Geo for Bootstrap
divshot.github.io/geo-bootstrap/
--- example of how Bootstrap is not guarantee for a successful design. :)
ala GeoCities sites
Theme Builders
geobootstrap.com/customize/
stylebootstrap.info
pikock.github.io/bootstrapmagic/
etc
Components
jQuery uI Bootstrap
Datepicker (gh.com/eternicode/bootstrap-datepicker/
Select2 -- great drop down plugin
X-editable --
jQueryUI and Bootstrap together so you can get the power of both in 1 site
Bootstrap Data Table
Bootstrap Switch
File Uploader
Bootstro.js
-- to build tutorials/demos on your sites
Tools
Design
Bootstrap PSD
-- PSD file template to give to a designer
CDN
BootstrapCDN
bootstrapcdn.com
-- instead of hosting Bootstrap files yourself, can use the CDN and point to their servers for those files
so same benefits as using Google's query file, etc.
rollingstones.com
fender.com
...both use bootstrap and it's so customized that it doesn't LOOK like bootstrap
can make sites look very unique
peep.asso.fr -- using bootstrap and Mura
bootsnipp.com
Prototyping
jetstrap.com
divshot.com
pingendo.com
layoutit.com
...and more
Bootsnipp resources list
bootsnipp.com/resources
Boots Hero Res. List
Twitter Bootstrap Web Development How To -- book
packtpub.com
(not updated for v3 yet)
@lagaffe
prisma-it.com
on getbs.com
migrating from 2.x to 3.0
shows you how to upgrade from one to another
some classes were "changed" and others were REMOVED so make sure you check this when upgrading a site