CREATING RESPONSIVE WEB PAGES WITH BOOTSTRAP 3

  • Published on
    05-Jan-2017

  • View
    216

  • Download
    2

Embed Size (px)

Transcript

  • CREATING RESPONSIVE WEB PAGES WITHBOOTSTRAP 3

    Dana OuelletteInformation Services Librarian

    Concordia University College of Alberta

  • WHAT I WILL COVERResponsive DesignWhy Bootstrap?

    My circuitous discovery of BootstrapFeatures of BootstrapGetting started with BootstrapEpic Fail!!/lessons learned

  • RESPONSIVE DESIGNDesign philosophyBest possible user interface regardless of screen size

    One site for every screenNot really achievable until 2012

    W3C recommendation of CSS3 media queriesHTML5

    Oops I missed that boat! Why did I launch a site in 2013?

  • WHAT IS BOOTSTRAP?Front End FrameworkBasically just CSS and JSCreated by Twitter for Consistency in internal projectsAs bootstrap 2 has supported responsive design grids

  • WHY BOOTSTRAP?Mobile-first responsive designEasy to use

    Even for the non-developerPerfect for small colleges without much IT support

    ConsistencyComplex responsive features and Javascript features withonly basic knowledge of html and css

  • MY CIRCUITOUS DISCOVERY OF BOOTSTRAPAccessyyt 2013CRDBNeeded consistancyModern login forms

  • OLD FORM

  • NEW FORM

  • FEATURESLet's check out the features visually on the

    bootstrap website

    http://getbootstrap.com/examples/theme/

  • FEATURESExcellent documentationEasy to follow examplesEasy copy and paste template

    http://getbootstrap.com/components/#navbarhttp://getbootstrap.com/getting-started/#exampleshttp://getbootstrap.com/getting-started/#template

  • USING BOOTSTRAPDownload bootstrapSet up site in the same directory

  • HEADERThe essentials

  • LINK TO CSS AND JS FILESbetween head tags

    In the footer

  • LETS GIVE IT A QUICK TRYhttp://getbootstrap.com

    http://getbootstrap.com/

  • GRID SYSTEM12 column grid systemUse divs with a class formated like .col-*size-*width in columsSizes are: xs, sm, md, lgNumber in each row must add up to 12

  • IT'S HARD TO EXPLAIN LETS TAKE A LOOK

  • FAIL/LESSONS LEARNEDIf it's so easy, why isn't our library site responsiveMobile first responsive requires complete redesignYou can't just use bootstrap as new skin over an old site

    learned that one the hard wayLook at my fail

    http://library.dev.concordia.ab.ca/

  • QUESTIONS?dana.ouellette@concordia.ab.ca

Recommended

View more >