SASS and CSS Guide
This document is designed to help you use the styles that are built here, either as compiled SASS or native CSS.
Overview
Handoff's sites are built on a number of different CMS platforms, and use different build systems and technologies. This guide is designed to help consolidate the different ways that the frontend styles are built, and create some rational systems to govern how we build and maintain our styles.
Download Common SASS Files
SASS and CSS
This guide is designed to help you use the styles that are built here, either as compiled SASS or native CSS. The style tokens that are pulled from Figma are avaliable either as as SASS or CSS variables.
In addition, all of the style here are written as SASS files, and compiled down to native CSS. As much as possible, the components are written with isolation on each level of the component tree, so that they can be easily reused in other projects.
Bootstrap
Handoff is consolidating on the Bootstrap 5 framework. This guide will assume that you are building on this framework.
Structure
The SASS files are organized in a way that is designed to make it possible to write the minimal amount of custom styles for each component. Those minimal custom styles are compiled in such a way that they can be compiled and used with minimal dependencies.
Level 1: Bootstrap
All components depend on Bootstrap. You may include Bootstrap in the following ways -
1<link
2 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
3 rel="stylesheet"
4 integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
5 crossorigin="anonymous"
6/>If you are use a package manager -
Level 2: Shared Elements
These are the shared SASS values you will need to build the custom styles for an
element. They are stored in integration/snippets/shared/common and are required
in the SASS file for the component in order to build the styles.
These files should be included in this order:
- color-palette.scss - Defines the color pallette for the site
- functions.scss - Defines common SASS functions
- font-face.scss - Create a set of font faces that can be used elsewhere
- keyframes.scss - Defines common keyframes for animations
- variables.scss - Maps values and Figma tokens to bootstrap variables
Level 3: Mixins
These are the SASS mixins that are used to build the styles for an element. They are required in the SASS file for the component in order to build the styles.
These files should be included in this order:
- basics.scss - Basic styles for building components
- icon-sprite.scss - Mixins for building icon sprites
- typo.scss - Mixins for building typography
- buttons.scss - Mixins for building buttons
- links.scss - Mixins for building links
Level 4: Components
Simple atomic components (elements: buttons, alerts, etc) are built by applying Figma tokens to the Bootstrap variables. More complex components (blocks: heros or cards) are styled by applying the mixins with custom classes and SASS.
These sections are designed to be as modular as possible, so that they can be dropped in to any project and used with minimal dependencies. Below each resource is a code block that will show you html, SASS, and Javascript, as well as the compiled CSS you will need.