RESPONSIVE

Frameworks
DESIGN

Frameworks
 RESPONSIVE
Frameworks
DESIGN

Frameworks
• The term “web framework” can mean many things, it depends
upon who you ask.
• Agreement, a framework should make your job easier by
providing code and structure.
 RESPONSIVE
Frameworks
DESIGN

What does “framework” mean here?

• Front-end developers
○ CSS, JavaScript, jQuery
• Back-end developers
○ Routing, resources, security
 RESPONSIVE
Frameworks
DESIGN

Popular front-end frameworks

• Bootstrap (2011)
○ Its popularity makes it…. popular
 RESPONSIVE
Frameworks
DESIGN

What it means for you

• Many people build their sites directly from templates.
• Others use their own code and add functionality.
• Even “pure” coders should know the basics of one popular
framework
 RESPONSIVE
Frameworks
DESIGN

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
 RESPONSIVE
Introduction to Bootstrap DESIGN

Introduction to Bootstrap
 RESPONSIVE
Introduction to Bootstrap DESIGN

What is it?
• Framework for creating web sites
• Focuses on responsive, mobile-first approach
• Consists of
○ CSS and HTML templates
○ JavaScript extensions
• Emphasis on interfaces and layouts
 RESPONSIVE
Introduction to Bootstrap DESIGN

Who uses it?

• Many popular sites are (or were) built using Bootstrap
○ nba.com

○ target.com

○ walmart.com

○ codeacademy.com

○ bloomberg.com

○ airbnb
 RESPONSIVE
Introduction to Bootstrap DESIGN

Bootstrap benefits
• 12-column grid system
○ Helps with spacing issues
○ Built-in responsive design
• Common jQuery functionalities
○ Accordion, Drop-down menus, Carousel
• Familiar “look and feel”
○ Many sites use Bootstrap
○ Makes your forms look “legitimate”
 RESPONSIVE
Introduction to Bootstrap DESIGN

Why you should use it

• Fast development
• Platform Independent
• Responsive by default
• Customizable
 RESPONSIVE
Introduction to Bootstrap DESIGN

Why you shouldn’t use it….

• Doesn’t follow best practices
○ Content and layout are intertwined
○ CSS frameworks and semantics
• Can be resource-heavy
• The look is somewhat generic
○ This can be good or bad.
 RESPONSIVE
Introduction to Bootstrap DESIGN

What we will cover

• There are two ways to use Bootstrap
○ As a supplement to your style
○ As a theme that you expand upon
• We will talk about some of the basics, but there are still many
parts left untouched.
• It is important to test often when using code that isn’t yours.
 RESPONSIVE
Introduction to Bootstrap DESIGN

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
Getting Started With Bootstrap 3 Responsive Design

Getting Started With Bootstrap 3

Getting Started With Bootstrap 3 Responsive Design

Getting Started
• How do you actually use Bootstrap?
• You need access to the CSS code and JS code.
• Options:
○ Download copy
○ Use absolute reference
○ Link on CodePen
Getting Started With Bootstrap 3 Responsive Design

Saving your own copy of Bootstrap

• You can download a copy of Bootstrap at
http://getbootstrap.com
• Use the default values or select
http://getbootstrap.com/customize/
• Make sure you know where you saved your files!
Getting Started With Bootstrap 3 Responsive Design

Using a CDN
• A CDN is a content delivery network
• Provides a way to connect to the Bootstrap code using an
absolute reference
• http://getbootstrap.com/getting-started/
Getting Started With Bootstrap 3 Responsive Design

Using Bootstrap with CodePen

• You can add Bootstrap to CodePen in the Settings.
• Select Settings  CSS  Add external CSS
Getting Started With Bootstrap 3 Responsive Design

Template
● It is common to start with a template file.
http://getbootstrap.com/getting-started/#examples
● A modified version from getbootstrap.com can be found here:
RD:Bootstrap Template
Getting Started With Bootstrap 3 Responsive Design

How do you know it is working?

• For such a simple file, it may be hard at first to see if it is
working.
• To test:
• Comment out link to css
• Use Inspect Element
■ This method is definitely preferred, particularly as
you start to add your own styles.
Getting Started With Bootstrap 3 Responsive Design

Don’t forget…
• To use element inspector.
• To include the JavaScript at the bottom.
• That you can customize bootstrap defaults.
• That you can overwrite bootstrap defaults.
Getting Started With Bootstrap 3 Responsive Design

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
 RESPONSIVE
Bootstrap Grid System
DESIGN

Bootstrap Grid System

 RESPONSIVE
Bootstrap Grid System
DESIGN

It’s not a table….

• The Bootstrap layout is based on a 12 column grid
12 columns = 100% 6 columns = 50%
9 columns = 75% 3 columns = 25%
 RESPONSIVE
Bootstrap Grid System
DESIGN

