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

Bootstrap your web styles with twitter bootstrap

Embed Size (px)

DESCRIPTION

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.

Citation preview

Page 1: Bootstrap your web styles with twitter bootstrap

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

1

Page 2: Bootstrap your web styles with twitter bootstrap

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

Page 3: Bootstrap your web styles with twitter bootstrap

http://www.meetup.com

3

Page 4: Bootstrap your web styles with twitter bootstrap

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

Page 5: Bootstrap your web styles with twitter bootstrap

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

Page 6: Bootstrap your web styles with twitter bootstrap

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

Page 7: Bootstrap your web styles with twitter bootstrap

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

Page 8: Bootstrap your web styles with twitter bootstrap

8

Page 9: Bootstrap your web styles with twitter bootstrap

Official Bootstrap Site

http://getbootstrap.com/

GruntJS *

http://gruntjs.com/

DurandalJS *

http://durandaljs.com/

AngularJS*

http://www.angularjs.org/

9

* Using Older Bootstrap versions

Page 10: Bootstrap your web styles with twitter bootstrap

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

Page 11: Bootstrap your web styles with twitter bootstrap

http://getbootstrap.com Include

Bootstrap[.min].css

Bootstrap-theme[.min].css

Done!!! Simple Sample!!!

11 * A theme is optional.

Page 12: Bootstrap your web styles with twitter bootstrap

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

Page 13: Bootstrap your web styles with twitter bootstrap

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

Page 14: Bootstrap your web styles with twitter bootstrap

14

Page 15: Bootstrap your web styles with twitter bootstrap

http://www.bootstrapcdn.com

15

Page 16: Bootstrap your web styles with twitter bootstrap

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

16

Page 17: Bootstrap your web styles with twitter bootstrap

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

17

Page 18: Bootstrap your web styles with twitter bootstrap

18

Page 20: Bootstrap your web styles with twitter bootstrap

All glyphicons require 2 classes

Glyphicon

Glyphicon-xxxx

<span class="glyphicon glyphicon-search"></span>

20

Page 21: Bootstrap your web styles with twitter bootstrap

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

Page 22: Bootstrap your web styles with twitter bootstrap

Transitions Modal Dropdown Scrollspy Tab Tooltip

Popover Alert Button Collapse Carousel Affix

22

Page 23: Bootstrap your web styles with twitter bootstrap

Two types of customization

Themes

Third Party Templates

Theming

Customization Page

▪ http://getbootstrap.com/customize/

Third party Customizers

Plugins and Extensions

23

Page 24: Bootstrap your web styles with twitter bootstrap

http://getbootstrap.com/migration/

Upgrader by divshot

http://code.divshot.com/bootstrap3_upgrader/

Bootstrap3 Upgrader

http://bootstrap3.kissr.com/

24

Page 26: Bootstrap your web styles with twitter bootstrap

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

Page 27: Bootstrap your web styles with twitter bootstrap

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

Page 28: Bootstrap your web styles with twitter bootstrap

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

Page 29: Bootstrap your web styles with twitter bootstrap

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

Page 30: Bootstrap your web styles with twitter bootstrap

@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