Foundational elements

These components are the building blocks of the design system, establishing the basic styles, structure, and framework for the website.

  • Brand Colours: The colours that represent the brand, including their values.

  • Typography: The fonts, sizes, weights, and styles used throughout the website, ensuring consistent and readable text.

  • Helper Classes: Utility classes that provide quick and easy ways to apply common styles and adjustments.

  • Bootstrap Grid: The responsive grid system that forms the layout structure, including columns, rows, and containers.

  • Tables: Styles and structures for displaying tabular data, ensuring they are readable and accessible.

  • List Styles: The design and formatting of ordered and unordered lists, making them visually consistent.

  • Image Positioning: Techniques for aligning images within your layout, including options for floating images to the left or right for text wrap, and centering images for balanced, symmetrical designs. Use float classes for text wrapping around images, and alignment classes or CSS properties like text-align: center to center images within their containers. Ensure that images are responsive and adapt to various screen sizes for a cohesive appearance across devices.

Updated August 20, 2024 by Digital & Web Operations (web_services@athabascau.ca)