Snippets List Page

Overview

This page features a complete collection of available Design Patterns. A “Design Pattern” refers to a reusable code snippet that represents a frequently used layout or component, created to streamline development while maintaining design consistency. Each Design Pattern allows us to efficiently create sections with responsive, ADA-compliant, mobile-friendly layouts. By leveraging these Patterns, we can ensure consistency in style and structure across websites, aligning seamlessly with the original Figma designs.

Variable Overview and Usage:
Below is a brief description of the variables used in the provided CSS code and how they are utilized. The Design Patterns depend on these variables for consistent styling and to simplify customization across different sections and components.

These variables are organized using CSS custom properties (--variable-name) and provide a flexible and easily maintainable way to define the theme’s styles, such as colors, fonts, buttons, and general layout properties. This approach makes it easy to make changes to the theme in one place and have those changes reflected throughout the entire website. The Design Patterns depend on these variables for consistency and to allow seamless updates without having to modify each snippet individually.

Font Variables

+

  • --font-family-main, --font-family-secondary, --font-family-tertiary

    • Define the main, secondary, and tertiary font families for different parts of the theme.
  • --font-size-xsmall, --font-size-small, --font-size-main, --font-size-large

    • Control different font sizes for different text elements, using responsive values (clamp) for dynamic scaling.
  • --line-height-normal, --font-weight-normal, --font-weight-bold

    • Set the default line height and weight for fonts.

Color Variables

+

  • --main-color, --secondary-color, --tertiary-color, --black, --white

    • Define the main theme colors used for buttons, text, headings, etc.

Button Variables

+

  • Primary Button
    • --button-text-color, --button-bg-color, --button-border, --button-padding

      • Define the primary button’s text color, background color, border, and padding.
    • --button-hover-text-color, --button-hover-bg-color, --button-hover-border-color

      • Define the hover state colors for the primary button.
  • Secondary and Tertiary Buttons
    • Similar variables to define the colors, borders, and hover styles for secondary (--secondary-button) and tertiary (--tertiary-button) buttons.
  • --button-letter-spacing, --button-font-weight, --button-border-radius, --button-text-transform

    • Define additional styles for button fonts and text.

Text Style Variables

+

  • --text-letter-spacing

    • Control the letter spacing of text elements, ranging from normal to different spacing values.
  • --text-margin-normal

    • Define the default margin value for text.

Heading Variables

+

  • --heading-color, --heading-color-light, --heading-color-alt

    • Define different colors that can be applied to headings.
  • --heading-letter-spacing

    • Set the letter spacing for headings.
  • --heading-text-transform

    • Define whether headings should be transformed to uppercase or not.
  • Heading Font Sizes
    • --h1-font-size, --h2-font-size, --h3-font-size, --h4-font-size, --h5-font-size

      • Define the sizes for headings (h1, h2, etc.) using responsive values (clamp).

Development

Patterns usage and instructions can be found here – Development Training Manual

Tech Support

Each pattern has been broken up into individual snippets. These snippets should be in your snippets.code-snippets file in VS code. If you haven’t set that up yet please see instructions found here – Snippets in Visual Studio Code

Once you have your snippets file set up download the snippets.json file below
snippets.json

Next you’ll need to open that file up in VS code and copy all of the snippets over to the TOP your VS snippets.code-snippets file and save it.

Finally you’ll need to download variable css file below
snippetvariables.css

You are now ready to use the snippets below!

Each snippet is accompanied by an example photo that visually demonstrates what the completed section will look like. This will help you understand the design intent and layout before implementing the code. To view an example of the section output, simply click the “View Section Output” button provided alongside each snippet.