This deck is for presentations given at:
Philly.net Code Camp 2013.2 on Nov 23, 2013 - http://bit.ly/1l7nRHz
and NYC .Net Developer Group on Feb 20, 2014 - http://bit.ly/1b9IuCy
Twitter Bootstrap is a simple but powerful CSS framework that simplifies Web and front-end design and development. It is currently used by many Web sites and is becoming part of boilerplate code for building mobile and single page applications using popular frameworks (i.e ASP.Net MVC, DurandalJS, AngularJS). In this session we start with an introduction to Twitter Bootstrap followed by how to use it when prototyping and building Web applications. We’ll demo some of the components, Styles, and Bootstrap’s powerful Grid system. We will conclude with a look at the growing ecosystem of extensions, plug-ins and tools.
4.
What are we going to cover
Overview of Bootstrap
Why use Bootstrap
Using Bootstrap in a simple project
Customizing Bootstrap
Third Party templates and themes
Tools and Resources
4
5.
Sleek, intuitive, and powerful mobile first
front-end framework for faster and easier
web development.
Standards Based:
HTML, CSS, JavaScript
Browser Support:
All modern browsers
Some older browsers as well*
5
6.
Bootstrap is a framework you give a Web
developer who is not an expert in CSS so he
can do something that a CSS developer won't
kill him for .
▪ Richard Campbell – .Net Rocks! Show #944
while discussing Bootstrap and CSS with Dan Wahlin.
6
7.
Easy to Start – download and use
Good and Flexible Layout System (Grid)
MOBILE-FIRST Responsive Web Design
Styling for almost all HTML Elements
Extensive list of components
Very nice list of Icons as fonts
Extensible via JavaScript Plugins
Nearly Perfect Documentation
Freaking Growing Community Support…
7
9.
Official Bootstrap Site
http://getbootstrap.com/
GruntJS *
http://gruntjs.com/
DurandalJS *
http://durandaljs.com/
AngularJS*
http://www.angularjs.org/
* Using Older Bootstrap versions
9
10. V 2.3.x Spported optional Responsive Design
It was not mobile first.
V3.0 is Mobile first from the start
Bootstrap 3.0 breaks existing 2.3.x sites.
See http://getbootstrap.com/migration/
Chrome Extension – Responsive Inspector
http://bit.ly/1a3LMVc
10
12.
http://lesscss.org/
A CSS Processor used to build Bootstrap
Recent addition: SASS
If you know CSS, you already know LESS
Visual Studio 2013 with Web Essentials extension
precompile and preview LESS files as you code
http://vswebessentials.com/
If you prefer stand alone GUI tools for LESS and other
pre-compilation steps: checkout Prepros App
http://alphapixels.com/prepros/
12
13.
Pre-requisite: Node.js and npm (http://nodejs.org/)
Download Bootstrap Source from Github into a folder (bs)
https://github.com/twbs/bootstrap
cd .bs
npm install –g grunt-cli
npm install
grunt dist
Note: this compiles bootstrap LESS file into dist folder.
grunt clean
Note: this step removes all files created in dist folder
Or
cd .bs
npm install –g less
lessc .lessbootstrap.less > my-bootstrap.css
13
23.
Two types of customization
Themes
Third Party Templates
Theming
Customization Page
▪ http://getbootstrap.com/customize/
Third party Customizers
Plugins and Extensions
23
28.
Easy To Use
Saves Time
Work well with Developers and Designers
Easy enough to theme
The client wants the colors changed again? No
problem, now you know what to do .
28
29.
Bootstrap
LESS
http://mediaqueri.es/
LayoutIt - Bootstrap Interface Builder
http://pikock.github.io/bootstrap-magic/index.html
Media Queries
http://icomoon.io/
Bootstrap Magic – Theme Builder
http://bootswatch.com/
Icon Fonts App
http://alefeuvre.github.io/foundation-grid-displayer/
Free Themes – Bootswatch
http://lesscss.org/
Grid Displayer Bookmarklet
http://getbootstrap.com/
http://www.layoutit.com/
The Original 960 Grid System
http://960.gs/
http://bradfrost.github.io/this-is-responsive/
Brad Frost – This Is Responsive (Should be called ‘This is Awesome’ )
29