Bootstrap your web styles with twitter bootstrap

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.

Transcript

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
9.  Official Bootstrap Site  http://getbootstrap.com/  GruntJS *  http://gruntjs.com/  DurandalJS *  http://durandaljs.com/  AngularJS*  http://www.angularjs.org/ 9 * Using Older Bootstrap versions
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!!! 11 * A theme is optional.
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 .\less\bootstrap.less > my-bootstrap.css 13
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
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  http://getbootstrap.com/  LESS  http://lesscss.org/  Grid Displayer Bookmarklet  http://alefeuvre.github.io/foundation-grid-displayer/  Free Themes – Bootswatch  http://bootswatch.com/  Icon Fonts App  http://icomoon.io/  Bootstrap Magic – Theme Builder  http://pikock.github.io/bootstrap-magic/index.html  Media Queries  http://mediaqueri.es/  LayoutIt - Bootstrap Interface Builder  http://www.layoutit.com/  The Original 960 Grid System  http://960.gs/  Brad Frost – This Is Responsive (Should be called ‘This is Awesome’ )  http://bradfrost.github.io/this-is-responsive/ 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