Grid classes
• Every grid consists of:
○ A container

■ A row

● One or more column classes

<div class= “container”>
<div class= “row”>
<div class= “col-xx-yy”>
 RESPONSIVE
Bootstrap Grid System
DESIGN

Setting width with col-xx-yy

• The class col-xx-yy always starts with “col”
• The “xx” component is the viewport size:
○ xs, sm, md, lg
• The “yy” component is the number of columns 0..12
 RESPONSIVE
Bootstrap Grid System
DESIGN

col-xx-yy
• col-xs-12
• col-sm-8
• col-md-4
• col-lg-3
• These are often combined! Think photos….
<img src = “pic.jpg” class=“col-xs-12 col-sm-6
col-md-3 col-lg-2”>
 RESPONSIVE
Bootstrap Grid System
DESIGN

Using Bootstrap
• Using the classes….

col-XX-12 col-XX-9 col-XX-6 col-XX-3

 RESPONSIVE
Bootstrap Grid System
DESIGN

Combining elements
• What if you want two elements next to each other, but only
on larger screen?
<div class=“col-xs-12 col-md-3”>Yellow Part</div>
<div class=“col-xs-12 col-md-8”>Orange Part</div>
 RESPONSIVE
Bootstrap Grid System
DESIGN

But it is actually easier than that…

• Because Bootstrap is mobile first, there is no need to specify
the twelve columns if the element is block.

<div class=“col-xs-12 col-md-3”>Yellow Part</div>

<div class=“col-md-3”>Yellow Part</div>
 RESPONSIVE
Bootstrap Grid System
DESIGN

Positioning classes
• On viewports md and up, there is an option for push and pull
class.
○ col-XX-push-YY  move YY columns to the right
○ col-XX-pull-YY  move YY columns to the left
 RESPONSIVE
Bootstrap Grid System
DESIGN

Responsive utility classes

• hidden-XX content will only be hidden on the XX screen size
• visible-XX content will only be visible on the XX screen size
• sr-only content is hidden on all devices except screen readers
 RESPONSIVE
Bootstrap Grid System
DESIGN

Conclusion
• Bootstrap is mobile first, larger screens inherit values from
smaller screens.
• Review http://getbootstrap.com/examples/grid/
• Do the math!! If you want two elements to be next to each
other on a larger screen, make sure their width adds up to no
more than 12.
 RESPONSIVE
Bootstrap Grid System
DESIGN

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
 Responsive Design
Bootstrap Navigation

Bootstrap Navigation
 Responsive Design
Bootstrap Navigation

Navigation Bars
• One of the components that gives Bootstrap its familiar “look
and feel” is the navigation options.
• The nav class is combined with other classes to create each
style
 Responsive Design
Bootstrap Navigation

Making a navigation bar

• Decide what type of links you want:
○ nav-tabs vs nav-pills
RD:nav-tabs
RD: nav-pills
• Decide on layout (horizontal, stack, justified, etc.)
• nav-stacked, nav-justified
 Responsive Design
Bootstrap Navigation

Drop downs
• To add dropdown menus you need to include the Bootstrap
js files AND a link to the jQuery.
• Bootstrap
example:http://getbootstrap.com/components/#pills-with-
dropdowns
RD:dropdowns
 Responsive Design
Bootstrap Navigation

navbar class
• The navbar class serves as a navigation header
for your application or site.
• Positioning includes:
■ navbar-static-top
■ navbar-fixed-top
■ navbar-fixed-bottom
RD:navbar
 Responsive Design
Bootstrap Navigation

Accessibility
• Using a “nav” class does not convey semantics.
• Use the <nav> tag or ARIA attribute role=“navigation”.
 Responsive Design
Bootstrap Navigation

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.
 RESPONSIVE
Closing DESIGN

Closing
 RESPONSIVE
Closing DESIGN

What Have We Covered?

● Write basic CSS rules for styling.
● Utilize tools to check our CSS (Inspect Element, Wave, etc).
● Use fluid measurements.
● Write media queries for different screen sizes.
 RESPONSIVE
Closing DESIGN

What Else?
● Write rules to facilitate accessibility with motion and color
scheme preferences.
● Discuss the importance of the mobile-first paradigm.
● Understand the grid system of Bootstrap.
 RESPONSIVE
Closing DESIGN

What Next?
● More practice until you feel more comfortable.
● Look more into frontend frameworks, eg React, Angular, etc.
● Explore accessibility in more depth.
● Use your knowledge to help elevate existing team projects.
 RESPONSIVE
Closing DESIGN

Congratulations!
● You can also take a moment to be proud of yourself.

Great job!
 RESPONSIVE
Closing DESIGN

© Colleen van Lent

University of Michigan
School of Information

Unless otherwise noted, this work is licensed under the

CC BY-NC 4.0 license.