take your site from ugh to ooh with bootstrap · take your site from ugh to ooh with bootstrap ......

Philip Japikse (@skimedic)

[email protected]

www.skimedic.com/blog

Microsoft MVP, ASPInsider, MCSD, MCDBA, CSM, CSP

Consultant, Coach, Trainer

TAKE YOUR SITE FROM UGH TO OOH WITH

BOOTSTRAP

➢Consultant, Coach, Author, Teacher

➢Lynda.com (http://bit.ly/skimediclyndacourses)

➢Apress.com (http://bit.ly/apressbooks)

➢Microsoft MVP, ASPInsider, MCSD, MCDBA, CSM, CSP

➢Founder, Agile Conferences, Inc.

➢http://www.dayofagile.org

➢President, Cincinnati .NET User’s Group

Phil.About()

The Cincinnati Day of Agile/Cincy.Develop()

• The annual Cincinnati Day of Agile builds on successful events from past years to present a conference to both introduce those new to Agile and encourage stimulating conversation for those more advanced in the subject.

• Event takes place Friday, July 28, 2017 in West Chester, OH

• Sponsors • If you are interested in sponsoring, please contact Phil at [email protected] for more

information.

• Mailing List• If you would like to be added to our mailing list, please email us at [email protected]

with subscribe as the subject.

WHAT IS BOOTSTRAP?

OPEN SOURCE HTML, CSS, AND JAVASCRIPT F/W

➢Helps to make responsive, device independent sites

➢Designed for all skill levels, from developers to designers

➢Theme-able – large collection of free and apy themes that plug right in

➢Awesomely documented

➢Available at http://getbootstrap.com

“Bootstrap easily and efficiently scales your websites and applications with a

single code base, from phones to tablets to desktops with CSS media queries.”

➢Download from here:

http://getbootstrap.com/getting-started/

➢Compiled & Minified

➢LESS Source

➢Sass Source

➢CDN at maxcdn.bootstrapcdn.com

➢bower – bower install bootstrap

➢npm – npm install bootstrap

➢composer – composer require

twbs/bootstrap

➢NuGet – Install-Package bootstrap -

Version 3.3.5

GETTING BOOTSTRAP

BOOTLINT

(function () {var s = document

.createElement("script");s.onload = function () {

bootlint.showLintReportForCurrentDocument([]);

};s.src =

"https://maxcdn.bootstrapcdn.com/bootlint/latest/bootlint.min.js";

document.body.appendChild(s)})();

➢Checks for errors in BootStrap

implementation

➢Available here:

➢https://github.com/twbs/bootlint

➢npm install –g bootlint

➢Or use CDN

https://github.com/twbs/bootlint

THE BARE MINIMUM<html lang="en">

<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible"

content="IE=edge"><meta name="viewport" content="width=device-

width, initial-scale=1">

<title>Bootstrap Template</title><link href="css/bootstrap.min.css"

rel="stylesheet"></head>

<body><h1>Hello, world!</h1><script src=“./js/jquery-2.1.4.min.js"></script><script src=“./js/bootstrap.min.js"></script>

</body></html>

➢HTML5 DocType

➢Viewport meta tag

➢Enables proper rendering and touch zooming

➢Disable zooming:maximum-scale=1, user-scalable=no

➢Bootstrap.min.css

➢JQuery-2.x.min.js

➢Bootstrap.min.js

➢Sets up HTML for responsive

➢Updates core settings:

➢Sets body background-color: #fff;

➢Sets global link color via @link-color

➢Applies link underlines only on :hover

➢Sets Font settings:

➢font-family: Helvetica Neue, Helvetica,

Arial, sans-serif;

➢font-size: 14px;

➢line-height: 1.42857;

➢<p> Bottom margin: 10px

WHAT DOES THIS DO?

TEXT EFFECTS

➢Stylistic updates to common tags

➢Includes:

➢Highlights

➢Delete/Strikethrough

➢Inserted/Underlined

➢Bold/Strong

➢Alignment

➢Caps

➢And more…

➢Contextual Colors

HELPER CLASSES

➢Provide mechanism for:

➢Coloration

➢Close icon

➢Carets

➢Showing/hiding content

➢Screen readers

➢Image replacement

➢Floats

Helpers1

GRID SYSTEM

➢Responsive system containing up

to 12 columns

➢Housed in Container/Rows

➢ Moves to stacked on smaller

viewports

➢Use Offset for more specific

placement

➢Use Push/Pull for ordering

➢Can be nested

Page

RESPONSIVE UTILITIES

➢Used to Show/Hide items based

on viewport size

➢Essential to making your site

responsive

➢Print classes available as well

ScrollspySetup

IMAGES

➢Classes to work with images

➢Responsive

➢Fills available space

➢Rounded corners, circular

Doctors1

BUTTONS AND LINKS

➢Easily format buttons

➢Colors

➢Size

➢Active/default

➢Disabled

➢Can also format links as buttons

ButtonsFinal

TABLES

➢Makes tables modern and

responsive

➢.table

➢.table-striped

➢.table-bordered

➢.table-hover

➢.table-condensed

➢.table-responsive

➢Can also use contextual classes

Tables1

FORMS & INPUT GROUPS

➢Use .form-control on input

elements

➢Wrap label and input in .form-

group

➢Input Groups combine controls

➢Use Validation States for

context

➢Can also use Feedback Icons

Forms1 / Forms2

COMPONENTS

JUMBOTRONS, PAGE HEADERS, AND WELLS

➢Used to showcase info such as

titles

➢In a container, centered with

rounded corners

➢Outside, full screen, square

corners

JunbotronFinal

PANELS

➢Create a box for your content

➢Content goes in panel-body

➢Optional:

➢panel-heading

➢panel-title

➢panel-footer

➢Add contextual colors with

➢primary/success/info/warning/

danger

Doctors2

NAVIGATION

➢Nav Bars

➢Responsive

➢Top, Bottom, L/R Side

➢Static/Fixed

➢Inverse

Menu1

➢Highlight numbers in content

➢Buttons, Links, Text

➢<span class=“badge”>42</span>

➢Automatically inverses based on

container

➢Over 250 icons included in BS

➢Use them in empty <span> tags

GLYPHICONS & BADGES

Glyphicons Badges

MenuFinal / Tables2 / DoctorsFinal

TABS AND PILLS

<ul class="nav nav-tabs || nav-pills">

<li role="presentation" class="active">

<a href="#">Home</a></li><li role="presentation"><a href="#">Profile</a></li>

<li role="presentation"><a href="#">Messages</a></li>

</ul>

➢Extension of Nav classes

➢Tabs, Pills

➢Justified uses entire width

➢Pills can stack vertically with

.nav-stacked

Helpers1

PAGINATION

➢Leverage your ORM (EF) to add

pagination

➢Use .pagination for navigation

➢.active for current page

➢Remove link

➢.disabled for invalid entries

➢Use .pager for Previous/Next

➢.previous left aligns

➢.next right aligns

TablesFinal

PROGRESS BARS

➢Provide visual feedback on status

➢Show with or without lables

➢Supports striping

➢With/without animation

➢Supports stacking

➢Supports contextual classes

ProgressBars1 / ProgressBarsFinal

JAVASCRIPT

CAROUSELS

➢Generally not ADA compliant

➢Contain text and/or images

➢Indicators determine scroll order

➢Available carousel controls for

manual navigation

➢Note: One slide must be

marked active

CarouselFinal

TOOLTIPS/POPOVERS

➢Tooltips

➢Triggered on hover

➢Meant for short bits of text

➢Popovers

➢Triggered on click (in/out)

➢Used for small overlays of content

➢Both

➢Can be bottom/top/left/right aligned

➢Must “opt-in”

TooltipsFinal

MODALS

➢Streamlined popups with smart

functionality

➢Adds functionality without moving

user from main page

➢Controlled through HTML5 or JS

➢Be careful to not overuse them in

your app…

FormsFinal

COLLAPSE / ACCORDION

➢Collapse

➢Shows/Hides content

➢Targets single piece of content

➢Triggered on click

➢Accordian

➢Extends Collapse with panel

HelpersFinal

SCROLL SPY

➢Updates Nav targets based on

scroll position

➢Sets target to .active

➢Requires

➢BootStrap nav component

➢Relative positioning on spy

target

➢Should check offset

➢Data-offset of JS call

Questions?

[email protected]

www.skimedic.com/blog

www.twitter.com/skimedic

http://bit.ly/skimediclyndacourses

http://bit.ly/apressbooks

www.hallwayconversations.com

Contact Me

take your site from ugh to ooh with bootstrap · take your site from ugh to ooh with bootstrap ......

Documents