Tim Carlson
I'm a lecturer at University of Washington
Responsive CSS and Frameworks
Tim Carlson
Spring 2026
View of the Day
Today we're going to try and wrap up CSS!
-
Project Draft 1
-
Q&A
-
Media Queries Demo (code together!)
-
Bootstrap Demo (code together!)
- Utility Classes
- Responsive Bootstrap
- Interactive Widgets
The policy for this course projects:
- ❌ Don't use AI tools for problem sets
- ✅ You can use AI tools for projects:
- ⚠️ AI can do the "first pass", but you do the debugging part
- Don't put code into the generator!
- ⚠️ You need to distinguish what work is the AI and what work is yours
- AI-supported code committed separately through git
- Written explanation of your human work ("project mastery reflection" assignment)
- ⚠️ AI can do the "first pass", but you do the debugging part
For full details, see the syllabus and the Gen AI in Projects Guidelines
Reminder: AI Policy
Updating Lecture Code
# switch to starter branch to get new starter code
git checkout starter
# download new starter code
git pull
# switch back to main branch for coding
git checkout main
# merge in new starter code (use default msg)
git merge starter --no-edit
# code and enjoy!Get the starter code from the starter branch, but do all of your work on main.
Q&A
Media Queries
Which of the following are important when designing websites for mobile devices?
Layout: e.g., stacking elements rather than having side by side
Media: having small (or no) images to reduce loading times
Fonts: making text large enough to read
Navigation: e.g., using a "hamburger menu" to take less space
Inputs: making sure buttons/icons are large enough to tap
Content: including mobile-specific content (e.g., tel:links)
Mobile-first design involves...
1. maintaining functionality when moving to limited devices (graceful degradation)
2. adding functionality when moving to super-capable devices (progressive enhancement)
In a mobile-first approach, a site's design and style (read:CSS) should have:
1. "normal" styling for desktops/laptops; media queries for mobile
2. "normal" styling for mobiles; media queries for desktops/laptops
In a CSS file, media queries should be written:
1. at the top of the file
2. in the middle of the file
3. at the bottom of the file
True or False: A media query can contain multiple rules?
1. true
2. false
Demo: Media Queries
Example: Analytics Report from the app I work on (yesterday)
Notice the percentages of mobile/desktop/tablet
Example: Analytics Reports from the app I work on (yesterday)
Notice broad use of browsers with high percent of chrome and safari
Example: Analytics Reports from the app I work on (yesterday)
Media Queries
Mobile web browsers will do some work on their own to adjust to large web pages by shrinking content to fit
- Page appears "zoomed out"
- Users enlarge page to read content
- It works, but it is not ideal
Viewport <meta>
Include the viewport meta element to allow your code to control responsive appearances (rather than the browser).
<head>
<meta charset="utf-8"> <!-- always need this -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- more head elements, including <link> ... -->
</head>Media Queries (CSS file)
Media Queries conditionally apply CSS rules much like an "if" statement
Applying a condition and rules (selectors and properties) that are applied when the condition is true.
If the width > 768px:
then apply these CSS Rules
You need to put full rules (including selector) inside the media query body
Media Queries (CSS file)
Last rule on page wins thus:
- Media queries specify conditional rules that override more general rules
- "Mobile first" would have general rules replaced with more features as screen size increases
Media Queries (CSS file)
Basic Recommended Structure:
- General selectors at top of CSS file with default mobile rules.
- Use media queries with increasing larger min-width values.
If CSS file is organized by section (header, body, footer). It's okay to modify:
- Section can have General selectors for specific section
- Media queries specific to section
- Move down to next section
Responsive Flexbox
With CSS media query turns to flexbox
block items, stacked by default
Basic HTML
Will turn to flexbox when width gets larger than 768px
Responsive Flexbox
Could add additional conditions:
At 768px it wraps with 2 columns
At 1200px all items will stay on the row if their size is less than with width of the parent
Bootstraps Media Queries breakpoints
CSS Frameworks
A CSS Framework is a collection of CSS rules published and made available for you to use. So rather than writing your own rules, you just use the ones provided to you.
Bootstrap is the oldest and most popular CSS framework. Created by Twitter in 2011.
Link the Framework
<head>
<!--... other elements here...-->
<!-- link Bootstrap -->
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<!-- link own stylesheets AFTER framework -->
<link rel="stylesheet" href="css/my-style.css">
</head>minified CSS file!
Add Bootstrap to your page by including a <link> to the CSS file. This is usually loaded from a Content Delivery Network (CDN) site.
CDN
Let's look at the file!
Non Minified version
Just by linking...
<head>
<!-- link Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/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
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 left and right of 2
padding of 3
Levels of size range from 0 to 5
Layout Containers
Components
Buttons, Cards, Carousel, Dropdowns, Navbar, Spinners, etc...
Button example
Form Controls
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
Responsive Utilities
Bootstrap has responsive versions of most utility classes. These class names include a infix indicating at which size (or larger) the styling should apply.
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:
Interactive Widgets
The Bootstrap framework provides some interactive "widgets" you can use without writing separate JavaScript code, just by using specific HTML attributes.
https://getbootstrap.com/docs/5.3/components
You will need to add Bootstrap's JavaScript code to your page by including a <script> tag in your <head>
<head>
<!-- include Bootstrap library (before your script!) -->
<!-- copy script tag from the Bootstrap home page -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
</head>Example: Collapsables
As a simple example, you can make an element "collapsable" so that it disappears with a button click!
<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>aria for screen-readers
Example: NavBar
See https://getbootstrap.com/docs/5.3/components/
navbar/#toggler for an example of a NavBar with a collapsible "hamburger menu"
Action Items!
-
Complete task list for Week 3 (all items)
Read: Chapter 10 -
Problem Set 03 due Wednesday
-
Problem Set 04 due Sunday
Next: JavaScript!
Project Draft 1
The complete HTML & CSS. A static "screenshot" of what your app will look like.
- Include all of your "pages"!
- Can include just a single example of a "details" page
- May need to copy/paste shared elements (navbars) for now
- Include all sections and components (forms, etc)
- Be clear what the user will "do" with your app -- where do instructions/etc go? What happens when they click a button?
- Buttons can just link to "after" versions for now
Project Draft 1
The complete HTML & CSS. A static "screenshot" of what your app will look like.
- Include all of your "pages"!
- Can include just a single example of a "details" page
- May need to copy/paste shared elements (navbars) for now
- Include all sections and components (forms, etc)
- Be clear what the user will "do" with your app -- where do instructions/etc go? What happens when they click a button?
- Buttons can just link to "after" versions for now
Project Draft 1
Working as a group:
- All group members are responsible for all aspects of the project. Projects are graded as a single piece of work.
- Do not divide up work by language -- everyone needs to contribute to both HTML and CSS
- Everyone needs to check everything. Don't think of it as "Jocelyn's page" or "Katie's page". It is your group's project
- Must use git to code collaboratively. We will be checking for commits from all group members.
- Each individual needs to demonstrate understanding of the material in their commits
info340sp26-css-responsive-frameworks
By Tim Carlson
