Styleguide
This page is here to show off styles for standard page elements such as typography, form elements, and icons. These are hard coded in an alternate page template file named page.styles.liquid
.
Table of Contents
Colors
White
#FFFFFF$color-white
Gray Light
#F2F2F2$gray-light
Gray
#E9E9E9$gray
Gray Dark
#898989$gray-dark
Gray Darker
#545352$gray-darker
Gray Darkest
#343433$gray-darkest
Black
#000000$black
Pearl
#fffcf4$pearl
Brown Dark
#362e24$brown-dark
Maroon
#9f2739$maroon
Fonts
Typography
H1 BEBAS NEUE PRO BOLD
H2 BEBAS NEUE PRO BOLD
H3 BEBAS NEUE PRO BOLD
H4 BEBAS NEUE PRO BOLD
H5 BEBAS NEUE PRO BOLD
H6 BEBAS NEUE PRO BOLD
P1 Filosofia OT Regular
P2 Filosofia OT Regular
P3 Filosofia OT Regular
P4 Filosofia OT Regular
CTAs / Buttons
Button Regular
Button Transparent
UI Elements
Drop Down
Size Selector
Slider Dots
Checkbox
Color Swatches
Quantity Selector
Icons & Logos
Forms
Email pop ups
Text Utilities
- .font-weight-normal
- .font-weight-bold
- .letter-spacing-base
- .text-black
- .text-gray-darkest
- .text-gray-darker
- .text-gray-dark
- .text-gray
- .text-gray-light
- .text-white
- .text-muted
- .text-black-50
- .text-white-50
- .text-primary
- .text-secondary
- .text-success
- .text-info
- .text-warning
- .text-danger
Background Color Utilities
- .bg-black
- .bg-gray-darkest
- .bg-gray-darker
- .bg-gray-dark
- .bg-gray
- .bg-gray-light
- .bg-gray-lighter
- .bg-white
- .bg-primary
- .bg-secondary
- .bg-success
- .bg-info
- .bg-warning
- .bg-danger
Frames
Use frames to create elements with defined aspect ratios. All frames require the .frame
base class and a modifier class to define their aspect ratio. See /_styles/components/frames.scss
to adjust available ratios.
There is also a child element .frame__inner
that is positioned absolutely and stretches the full dimensions of the frame.
Responsive Frames
Responsive frame sizing is available and works similar to Bootstrap responsive utilities, any breakpoint class applies to that breakpoint and up. If you add another class for a larger breakpoint it will override any ones applying at smaller breakpoints. Frame sizing being applied to screen sizes smaller than $grid-breakpoints('sm')
do not need a responsive class.
.frame
.frame--16x9
.frame--sm-6x4
.frame--md-1x1
.frame--lg-3x4
.frame--xl-4x6