Client-First — Version 2.1

Style Guide

Brand guidelines and CSS styling for Fitr website. Created by Digital Mast based on Client First 2.1.

Typography
Color
Structure
Utility

Typography

HTML tags define default Heading styles. Use Heading classes when the typography style doesn't match the default HTML tag.

Navigation:

Headings
Text Classes
Rich Text

Headings

Instead of styling the HTML tags, we're using classes to style the Headings. Use Heading classes when the typography style doesn't match the default HTML tag.

heading-style-h1

Sample text helps you understand how real text may look. Sample text is being used as a placeholder.

Note:
There is padding on the left because the italic font gets clipped, even whilst set to Overflow Visible.
heading-style-h2

Sample text is being used as a placeholder. Sample text helps you understand how real text may look.

heading-style-h3

Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h4

Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present.

heading-style-h5
Sample text is being used as a placeholder. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.
heading-style-h6
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look.

Text Classes

Text classes when typography style doesn't match the default HTML tag.

Text Sizes

text-size-xxlarge

90%
3+

text-size-xlarge

90%
3+

text-size-large

90%
3+

text-size-medium

Sample text is being used as a placeholder for real text that is normally present on your website.

text-size-body_l

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-body

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-size-small

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

text-size-xsmall

Sample text is being used as a placeholder for real text that is normally present on your website. Sample text helps you understand how real text may look on your website.

Text Weights

text-weight-normal
text-weight-normal
text-weight-medium
text-weight-medium
text-weight-semibold
text-weight-semibold
‍
line-height-s
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Font Override

is-monument
is-monument
is-serrif
is-serrif
is-public_-sans
is-public-sans

Text Styles

text-style-strikethrough

text-style-strikethrough

text-style-italic

text-style-italic

text-style-muted

text-style-muted

text-style-allcaps

text-style-allcaps

text-style-nowrap

text-style-nowrap

text-style-link

text-style-link

text-style-quote

Sample text is being used as a placeholder.

text-style-2lines
This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text text-style-2lines

text-style-3lines
This CSS style is not supported for Rich Texts on iOS.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Text Alignments

text-align-left
text-align-left
text-align-center
text-align-center
text-align-right
text-align-right

Rich Text

Text classes when typography style doesn't match the default HTML tag.

text-rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text with a link is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text. Sample text is being used as a placeholder for real text.

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text that is normally present.

Colors

Manage recurring text and background colors. DO NOT link any colours directly to the brand variables — look for the element's specified colour variable instead.

Navigation:

Brand Colours
Sections
Text
Grid

Brand Colors
‍

DO NOT link any colours directly to the brand variables — look for the element's specified colour variable instead.

brand-black
brand-orange

Brand Tints

brand-tints
Dark
Primary
A50
A30
A20
brand-transparency
Dark
Primary
A50
A30
A20

Secondary

brand-washed_purple
brand-steel_purple

Section Neutral Colors

color-white
color-chalk
color-dark

Neutral Transparencies

transparency-light
Primary
A70
A50
A20
Transparent
transparency-dark
Primary
A70
A50
A20
Transparent

Text Colors

text-color-brand

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-color-dark

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-color-steel

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-color-brand

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-color-washed

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

text-color-light

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.

Structural Classes

Defined and flexible core structure we can use on all or most pages. Please adhere to the following structure, where 'X' is size:

Navigation:

Structure Elements
Paddings
Flexbox
Flex Vertical
Flex Gap
Grid
section
padding-page
padding-section-X
container-X

Structure Elements

Wrapper Classes

page-wrapper
main-wrapper

Section padding

padding-page
padding-section-small
padding-section-medium
padding-section-large

Container Classes

container-small
container-medium
container-large
container-large
container-full

Paddings

Utility spacing system - padding classes. [padding-direction] + [padding-size].

Padding-Direction

padding-bottom
padding-top
padding-left
padding-right
padding-lr
padding-tb

Padding None + Directional

padding-0
padding-t-0
padding-b-0
padding-l-0
padding-r-0

Padding-Size

padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge

