Style Guide v3
Client-First is a set of guidelines and strategies originally created by Finsweet to help you build Webflow websites. Adaptation for Wordpress + BricksBuilder by Dizrupt.
Structure
Defined and flexible core structure we can use on all or most pages.
page-wrapper
main-wrapper
container-small
container-medium
container-large
container-xl
padding-global
padding-section-small
padding-section-medium
padding-section-large
button-group
Display Headings
Use these Heading classes when the typography size needed does not fall within the default Content Headings fluid type scale.
heading-style-large
Heading style large
heading-style-medium
Heading style medium
heading-style-small
Heading style small
Default Heading Styles
Default heading styles such as color, weight and line height are defined in Theme Styles. Use the "heading-style" classes when an alternative heading style is required.
H1
H1 Heading
H2
H2 Heading
H3
H3 Heading
H4
H4 Heading
H5
H5 Heading
H6
H6 Heading
heading-style-h1
H1 Heading
heading-style-h2
H2 Heading
heading-style-h3
H3 Heading
heading-style-h4
H4 Heading
heading-style-h5
H5 Heading
heading-style-h6
H6 Heading
Text Sizes
Text sizes for when typography style doesn't match the default HTML text style.
text-size-large
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
text-size-medium
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
text-size-regular
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
text-size-small
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
text-size-tiny
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Text Styles
Text classes when typography style doesn't match the default HTML tag.
text-style-highlight
highlight
text-style-underline
underline
text-style-underline-custom
underline custom
text-style-strikethrough
strikethrough
text-style-capitalize
capitalize
text-style-uppercase
uppercase
text-style-lowercase
lowercase
text-style-italic
italic
text-style-nowrap
no wrap
text-style-link
link
text-style-link-subtle
link
text-style-metatag
text-weight-bold
bold
text-weight-regular
regular
text-weight-light
light
text-align-left
align left
text-align-center
align centre
text-align-right
align right
text-color-black
color-black
text-color-white
color-white
text-color-grey-on-light
text-color-grey-on-light
text-color-grey-on-dark
text-color-grey-on-dark
text-style-2lines
Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder.
text-style-3lines
Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder.
text-style-5lines
Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder. Sample text is being used as a placeholder.
Max Widths
Use the max-width CSS property to contain inner content to a maximum width.
max-width-full
max-width-full-tablet
max-width-full-mobile-portrait
max-width-full-mobile-landscape
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall
Paddings
Utility spacing system - padding classes. [padding-direction] + [padding-size].
Direction Classes
padding-bottom
padding-top
padding-vertical
padding-horizontal
padding-left
padding-right
Size Classes
padding-0
padding-tiny
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-huge
Margins
Utility spacing system - margin classes. [margin-direction] + [margin-size].
Direction Classes
margin-bottom
margin-top
margin-vertical
margin-horizontal
margin-left
margin-right
Size Classes
margin-0
margin-tiny
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-huge
Spacers
Unified spacer system for the project.
spacer-tiny
spacer-xsmall
spacer-small
spacer-medium
spacer-large
spacer-xlarge
spacer-huge
Icons
Unify icons sizes. icon-height sets height of icons. icon-1x1 sets both height and width of icons.
Icon Height
icon-height-small
icon-height-medium
icon-height-large
Icon 1x1
icon-1x1-tiny
icon-1x1-small
icon-1x1-medium
icon-1x1-large
Utility Classes
Utility classes we like to use in most of our projects to build faster.
hide
This element is hidden
hide-tablet
This element is hidden
hide-mobile-portrait
This element is hidden
hide-mobile-landscape
This element is hidden
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-auto
pointer-events-none
layer
spacing-clean
align-center
z-index-1
z-index-2
svg-currentcolor
inherit-color
aspect-ratio-square
aspect-ratio-portrait
aspect-ratio-landscape
aspect-ratio-widescreen
aspect-ratio-univisium
aspect-ratio-anamorphic
Grids
Defined responsive grids we can use on all or most pages.
grid-1-col
grid-gap-medium
grid-2-col
grid-gap-medium
grid-3-col
grid-gap-medium
grid-4-col
grid-gap-medium
grid-5-col
grid-gap-medium
grid-dynamic-xlarge
grid-gap-xlarge
grid-dynamic-large
grid-gap-large
grid-dynamic-medium
grid-gap-medium
grid-dynamic-small
grid-gap-small
grid-dynamic-xsmall
grid-gap-xsmall