Client-First — Artycoders Edition

Style Guide

Client-First Artycoders Edition is a set of instructions and strategies created by Artycoders powered by Finsweet to help you build Webflow websites.

Structure Classes

Defined and flexible core structure we can use on all or most pages.

page-wrapper
main-wrapper
container-small
container-medium
container-large
padding-global
section-padding-small
section-padding-medium
section-padding-large

Max widths

Use the max-width CSS property to contain inner content to a maximum width.

has--max-width-full
has--max-width-full-tablet
has--max-width-full-mobile-portrait
has--max-width-full-mobile-landscape
has--max-width-xxlarge
has--max-width-xlarge
has--max-width-large
has--max-width-medium
has--max-width-small
has--max-width-xsmall
has--max-width-xxsmall

Colors

Manage recurring text and background colors.

Color Palette

#00000
#f5f5f5
#fffff

Background Colors

has--background-black
has--background-grey
has--background-white

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-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Margins

Utility spacing system - padding 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-xxsmall
margin-xsmall
margin-small
margin-medium
margin-large
margin-xlarge
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Useful utility systems

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
overflow-visible
overflow-hidden
overflow-auto
overflow-scroll
pointer-events-on
pointer-events-off
layer
div-square
spacing-clean
align-center
z-index-1
z-index-2
display-inlineflex

Animation classes

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

slide-left_animation
slide-left_animation