Project Guide Documentation

This document outlines the class naming conventions, page structure, and section structure used in our Webflow project. Our approach follows the Client-First methodology by Finsweet to ensure consistency and maintainability.

Client-First Docs

1. Class Naming Convention

Our class naming follows a structure similar to Client-First by Finsweet, ensuring consistency, readability, and scalability across the project.

General Naming Rules:

  • Use kebab-case (e.g., section-home-hero, page-padding).
  • Classes should be descriptive but concise.
  • Maintain a clear hierarchy and modular approach.

Common Class Types:

  • Section Classes: Prefixed with section- (e.g., section-home-hero).
  • Container Classes: Uses container- followed by the max-width (e.g., container-1280).
  • Padding Classes: Defined with padding-section- followed by a pixel value (e.g., padding-section-224).
  • Wrapper Classes: Used to wrap inner elements (e.g., home-hero_wrapper).
  • Heading Classes: Named based on font size (e.g., heading-56 for a 56px heading).
  • Text Classes: Named based on font size (e.g., text-size-16 for a 16px text size).

Combo Classes

Combo classes should be unique and descriptive, ensuring clear functionality and easy maintenance. Examples:

A computer screen with text and numbers on it.
A computer screen showing the text selector for text - color - black.
  • text-size-16 text-weight-600: A combination class for setting font size to 16px and font weight to 600.
  • heading-56 text-color-black: A combination class for a 56px heading with black text color.
  • Usage: Apply base styles first, then add combo classes to refine styling for specific elements.

2. Page Structure

The structure of each page follows a logical and reusable pattern:

A screenshot of a computer screen with a text description.

Key Elements:

  • page-wrapper: The main container that wraps all content.
  • Global Styles: Contains all global styles used across the site and should be present on all pages.
  • Navbar: Contains site-wide navigation.
  • main-wrapper: Wraps all the sections of the page.
  • section-{name}: Individual page sections (e.g., section-home-hero).
  • Footer: The global footer of the website.

3. Section Structure

Each section follows a consistent layout:

A screen shot of a web page with the text section highlighted.

Breakdown:

  • Section (section-home-hero) wraps a distinct content block.
  • Page Padding (page-padding) applies left and right padding to maintain page consistency.
  • Container (container-1280) keeps content within a set width.
  • Padding Section (padding-section-224) applies top and bottom padding to separate sections.
  • Wrapper (home-hero_wrapper) holds the main section elements.