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.

1. Boulos Dib
New York Dot Net Developers Group
February 20, 2014
1

2. Independent Consultant.
 First Commercial Personal Computer 1980 – TRS-80 Model III 
 First Z80 based product (Hand Built Protocol Adapter For Citibank– 1984)
 First Commercial MS-DOS product (Telex/IBM PC, 50 Baud – 1985)
 Used: 16-bit Win 3.x , 8080/Z80, 68xxx, PDP/RSX,VAX-VMS and x86 (C,
C++, C# among others), JavaScript, HTML, CSS, etc…
 Community Involvement:

 Co-Founder: NYC Pluralsight Study Group.
 Founder: NYC Windows Developers – Launching 2014
 Co-Organizer: NYC Code Camp, Alt.Net Meetup, Windows Phone Meetup ,
XAML NYC Meetup
 Volunteer: SharePoint Saturday, NYC Code Camp
 Speaker: NY Code Camp, Philly.Net Code Camp, and various user groups.
2

3. http://www.meetup.com
3

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

8. 8

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

11. 

http://getbootstrap.com
Include
 Bootstrap[.min].css
 Bootstrap-theme[.min].css
Done!!!
 Simple Sample!!!

* A theme is optional.
11

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

14. 14

15. http://www.bootstrapcdn.com
15

16. 


None when using compiled CSS.
LESS compiler if the LESS sources are used.
jQuery if JavaScript Components are used.
16

17. 








Grid System
Typography
Code
Tables
Forms
Buttons
Images
Helper Classes
Responsive Utilities
17

18. 18

19. 
Grid Displayer

Sample Page
http://alefeuvre.github.io/foundation-grid-displayer/
19

20. 
All glyphicons require 2 classes

Glyphicon
 Glyphicon-xxxx

<span class="glyphicon glyphicon-search"></span>
20

21. 









Glyphicons
Dropdowns
Button groups
Button dropdowns
Input groups
Navs
Navbar
Breadcrumbs
Pagination
Labels










Badges
Jumbotron
Page header
Thumbnails
Alerts
Progress bars
Media object
List group
Panels
Wells
21

22. 





Transitions
Modal
Dropdown
Scrollspy
Tab
Tooltip






Popover
Alert
Button
Collapse
Carousel
Affix
22

23. 
Two types of customization
 Themes
 Third Party Templates

Theming
 Customization Page
▪ http://getbootstrap.com/customize/
 Third party Customizers

Plugins and Extensions
23

24. 
http://getbootstrap.com/migration/

Upgrader by divshot
 http://code.divshot.com/bootstrap3_upgrader/

Bootstrap3 Upgrader
 http://bootstrap3.kissr.com/
24

25. 
Editors
 http://www.bootply.com/
 http://www.divshot.com/

Themes
 http://www.boottheme.com/
 http://rriepe.github.io/1pxdeep/
 http://designmodo.github.io/Flat-UI/
25

26. 
Blueprint
 http://www.blueprintcss.org/

Zurb Foundation
 http://foundation.zurb.com/

Metro UI
 http://metroui.org.ua/

PURE
 http://purecss.io/

Gumby Framework
 http://gumbyframework.com/

BASE Framework
 http://gumbyframework.com/
26

27. 



Download Bootstrap
Customize Bootstrap
Keep the original bootstrap CSS
Load customized CSS file after bootstrap

For mobile apps, exclude what’s not used to
minimize footprint.
27

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

30. @boulosdib
 http://blog.boulosdib.com

Note:
I co-organize a weekly study group at Microsoft’s NYC office
where we share lots of development resources, tips and tricks.
 http://www.meetup.com/NYPluralsightStudy/
30