Begin New Webflow

Use this page to quickly reference styles and commonly used classes. More coming soon!

Begin Now
Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
Swatch colors
All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-lrg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

.p-sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

link
Text Link
Buttons
.btn
.btn .btn-2

Pre-Styled Classes

Use these classes for styling commonly used elements.

Window Size reference
lg - md - sm - xs

Important:

  • Start by styling the body(all pages) without adding a class.
  • Use .ctr to center align anything!
  • Give columns class '.col' to remove 10px left/right padding on SM & XS.
  • Make sure to give form states classes of .success and .error
  • Push margins from bottom of elements, not the top unless needed. Use .bot classes.
  • DO NOT style any images using the settings tab. Give them a class to control styles.
  • when creating new classes...SIMPLIFY. h=heading, p=paragraph, col=column, sect=section, msg=input

    ex.) .h-large, .p-thin, .col-about, .sect-blog, .msg-left, etc...

Class Settings (do not edit)

Main Classes
.bot0
.bot0
.bot25
.bot50
.bot75
.bot100
.float-l
.float-r
Text Classes
.ctr
.ctr-sm
.ctr-xs
.align-l
.align-r
.caps
.fff
.dark
.fa
.ctr
Display Classes
.inline
.block-sm
.block-xs
.hide-sm
.hide-xs
Responsive Margins
.bot25sm
.bot25xs
.bot50sm
.bot50xs
.bot75sm
.bot75xs
.bot100sm
.bot100xs
.bot0sm
.bot0xs

Key

Main Classes
  • .sect = full width section (contains padding)
  • .row = 100% width section
  • .btn = button
  • .btn-sp = space between two buttons
  • .col = column (apply to every column!)
  • .p-sm = small paragraph
  • .p-lrg = large paragraph
  • .img = 100% width image
Text Classes
  • .ctr = text-align: center
  • .ctr-sm = text-align: center - SM
  • .ctr-xs = text-align: center - XS
  • .align-l = text-align: left
  • .align-r = text-align: right
  • .caps = uppercase
  • .fff = white text
  • .dark = dark text
  • .fa = fontawesome
Display Classes
  • .inline = display: inline
  • .block-sm = display: block - SM
  • .block-xs = display: block - XS
  • .hide = display: none
  • .hide-sm = display: none - SM
  • .hide-xs = display: none - XS
  • .rel = position: relative; z-index: 1
Margins & Spacing
  • .bot10 = margin-bottom: 10px
  • .bot25 = margin-bottom: 25px
  • .bot25-sm = margin-bottom: 25px - SM
  • .bot25-xs = margin-bottom: 25px - XS
  • .bot50 = margin-bottom: 50px
  • .bot50 = margin-bottom: 50px - SM
  • .bot50xs = margin-bottom: 50px - XS
  • .bot75 = margin-bottom: 75px
  • .bot75sm = margin-bottom: 75px - SM
  • .bot75xs = margin-bottom: 75px - XS
  • .bot100 = margin-bottom: 100px
  • .bot100sm = margin-bottom: 100px - SM
  • .bot100xs = margin-bottom: 100px - XS
  • .bot0 = margin-bottom: 0px;
  • .bot0sm = margin-bottom: 0px - SM
  • .bot0xs = margin-bottom: 0px - XS
  • .float-l = float left
  • .float-r = float right
Ul/Li Classes
  • .flex-list = ul with flex & wrap
Form Classes
  • .msg = form input
  • .msg.msg-area = form textarea
  • .success
  • .error
Column Classes
  • .col = display:none
  • .col-left = hidden on sm and xs
  • .col-right = hidden on xs
  • .flex-ctr = vertically center columns
  • .flip-md = flip on md
  • .flip-xs = flip on sm
Container Classes
  • .container = use if applying universal styles to containers
  • .contain-sm = small container
More classes
  • .overlay = absolute to corners div
  • .tri = corner div triangle
  • .img-sp = opacity:0; width:100%; (keeps ratios)
  • .dim = reduce opacity
Manual css Styles
  • .pe-none = no pointer events on load
  • .hide-load = show in webflow, hide on load
Use for common elements!
  • .navlink = nav link
  • .ftlink = footer link
  • .soci = social icon
  • .inline = display: inline

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

The Form Title

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Ratios

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim mas.
Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Heading

Sliders

Cards

Info

Don't

Don't use padding to push elements.

Do

Give the upper element bottom margin. (.bot25) in this case.

Wrong Padding

Wrong

Right Padding

Right

Call to Action Section
Goes Right Here

Learn More
Learn More

Call to Action Section
Goes Right Here

Learn More

Subscribe to Our Newsletter

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Call to Action Here!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra orna.

Button Here
A Division of
Key Productions Inc.
Buffalo, NY | 716.884.5391
Get Your FREE Tickets
HomeExhibit With UsSpace Application
Wedding Specialists of WNY © 2023Hosted by Dominguez Marketing