Skip to content

Instantly share code, notes, and snippets.

@ThomasWallace

ThomasWallace/css-module-starter.css

Last active February 2, 2026 18:54
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ThomasWallace/a47ce7514bfc17a4dac2b8c2656a0d6d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ThomasWallace/a47ce7514bfc17a4dac2b8c2656a0d6d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
css-module-starter.css
/* ---- This code should be saved in a file name style.css inside the assets > css folder inside the css-demo directory in your repository ---- */
/* ---- CSS Demo (Weeks 6–9) ---- */
/* ==============================
Week 6: Foundations
- Syntax, selectors, cascade
- Base typography + spacing
- Accessibility hooks (skip link + focus)
============================== */
/* ---------------Box Sizing----------------- */
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
/* --------------Utility Classes ---------------- */
.container {
width: 80vw;
max-width: 960px;
margin: 20px auto;
}
/* (Optional / legacy technique) Float utilities.
Keep for reference or remove if you won't teach floats in this module. */
.img-right {
float: right;
margin: 10px 0 10px 20px;
border: 2px double #cccccc;
padding: 5px;
}
.img-left {
float: left;
margin: 10px 20px 10px 0;
border: 2px double #cccccc;
padding: 5px;
}
.img-center {
display: block;
margin: 20px auto;
border: 2px double #cccccc;
padding: 5px;
}
/* Skip link utility: hidden until focused */
.visually-hidden {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
/* Make skip link visible when keyboard users tab to it */
.visually-hidden:focus,
.visually-hidden:focus-visible {
clip: auto;
height: auto;
width: auto;
margin: 0;
padding: 10px 14px;
position: absolute;
left: 10px;
top: 10px;
background: #ffffff;
color: #172635;
z-index: 9999;
border-radius: 6px;
}
/* --------------Responsive Images ---------------- */
img {
max-width: 100%;
height: auto;
display: block;
}
/*----------------Global Styles ------------------*/
body {
font-family: "Montserrat", sans-serif;
margin: 0;
line-height: 1.5;
}
/* Global focus (accessibility + UX) */
a:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* ==============================
Week 7: Box Model + Flexbox
- Header/nav layout
============================== */
header.primary {
background-color: #3b638b;
text-align: center;
text-shadow: 2px 2px #000000;
color: #ffffff;
/* Padding shorthand examples (lecture/demo)
padding-top: 40px;
padding-right: 40px;
padding-bottom: 40px;
padding-left: 40px;
padding: 40px;
padding: 20px 40px 20px 40px;
*/
/* Final applied padding */
padding: 20px 40px;
}
header.primary h1 {
font-size: 2.4rem;
margin: 20px 0 0 0;
}
header.primary h1 a {
color: #ffffff;
text-decoration: none;
}
header.primary p.subtitle {
font-size: 1.3rem;
letter-spacing: 0.2px;
margin: 10px 0 0 0;
}
/* Over-qualified selectors (intentional for practice) */
header.primary nav ul {
padding: 0;
display: flex;
flex-direction: row;
justify-content: space-around;
margin: 20px 0 10px 0;
}
header.primary nav ul li {
list-style-type: none;
}
header.primary nav ul a {
color: #ffffff;
padding: 5px 7.5px;
border-radius: 20px;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.4);
font-size: 0.9rem;
transition: 0.4s;
}
/* Keep selector consistency with the main link selector */
header.primary nav ul a:hover {
background-color: rgba(0, 0, 0, 0.8);
}
/* Ensure focus is visible over dark background */
header.primary nav ul a:focus-visible {
outline: 3px solid #ffffff;
outline-offset: 3px;
}
/* ==============================
Week 6/8: Content styling + hierarchy
============================== */
#content h2 {
color: #3b638b;
border-bottom: 1px dotted #000000;
}
/* ==============================
Week 7–8: Blog layout (Flexbox version)
- Use for Week 7/8; swap to Grid in Week 9
============================== */
#blog {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
gap: 20px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 20px auto;
}
#blog > h2 {
flex: 1 100%;
color: #3b638b;
border-bottom: 1px dotted #000000;
}
#blog .post {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
padding: 10px;
font-size: 0.9rem; /* bumped for readability */
flex: 1 30%;
}
#blog .post figure {
margin: 0;
}
#blog time.post-date,
#blog figcaption {
text-transform: uppercase;
font-size: 0.75rem;
}
#blog a {
color: #3b638b;
transition: 0.4s;
}
#blog a:hover {
text-decoration: none;
}
/* ==============================
Week 7–8: Sidebar (Flex layout inside container)
============================== */
aside {
background-color: #172635;
color: #ffffff;
padding: 40px 0;
}
aside .container {
display: flex;
flex-direction: row;
justify-content: space-around;
gap: 40px;
}
aside .container a {
color: #ffffff;
}
aside .container a:hover {
text-decoration: none;
}
aside .container a:last-child {
display: block;
text-align: right;
margin-top: 20px;
}
aside .widget footer {
display: none;
}
footer.primary {
background-color: #3b638b;
padding: 5px;
text-align: center;
font-weight: bold;
color: #ffffff;
}
/* ==============================
Week 9: Responsive + (optional) Grid swap
- Keep Flex for nav
- Make blog stack on small screens
============================== */
@media screen and (max-width: 540px) {
header.primary nav ul {
flex-direction: column;
gap: 10px;
}
header.primary nav ul a {
display: block;
}
/* Only blog is a flex container in the base rules */
#blog {
flex-direction: column;
}
.container {
width: 100%;
margin: 20px auto;
padding: 20px;
}
aside .container {
flex-direction: column;
}
}
/* ==============================
Week 9 OPTIONAL: Switch #blog to Grid at larger screens
- Uncomment this block during Week 9 to create the Flex vs Grid "aha"
============================== */
/*
@media screen and (min-width: 900px) {
#blog {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 20px;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 20px auto;
}
#blog > h2 {
grid-column: 1 / -1;
color: #3b638b;
border-bottom: 1px dotted #000000;
}
#blog .post {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
padding: 10px;
font-size: 0.9rem;
}
}
*/
Raw
css-module-starter.html
<!-- This code should be saved in a file name index.html in the css-demo directory in your repository-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>IFSC 11003 - Prototype</title>
<meta charset="UTF-8" />
<meta name="description" content="Keyword rich narrative on site purpose" />
<meta name="author" content="Student Name" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Style Sheet -->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<a class="visually-hidden" href="#main-content">Skip to main content</a>
<header class="primary">
<h1><a href="index.html">Building the Modern Web</a></h1>
<p class="subtitle">HTML5, CSS, JavaScript Fundamentals</p>
<nav class="primary container" aria-label="Primary">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
</header>
<!-- Main landmark gives you a clean selector target for weeks 6–9 -->
<main id="main-content" class="container">
<section id="content">
<h2>Introduction to Web Design</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta laudantium laboriosam veritatis optio adipisci consectetur. Aliquid omnis odit rem, neque accusantium obcaecati debitis laudantium repellendus temporibus assumenda aperiam provident ex officia suscipit voluptatum, aspernatur adipisci hic, dicta unde? Incidunt velit maiores repellendus, quos fugiat amet ducimus reiciendis cum ratione expedita at ex eos. Architecto consectetur numquam iure dolore earum quo inventore quam facere praesentium amet quae, modi hic atque voluptatibus, aut sed aperiam ipsam accusantium.
</p>
</section>
<section id="blog" aria-labelledby="recent-posts">
<h2 id="recent-posts">Recent Posts</h2>
<article class="post">
<header>
<time class="post-date" datetime="2026-01-01">January 1, 2026</time>
<figure>
<img src="https://placehold.co/300x200" alt="Placeholder image" />
<figcaption>Image Caption</figcaption>
</figure>
<h3><a href="#" rel="bookmark">Article Title</a></h3>
</header>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea placeat porro esse sit iusto exercitationem provident? Inventore, aliquam temporibus? Nisi minima mollitia, ex optio alias aperiam vitae omnis nulla molestias!
</p>
<footer class="post-meta">
Posted by <a href="#">Post Author</a>
</footer>
</article>
<article class="post">
<header>
<time class="post-date" datetime="2026-01-01">January 1, 2026</time>
<figure>
<img src="https://placehold.co/300x200" alt="Placeholder image" />
<figcaption>Image Caption</figcaption>
</figure>
<h3><a href="#" rel="bookmark">Article Title</a></h3>
</header>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea placeat porro esse sit iusto exercitationem provident? Inventore, aliquam temporibus? Nisi minima mollitia, ex optio alias aperiam vitae omnis nulla molestias!
</p>
<footer class="post-meta">
Posted by <a href="#">Post Author</a>
</footer>
</article>
<article class="post">
<header>
<time class="post-date" datetime="2026-01-01">January 1, 2026</time>
<figure>
<img src="https://placehold.co/300x200" alt="Placeholder image" />
<figcaption>Image Caption</figcaption>
</figure>
<h3><a href="#" rel="bookmark">Article Title</a></h3>
</header>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ea placeat porro esse sit iusto exercitationem provident? Inventore, aliquam temporibus? Nisi minima mollitia, ex optio alias aperiam vitae omnis nulla molestias!
</p>
<footer class="post-meta">
Posted by <a href="#">Post Author</a>
</footer>
</article>
</section>
</main>
<aside aria-label="Sidebar">
<div class="container">
<article class="widget">
<header>
<h2>Sample Sidebar Item</h2>
</header>
<p>
Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula...
<a href="#">Read More &raquo;</a>
</p>
<footer>Widget Footer</footer>
</article>
<article class="widget">
<header>
<h2>Sample Sidebar Item</h2>
</header>
<p>
Quisque justo erat, varius placerat fermentum vel, iaculis vel ligula...
<a href="#">Read More &raquo;</a>
</p>
<footer>Widget Footer</footer>
</article>
</div>
</aside>
<footer class="primary">
<p>&copy; 2026 Your Name</p>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment