Color Mode

Team Project: Multi-File CSS Architecture

In this team project, you will apply the CSS architecture principles, design patterns, and organizational strategies you have learned to build a professional multi-page website. Working collaboratively, your team will transform a scaffolded project with intentionally poor design into a polished, well-organized CSS codebase following CUBE CSS principles and ITCSS-inspired file organization.

This project emphasizes collaboration, code organization, and modern CSS techniques. Each team member will be responsible for specific parts of the CSS architecture, and you will need to coordinate your work to create a cohesive final product. The HTML structure and basic JavaScript are provided so you can focus entirely on the CSS implementation.

Project Overview

You will receive a starter project containing a four-page website (Home, About, Services, Contact) with complete HTML markup and a CSS file structure that follows CUBE CSS and ITCSS principles. However, the current implementation has several intentional problems:

Your team's job is to fix these issues by implementing a cohesive design system while maintaining the organized file structure. This project will serve as a foundation that you can continue building upon in future assignments, so establishing good architectural patterns now will benefit you throughout the course.

Learning Objectives

By completing this project, you will demonstrate your ability to:

Project Structure

The starter project includes the following file structure. Your team will be working primarily in the CSS files, which are organized following CUBE CSS principles combined with ITCSS layering: 


        team-project/
        ├── css/
        │   ├── base/
        │   │   ├── reset.css
        │   │   ├── colors.css
        │   │   ├── variables.css
        │   │   └── typography.css
        │   ├── layouts/
        │   │   ├── container.css
        │   │   ├── grid.css
        │   │   └── stack.css
        │   ├── components/
        │   │   ├── header.css
        │   │   ├── footer.css
        │   │   ├── nav.css
        │   │   ├── button.css
        │   │   ├── card.css
        │   │   └── form.css
        │   ├── utilities/
        │   │   └── utilities.css
        │   └── main.css
        ├── js/
        │   └── theme.js
        ├── index.html
        ├── about.html
        ├── services.html
        └── contact.html
Understanding the File Organization

This structure follows CUBE CSS principles where styles are organized by their purpose and specificity. The base directory contains global settings and resets, layouts contains compositional patterns for arranging elements, components contains styled blocks, and utilities contains single-purpose classes for quick adjustments.

The main.css file imports all other CSS files using @import statements and organizes them into cascade layers using @layer. This ensures styles cascade in the correct order regardless of specificity.

Provided Files

Several files are provided complete or partially complete to help you get started:

Complete Files (Do Not Modify)

The following files are provided complete and should not be modified by your team:

Files Requiring Fixes

These files have intentionally poor values that need to be replaced with a cohesive design system:

Empty Files to Build

The following files are empty or contain only skeleton structure. Your team will build these from scratch:

Team Tasks

Your team should divide the work into six primary tasks. Teams with fewer than six members can skip the optional tasks without penalty, but all core tasks must be completed. Coordinate with your team to decide who will handle each task, and communicate regularly to ensure your work integrates smoothly.

1.Design System Foundation (Core)

Fix the design tokens in colors.css and variables.css to establish a professional design system. This task is critical because all other team members will depend on these variables for their work.

Responsibilities:

Until this task is completed, the site will look terrible. Communicate with your team about when you will have the design tokens ready so they can begin applying them to their components.

2.Typography System (Core)

Build a complete typography system in typography.css that establishes consistent text styles throughout the site. Use the typography variables from variables.css and apply modern nested CSS.

Responsibilities:

3.Layout Compositions (Core)

Build the layout composition files (container.css, grid.css, stack.css) that create the structural patterns used throughout the site. These are CUBE CSS "compositions" that handle how elements are arranged.

Responsibilities:

4.Navigation and Structure Components (Core)

Style the header, footer, and navigation components in header.css, footer.css, and nav.css. These components appear on every page and are critical to the site's usability.

Responsibilities:

5.Content Components (Core)

Style buttons and cards in button.css and card.css. These components are used throughout the site for interactive elements and content display.

Responsibilities:

6.Form Components (Optional)

Style form elements in form.css including inputs, textareas, selects, and labels. This task is optional for teams with four members.

Responsibilities:

If your team has only four members, you may skip this task. However, the contact page will look incomplete without form styling, so consider this when deciding task distribution.

Getting Started

Select one team member to complete the following steps to set up your team project and begin working:

1. Download and Extract the Starter Files

Download the starter project and extract the contents to your local machine.

2. Create a Team Repository

One team member should create a new GitHub repository for your project. Make sure the repository is public so you can deploy to GitHub Pages. Initialize it with a README file that lists all team members and their assigned tasks.

3. Upload the Starter Files

Upload all the starter files to your team repository. Commit this as your initial commit with a message like "Initial project setup."

4. Add Team Members as Collaborators

The repository owner should add all team members as collaborators. Go to Settings → Collaborators and add each team member by their GitHub username. Everyone should clone the repository to their local machine.

5. Meet with Your Team and Plan Your Workflow

Hold a team meeting (in person or via Discord/Zoom etc.) to discuss the project, assign tasks, and agree on how you will use Git. Consider each person's strengths, make sure everyone understands what they need to build, and document your task assignments in your README file.

For version control, each person must work in a feature branch instead of directly on the main branch, and all changes should be merged through GitHub pull requests (PRs). Create a new branch for your task, open a PR into main when your work is ready, then have a designated teammate (or the team lead) review and merge the PR. Communicate before opening or merging PRs to avoid conflicts, and use PR comments to ask questions or request changes.

If you are new to pull requests, review GitHub's guides on collaborating with pull requests and proposing changes with pull requests before you start.

Git Best Practices for This Project

Since each team member is working on different CSS files, merge conflicts should be minimal. However, follow these practices to keep your workflow smooth:

  • Pull the latest changes before you start working each session
  • Commit your changes with clear, descriptive messages
  • Push your changes when you are done working
  • Communicate with your team when you push updates

Development Guidelines

As you work on your assigned tasks, follow these guidelines to maintain code quality and consistency:

Use Modern Nested CSS

Throughout this course, you have learned to use native CSS nesting. Apply this technique in your component files to keep related styles together and reduce repetition: 


        .card {
            background: var(--bg-clr);
            padding: var(--spacing-med);
            border-radius: var(--radius-med);
            
            & h2 {
                margin-bottom: var(--spacing-sm);
                color: var(--text-clr);
            }
            
            & p {
                color: var(--text-clr);
            }
            
            &:hover {
                transform: translateY(-4px);
            }
        }

Follow CUBE CSS Principles

Organize your CSS according to CUBE methodology. Most of your work will be in "blocks" (components), but remember that compositions handle layout, utilities provide quick adjustments, and exceptions are minimal overrides:

Use Design Tokens Consistently

Reference the CSS custom properties from colors.css and variables.css rather than hard-coding values. This ensures consistency and makes theme switching work correctly: 


        /* Good - uses design tokens */
        .button {
            background: var(--primary-clr);
            padding: var(--spacing-sm) var(--spacing-med);
            border-radius: var(--radius-sm);
        }
        
        /* Bad - hard-coded values */
        .button {
            background: #007bff;
            padding: 8px 16px;
            border-radius: 4px;
        }

Test in Both Themes

Make sure your styles work in both light and dark themes. Use the theme toggle button to switch between modes and verify that colors, contrast, and readability remain good in both contexts.

Consider Responsive Design

Your layouts and components should work on different screen sizes. Use media queries, CSS Grid's auto-fit and auto-fill, and flexible units to create responsive designs: 


        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
            gap: var(--spacing-med);
        }

Comment Your Code

Add comments to explain your design decisions, especially in the design token files. This helps your team understand why certain values were chosen and makes future modifications easier.

Deployment

Once your team has completed the project, deploy it to GitHub Pages so it can be viewed as a live website. Follow these steps:

1. Verify Everything is Committed

Make sure all team members have pushed their final changes to the repository. Check that the main branch contains all completed work.

2. Enable GitHub Pages

In your repository settings, go to Pages (under Code and automation). Select "Deploy from a branch" and choose the main branch with root as the folder. Click Save.

3. Wait for Deployment

GitHub will build and deploy your site. This usually takes a few minutes. Once complete, you will see a green success message with your site's URL (typically https://username.github.io/repository-name/).

4. Test the Live Site

Visit your deployed site and test all pages. Verify that the theme toggle works, all components render correctly, and both light and dark modes display properly. Check on different devices if possible.

If images are not loading on the live site, check that your image paths are correct. GitHub Pages is case-sensitive, so make sure file names match exactly.

Submission Requirements

Each team member must submit their own individual reflection document. Complete the interactive form below with your information, then download the PDF and submit it to Canvas.

Team Project: Multi-File CSS Architecture - Submission
Project Information
Live Site URL (GitHub Pages)
Your Contributions
Provide links to the specific CSS file(s) you worked on. Use the GitHub file view URL from your repository (click on the file in GitHub and copy the URL). If you worked on multiple files, list each one.
Task Assignment
Reflection
Write 2-3 paragraphs reflecting on your experience with this project. Address the following:
  • What CSS architecture or organizational concepts did you apply from the learning activities?
  • What challenges did you encounter while working on your assigned task?
  • How did your work integrate with your teammates' contributions?
  • What would you do differently if you were to start this project again?
Team Collaboration
Answer these questions about your team's collaboration. Be honest and professional in your responses. This feedback helps us understand team dynamics and is kept confidential.
How would you rate your team's overall collaboration?
Did all team members complete their assigned tasks?
Were there any team members who did not participate or contribute? (Optional)
If any team member did not contribute to the project, you may note that here. This information is confidential and will only be used to address participation issues. Leave blank if everyone participated.
Additional Comments (Optional)

Grading Criteria

Your team project will be evaluated based on the following criteria:

Design System and Architecture (30%)

Component Implementation (40%)

Visual Design (20%)

Collaboration and Documentation (10%)

Tips for Success

Communication is Key

The most successful teams communicate frequently. Use your private Teams channel to share updates, ask questions, and coordinate your work. Even a quick message like "I just opened a PR for Task 2" helps keep everyone informed.

Looking Ahead

This project establishes the foundation for future team assignments. You will continue using this same repository and codebase in upcoming projects where you will add more advanced features like complex layouts, visual effects, and animations. The architectural decisions you make now will impact how easily you can extend this project later.

Take the time to build a solid, well-organized CSS structure. Future you (and your teammates) will be grateful when you need to add new features or make changes without breaking existing styles.