Post on 27-Jan-2015
description
Boulos Dib New York Dot Net Developers Group February 20, 2014
1
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
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
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
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
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
Official Bootstrap Site
http://getbootstrap.com/
GruntJS *
http://gruntjs.com/
DurandalJS *
http://durandaljs.com/
AngularJS*
http://www.angularjs.org/
9
* Using Older Bootstrap versions
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
http://getbootstrap.com Include
Bootstrap[.min].css
Bootstrap-theme[.min].css
Done!!! Simple Sample!!!
11 * A theme is optional.
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
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
14
None when using compiled CSS. LESS compiler if the LESS sources are used. jQuery if JavaScript Components are used.
16
Grid System Typography Code Tables Forms Buttons Images Helper Classes Responsive Utilities
17
18
Grid Displayer Sample Page
http://alefeuvre.github.io/foundation-grid-displayer/
19
All glyphicons require 2 classes
Glyphicon
Glyphicon-xxxx
<span class="glyphicon glyphicon-search"></span>
20
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
Transitions Modal Dropdown Scrollspy Tab Tooltip
Popover Alert Button Collapse Carousel Affix
22
Two types of customization
Themes
Third Party Templates
Theming
Customization Page
▪ http://getbootstrap.com/customize/
Third party Customizers
Plugins and Extensions
23
http://getbootstrap.com/migration/
Upgrader by divshot
http://code.divshot.com/bootstrap3_upgrader/
Bootstrap3 Upgrader
http://bootstrap3.kissr.com/
24
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
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
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
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
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
@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