Flexbox

Flexbox horizontal

Note:
It's important that you choose the right flex alignment with the right flex box as the results are not the same if you were to use flex-v-align-X with a flex-horizontal element . They just fundimentally don't line up and you'll get a completely different positioning than that in the name.
flex-horizontal
flex-h-align-l-t
flex-h-align-l-c
flex-h-align-l-b
flex-h-align-c-t
flex-h-align-c-c
flex-h-align-c-b
flex-h-align-r-t
flex-h-align-r-c
flex-h-align-r-b

Flexbox horizontal Stretch

flex-h-stretch-l
flex-h-stretch-c
flex-h-stretch-r
flex-h-stretch-between
flex-h-stretch-around

Flexbox vertical

Note:
It's important that you choose the right flex alignment with the right flexbox, as the results are not the same if you were to use flex-v-align-X with a flex-horizontal element.
They just fundimentally don't line up and you'll get a completely different positioning than that in the name.
flex-vertical
flex-v-align-l-t
flex-v-align-l-c
flex-v-align-l-b
flex-v-align-c-t
flex-v-align-c-c
flex-v-align-c-b
flex-v-align-r-t
flex-v-align-r-c
flex-v-align-r-b

Flexbox vertical Stretch

flex-v-stretch-t
flex-v-stretch-c
flex-v-stretch-b
flex-v-stretch-between
flex-v-stretch-around

Flexbox Gap

Note:
It's important that you choose the right flex alignment with the right flexbox, as the results are not the same if you were to use flex-v-align-X with a flex-horizontal element.
They just fundimentally don't line up and you'll get a completely different positioning than that in the name.
gap-xxs
gap-xs
gap-s
gap-m
gap-l
gap-xl

Grid

These grids are responsive across all breakpoints— but if you want to make changes, then do it via the custom properties panel.
u-grid-custom
Note:
This is the base for the other "set" column grids.
u-grid-column-2
u-grid-column-3
u-grid-autofit
Note:
The u-grid-autofit grid creates 100% columns to accomodate the number of child elements within the grid. When the column width reaches a minimum width of 15 rem, the grid will wrap and even delete columns when the browser font size increases for accessibility. To update this value, do it via the custom properties panel.

Give it a try and add or delete fs-styleguide_empty-box elements in the above example, via the navigator pannel.

Subgrid

Creating this for cards and any other element that we want the elements contents to be on the same line.

Learning Resource: Youtube
u-grid-subgrid
Note:
Subgrids can only be nested in a parent grid.

The grid-row value should reflect the number of child elements. Every element in the grid that nests a subgrid element needs to be the same (have the same amount of rows) or new rows will be created/ removed and send everything out of wack.

Utility classes

Culmination of all the classes that we use on the website that aren't core to the structure but still the most repeatable global classes that will streamline the building process

Spacers

component

Unified spacer system for the project.

spacer-tiny
spacer-xxsmall
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-xxlarge

States

Utility classes we like to use in most of our projects to build faster.

hide
This element is hidden
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
pointer-events-auto
pointer-events-none
is-absolute
is-relative
is-glass
is-glass
is-glass
align-center-margin
z-index-1
z-index-2

Tables
‍

Note:
It's important that you choose the right flex alignment with the right flexbox, as the results are not the same if you were to use flex-v-align-X with a flex-horizontal element.
They just fundimentally don't line up and you'll get a completely different positioning than that in the name.
is-radius

Section Radius

Note:
It's important that you choose the right flex alignment with the right flexbox, as the results are not the same if you were to use flex-v-align-X with a flex-horizontal element.
They just fundimentally don't line up and you'll get a completely different positioning than that in the name.
is-radius
is-radius-top
is-radius-bottom

Global Classes

HTML tags define default text styles.

All paragraphs

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

All links
All Links
All quotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website.
All Ordered Lists
  1. Sample text is being used as a placeholder for real text that is normally present.
  2. Sample text is being used as a placeholder for real text that is normally present.
  3. Sample text is being used as a placeholder for real text that is normally present.
All Unordered Lists
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.