take your site from ugh to ooh with bootstrap · take your site from ugh to ooh with bootstrap ......
TRANSCRIPT
Philip Japikse (@skimedic)
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.
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
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"><!-- The above 3 meta tags *must* come first in
the head; any other head content must come *after* these tags -->
<title>Bootstrap Template</title><!-- Bootstrap --><link href="css/bootstrap.min.css"
rel="stylesheet"></head>
<body><h1>Hello, world!</h1><!-- content here --><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
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
➢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
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
www.skimedic.com/blog
www.twitter.com/skimedic
http://bit.ly/skimediclyndacourses
http://bit.ly/apressbooks
www.hallwayconversations.com
Contact Me