Tim Carlson
I'm a lecturer at University of Washington
CSS Frameworks
Tim Carlson
Plan for Today
-
Review Time
-
CSS Frameworks (Bootstrap)
Project: Draft 1 (Static Mock-Up)
Objective: Use HTML & CSS to design a static version of your app
- make a "screenshot" of the main feature using code!
Requirements:
- Built from scratch using HTML & CSS
- Can use Bootstrap, but need to include own CSS too
- Can look at examples, but need to make project yourself
-
Accessible and responsive
- Works with screen readers
- Have notable design differences b/w mobile and desktop
-
Polished and engaging
- looks good; uses CSS effects (parallax, transitions, etc).
Questions
Reminder: What size are em and rem?
They are relative sizes calculated
- EM: From the Parent
- REM: From the Root
Thing B = 50 x .5 = 25px
Thing C = 40 x 1 = 40px
Index.html
style.css
Other questions...
Project Phase 1:
- How much commenting should we do in the code?
- How many lines of code should phase 1 include?
- Can we use bootstrap?
- Do I have to implement the topic I chose from the proposal?
- When to use class vs ids vs tags
Demo
Link the Framework
<head>
<!--... other elements here...-->
<!-- link Bootstrap -->
<!-- CSS only -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
<!-- link own stylesheets AFTER framework -->
<link rel="stylesheet" href="css/my-style.css">
</head>minified CSS file!
Just by linking...
<head>
<!-- link Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- link own stylesheets AFTER framework -->
<link rel="stylesheet" href="css/my-style.css">
</head>Before
After
Utility Classes Colors
Bootstrap provides rules that apply to particular classes. Give an element that class in order to style it in a certain way.
Utility Classes - Spacing
Utility Classes - Spacing
margin top of 0
margin side of 1
padding on x and y of 2
padding of 3
Levels of size range from 0 to 5
Components
Buttons, Cards, Carousel, Dropdowns, Navbar, Spinners, etc...
Button example
Form Controls
Layout Containers
Utility Classes - Display
Utility Display Classes
Example:
Syntax
The media queries effect screen widths with the given breakpoint or larger.
Utility Classes
We tend to write the responsive utility classes left to right:
<div class =d-none d-sm-block d-md-none">
Within the HTML brackets '<' '>' the order doesn't matter. Bootstrap has the media query ordered in the CSS file smallest to largest.
Make sure to put link your stylesheet further down in the html file than bootstrap to override bootstrap classes
Bootstrap Grids
row
row
column
column
column
Grid Columns
There are 12 columns in the grid
Elements can take up many columns
Row 1:
Row 2:
Row 3:
Specify columns based on screen-size
Smaller screen display
A Row:
Example Grid Row
Text
- On small screens all 5 items have default of (12/6) 2 columns
- On medium screens, Thing A, C, D and E would each take up (4/12) 1 third of a row. Thing B would take a row to itself
- On large screens, Thing A, B, C and D each take up (3/12) 1 fourth of a row. Thing E still takes up (4/12) 1 third of a row
Interactive Widgits
The Bootstrap framework provides some interactive "widgets" you can use without writing separate JavaScript code, just by using specific HTML attributes.
Example: Collapsables
<button class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user clicks the toggler.
</div>As a simple example, you can make an element "collapsable" so that it disappears with a button click!
Example: Collapsables
<button class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user clicks the toggler.
</div>As a simple example, you can make an element "collapsable" so that it disappears with a button click!
Example: Collapsables
<button class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user clicks the toggler.
</div>As a simple example, you can make an element "collapsable" so that it disappears with a button click!
Example: Collapsables
<button class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user clicks the toggler.
</div>As a simple example, you can make an element "collapsable" so that it disappears with a button click!
Example: Collapsables
<button class="btn btn-primary"
data-bs-toggle="collapse"
data-bs-target="#collapseExample"
aria-expanded="false" aria-controls="collapseExample">
Button with data-bs-target
</button>
<div class="collapse" id="collapseExample">
Some placeholder content for the collapse component. This panel is
hidden by default but revealed when the user clicks the toggler.
</div>As a simple example, you can make an element "collapsable" so that it disappears with a button click!
aria for screen-readers
Example: NavBar
See https://getbootstrap.com/docs/5.1/components/
navbar/#toggler for an example of a NavBar with a collapsible "hamburger menu"
Action Items!
-
Read: through Chapter 10
-
Now is a good time to catch up
-
-
Problem Set 04 due Wednesday
-
Start thinking about project appearance/design
-
Will work with that in lab next week
-
Next: JavaScript
info340b-sp22-css-frameworks
By Tim Carlson
