Vertex Inc | Style Guide
This website serves as a living document of the elements and components that make up the base setup of the Vertex Inc. Website. It's used to enhance communication between team members and aid in visual consistency and code maintainability.
- Status: Design
- Status: Development
- Status: Documentation
CSS and JS updates are automatically added here when changes are made. HTML additions or updates will need to be added to the corresponding element/component/section manually and distributed to the various templates.
Summary
The Vertex Inc. Style Guide enables design and development to have a single source of reference of the elements and components that are established using best practices.
Standards Compliant Markup
Semantic markup and use of ARIA roles on elements and components are based on W3C standards and industry best practices. The hope in doing this is that elements and components within the system provide a starting point for building accessible components and pages.
Composition of the Style Guide
Elements
Elements are the most basic building blocks of any layout providing a consistent starting point for user experience, design, and development to start their build.
Components
Components are the larger building blocks of pages – many times built from other smaller existing elements. These established components enable user experience, design, and development to use ready-to-go interface elements with provided HTML and CSS code.
Sections
Sections combine any number of other elements and smaller components into the layout of a section of a larger page.
Pages
When appropriate, samples of full page layouts is provided to demonstrate how individual elements, components, and sections can be combined to create an entire page.
Platform-Agnostic
The CSS framework outlined here can work with any technology stack – not limited to a specific platform or technology. Additionally, guidance is provided with each element and component around how and when to implement and use it.
