Downloaded 1,339 times
Uploaded byMatt Raible
38,442 views
Refreshing Your UI with HTML5, Bootstrap and CSS3
The document discusses methods for enhancing web user interfaces using HTML5, Bootstrap, and CSS3, highlighting best practices like minimizing HTTP requests and optimizing images. It introduces Bootstrap as a solution for responsive design with reusable components and offers insight into the challenges of web development across various browsers. Additionally, the document details design strategies for fluid layouts, typography, and form controls.
![Bootstrap [part 1]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fbootstrappart-11-170208154053-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
More Related Content
What's hot
Viewers also liked
Similar to Refreshing Your UI with HTML5, Bootstrap and CSS3
More from Matt Raible
Recently uploaded
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fcodedagentsdeck-251215155422-5497c599-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fvibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Refreshing Your UI with HTML5, Bootstrap and CSS3
- 1.Refreshing Your UIwith HTML5,Bootstrap and CSS3HTML5Denver April 22,2013Matt Raiblehttp://raibledesigns.com Photos by Trish McGinity
- 2.About Me#HTML5DenverWeb ArchitectureConsultantJava Community ProfessionalFather, Speaker, Beer LoverWhat Keeps me busyContact InformationSkiing, Mountain BikingThe BusAppFuseRaible Designswww: http://raibledesigns.comemail: matt@raibledesigns.comtwitter: @mraible2/96
- 3.Legacy DesignHaveyou workedwith an outdated design?
- 4.My Experience#HTML5DenverDecember 2011PageSpeed ProjectUI Refresh ProjectBootstrapLegacy Browsers4/96
- 5.Best Practices forSpeeding Up Your Web Site35 Total Rules → http://developer.yahoo.com/performance/rules.html#HTML5DenverMinimize HTTP RequestsUse a Content Delivery NetworkAdd an Expires or a Cache-Control HeaderGzip ComponentsPut Stylesheets at the TopPut Scripts at the BottomAvoid CSS ExpressionsMake JavaScript and CSS ExternalReduce DNS LookupsMinify JavaScript and CSSNo 404sAvoid RedirectsRemove Duplicate ScriptsConfigure ETagsMake Ajax CacheableFlush the Buffer EarlyUse GET for AJAX RequestsPost-load ComponentsSplit Components Across DomainsOptimize ImagesChoose <link> over @importMinimize the Number of iframes5/96
- 6.Page Speed Project#HTML5DenverYSlowServerRecommendationsSuggested Code ChangesStaging got a BProduction got an FEnable CompressionAdd Expires HeadersOptimizing Images (25% savings)Reduce HTTP RequestsJavaScript at BottomCombining JavaScript FilesCSS Image Sprites6/96
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.Themes with LESS:theme.less#HTML5Denver@import'@colors';a{color:@link}a:hover{color:@linkHover}.navbardiv>ul>li{border:1pxsolid@border;background-color:@navbarBackground;border-top:0;}.navbar-inner{border-top:1pxsolid@border;}CSS12/96
- 13.Themes with LESS:Ant#HTML5Denver<macrodefname="create-css"><attributename="theme"/><sequential><echomessage="CompilingLESSfiles::Creating'@{theme}'Theme"/><copydescription="Setupthemesforprocessing"todir="${build}/themes"><filesetdir="${basedir}/web/css/UIv9/themes"includes="@{theme}-colors.less"/></copy><concatdestfile="${build}/themes/@{theme}.less"eol="dos"force="no"><filesetdir="${basedir}/web/css/UIv9/themes"><includename="@{theme}-colors.less"/><includename="theme.less"/></fileset></concat><replacefile="${build}/themes/@{theme}.less"token="@import'@colors';"value=""/><wro4jprocessor="lessCss"dir="${build}/themes"todir="${basedir}/web/css/UIv9"target-groups="@{theme}"/><deletedir="${basedir}/web/css/UIv9"includes="**-colors.css"/></sequential></macrodef>XML13/96
- 14.Themes with LESS:Ant#HTML5Denver<macrodefname="wro4j"><attributename="processor"/><attributename="wro-file"default="wro.xml"/><attributename="target-groups"/><attributename="dir"/><attributename="todir"/><sequential><execexecutable="java"failonerror="true"><argvalue="-jar"/><argvalue="../common/lib-ext/wro4j-runner-1.4.4-jar-with-dependencies.jar"/><argvalue="--wroFile"/><argvalue="@{wro-file}"/><argvalue="--contextFolder"/><argvalue="@{dir}"/><argvalue="--targetGroups"/><argvalue="@{target-groups}"/><argvalue="--destinationFolder"/><argvalue="@{todir}"/><argvalue="-c"/><argvalue="@{processor}"/></exec></sequential></macrodef>XML14/96
- 15.Themes with LESS:Customizer#HTML5Denver 15/96
- 16.Browser Issues#HTML5DenverNo roundedcorners or gradients in legacy browsersUsed jQuery.IE9Gradius.js for IE9Had to add class="checkbox" to all checkbox labelsMany, many IE7 Issues: created ie7.css fileUsed { zoom: 1; position: relative }for negative top marginsUsed table-layout: fixedso td widths would workUsed position: fixedto fix nav width16/96
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.Today's Web Developer#HTML5DenverHTML5Canvas/ Semantics/ Storage / File Access / Audio / VideoCSS / 3JavaScriptServer Side LanguagesDBMSNOSQL DatabasesLESS / Sass / @font-face / Border Radius / Box ShadowjQuery / Plugins / MVC Frameworks / Server Side JS / CoffeeScriptColdFusion / Java / Groovy / PHP / Python / .NET / RubyOracle / SQL Server / MySQL / PostgreSQLCassandra / MongoDB / CouchDB / Amazon Simple DB22/96
- 24.Mobile Traffic willoutnumber desktop by 2014#HTML5Denver 24/96
- 25.
- 26.
- 27.Designing a differentinterface for everydevice is impossible.“”
- 28.BootstrapTheanswer to ourproblems.
- 30.What is Bootstrap?#HTML5DenverComponentsJavaScriptPluginsDozens of reusable componentsDropdownsNavbarBreadcrumbsAlertsProgress Bars13 pluginsModal Dialog WindowsTabsTypeaheadCarouselScaffoldingBase CSSLayoutsGrid SystemFluid Grid SystemResponsive DesignTypographyTablesFormsButtonsIcons30/96
- 31.Reasons To LoveBootstrap#HTML5DenverFor all skill levelsDocumentationCross EverythingLightweightResponsive Design13 JavaScript pluginsOpen SourceBuilt on LESS31/96
- 32.History of Bootstrap#HTML5DenverEarlyDays of TwitterReleasesPopularityMark OttoJacob Thorntonv 1.0 - 08/19/2011v 2.0 - 01/31/2012v 2.1.1 - 09/04/2012v 2.3.1 - 03/01/2013@twbootstrap 58.5K FollowersGitHub Stats48K Watchers14K Forks32/96
- 33.Getting StartedOverviewof theproject,itscontents,andhowto getstarted with asimpletemplate.
- 34.Getting Started#HTML5DenverDownloading BootstrapRequirementsStarterTemplatesSourceReady To GoCustomizeHTML5 DoctypeInclude bootstrap.cssBasic marketing siteFluid layoutStarter templateMore templates...34/96
- 35.ScaffoldingBootstrap isbuilton responsive12-columngrids,layouts,andcomponents.
- 36.
- 37.Layouts: Fluid Layout#HTML5Denver<divclass="container-fluid"><div class="row-fluid"><div class="span2"></div><div class="span10"></div></div></div>HTML37/96
- 38.Grid System#HTML5DenverBootstrap gridsystem is 12 columns / 940pxGrid adapts to be 724px and 1170px wide depending on your viewport.Below 767px viewports, the columns become fluid and stack vertically.<div class="row"><div class="span4">...</div><div class="span4">...</div><div class="span4">...</div></div>HTML38/96
- 39.
- 40.Responsive Design#HTML5DenverMedia QueriesModifythe width of column in our gridStack elements instead of float wherever necessaryResize headings and text to be more appropriate for devices40/96
- 41.
- 42.
- 43.Base CSSFundamental HTMLelementsstyled and enhanced with extensibleclasses.
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.Tables: Optional RowClasses#HTML5Denver 54/96
- 55.Forms#HTML5DenverFour LayoutsForm ControlsLook& FeelVertical (default)SearchInlineHorizontalInputText AreaCheckboxes & RadioSelectRelative Sizing (small/med/large/xlarge)Grid Sizing (span1/span2/span3/etc)55/96
- 56.Forms: Default Styles#HTML5Denver<form><legend>Legend</legend><label>Labelname</label><input type="text" placeholder="Type something…"><span class="help-block">Example block-level help text here.</span><label class="checkbox"><input type="checkbox"> Check me out</label><button type="submit" class="btn">Submit</button></form>HTML56/96
- 57.Forms: Horizontal#HTML5Denver<form class="form-horizontal"><divclass="control-group"><label class="control-label" for="inputEmail">Email</label><div class="controls"><input type="text" id="inputEmail" placeholder="Email"></div></div>...</form>HTML57/96
- 58.
- 59.
- 60.Form Controls: RelativeSizing#HTML5Denver<input class="input-mini" type="text" placeholder=".input-mini"><input class="input-small" type="text" placeholder=".input-small"><input class="input-medium" type="text" placeholder=".input-medium"><input class="input-large" type="text" placeholder=".input-large"><input class="input-xlarge" type="text" placeholder=".input-xlarge"><input class="input-xxlarge" type="text" placeholder=".input-xxlarge">HTML60/96
- 61.Form Controls: GridSizing#HTML5Denver<input class="span1" type="text" placeholder=".span1"><input class="span2" type="text" placeholder=".span2"><input class="span3" type="text" placeholder=".span3"><select class="span1"></select><select class="span2"></select><select class="span3"></select>HTML61/96
- 62.
- 63.Images#HTML5Denver<imgsrc="..."class="img-rounded"><imgsrc="..."class="img-circle"><imgsrc="..."class="img-polaroid">HTML.img-rounded and .img-circledo not work in IE7-8 due to lack of border-radius support.Image Placeholders http://placehold.it/63/96
- 64.Icons#HTML5Denver<iclass="icon-search"></i><iclass="icon-searchicon-white"></i><aclass="btnbtn-primary"href="#"><iclass="icon-usericon-white"></i>User</a><aclass="btnbtn-small"href="#"><iclass="icon-star"></i></a><spanclass="add-on"><iclass="icon-envelope"></i></span><inputclass="span2"id="inputIcon"type="text">HTMLFull List of140 Icons http://twitter.github.com/bootstrap/base-css.html#iconsCompressed using ImageOptim http://imageoptim.com/64/96
- 65.
- 66.Components#HTML5DenverDropdownsButton groupsButton dropdownsNavsNavbarBreadcrumbsPaginationLabelsand badgesTypographyThumbnailsAlertsProgress barsMisc66/96
- 67.
- 68.
- 69.
- 70.
- 71.
- 72.
- 73.
- 74.JavaScript for BootstrapBringBootstrap'scomponentsto life—nowwith 13custom jQueryplugins.
- 75.JavaScript Plugins: Overview#HTML5DenverAllplugins require the latest version of jQueryWhat Plugins do you need?Pluginsbootstrap.min.js (all)https://github.com/twitter/bootstrap/tree/master/jsTransitionsModalButton / DropdownTabTooltip / PopoverAlertCollapseCarouselTypeaheadScrollspy / Affix75/96
- 76.You can useall Bootstrap plugins purelythrough the markup API without writinga single line of JavaScript.“”
- 77.
- 78.
- 79.
- 80.
- 81.
- 82.JavaScript Plugins: Popover#HTML5Denver<ahref="#"class="btnbtn-largebtn-danger"rel="popover"data-content="Andhere'ssomeamazingcontent.It'sveryengaging.right?"data-original-title="ATitle">Clicktotogglepopover</a>HTMLSeeit in action http://twitter.github.com/bootstrap/javascript.html#popovers82/96
- 83.
- 84.What is LESS?#HTML5DenverMaintainableCSSDynamic BehaviorUsageVariablesMixinsNested ElementsOperationsFunctionsClient SideServer Side84/96
- 85.
- 86.
- 87.
- 88.Look & Feel#HTML5DenverBootstrapExpoBootswatchWrapBootstrapjQuery UI themeFont Awesomehttp://expo.getbootstrap.comhttp://bootswatch.comhttps://wrapbootstrap.comhttp://addyosmani.github.com/jquery-ui-bootstraphttp://fortawesome.github.com/Font-Awesome88/96
- 89.Bootstrap 3#HTML5DenverBootstrap 3will be mobile-firstOverhaul CSS transitions andreinforce with JavaScript transitionsas necessaryDropping IE7 and FF3.6 supportCombining standard and responsiveCSS into a single filerc.getbootstrap.com →github.com/twitter/bootstrap/pull/634289/96
- 90.SMACSSCategorizing CSS rulesallows us to see patterns and definebest practices around each pattern.1. Base2. Layout3. Module4. State5. Theme#HTML5Denver 90/96
- 91.SMACSS: Naming Rules#HTML5Denverhttp://smacss.comJonathanSnook @ HTML5 Denver: June 17, 2013!91/96
- 92.UI Refresh Project,1 Year LaterMobile Improvements#HTML5Denver/*Smartphones(portraitandlandscape)-----------*/@mediaonlyscreenand(min-device-width:320px)and(max-device-width:854px){body.mainPage.click-thru{padding:0;}}/*iPad(portraitandlandscape)-----------*/@mediaonlyscreenand(min-device-width:768px)and(max-device-width:1024px){body.mainPage.click-thru{padding-top:50px;}}CSS92/96
- 93.UI Refresh Project,1 Year LaterJavaScript PDF Viewer / Editor#HTML5Denver 93/96
- 94.UI Refresh Project,1 Year LaterMy Dashboard#HTML5DenverCharts and Widgets, Very VisualBuilt With:PDF Viewer: 200 lines HTML, 2300 lines of JavaScriptMy Dashboard: 300 lines HTML, 466 lines of JavaScriptAngularJSAngularUIAngularUI Bootstrap94/96
- 95.Resources#HTML5DenverMy PresentationsBootstrapSimilar FrameworksLESSCSSGoogle HTML5 SlidesDan Vega's Bootstrap 2 Presentationhttp://raibledesigns.com/rd/page/publicationsGitHub Project and Google GroupZurb Foundation and Compasshttp://lesscss.orghttp://code.google.com/p/io-2012-slideshttps://github.com/cfaddict/bootstrap295/96
- 96.<Questions?>twitter @mraiblewww raibledesigns.comgithubgithub.com/mraiblelinkedin linkedin.com/in/mraible