FiftyThree Style Guide


A note on using the mixins in this style guide:

  • All but two of the mixins include media queries for proper resizing in the responsive grid. In order for this to work, do not add margin or padding onto the same element of the mixin if you must change that for various break points, keep all of the spacing in a wrapping element. Otherwise the media queries in the mixin will be overridden.


Think with your hands.

// How to use the Hero(color) mixin, takes one variables, the main colorh1Hero($White) // If necessary line-heights can be overridden, but use a wrapping element to adjust margins per breakpointsline-height: 1.5


Get in the Flow.

// How to use the SecondaryHeading() mixinh2SecondaryHeading() // If necessary override colors or line-heights, but use a wrapping element to adjust margins per breakpointscolor: $BlackLightestline-height: 1.5



// How to use the H2FeatureHeading() mixinh2H2FeatureHeading() // This is an older mixin, so the breakpoints are not included inside of it, so there is more ability to attach margins and padding if desired.color: $BlackLightestline-height: 1.5


This is a title heading.

// How to use the H1TitleHeading() mixin, used most often on pages such as contact, press, etc for the top headingh1H1TitleHeading() // This is an older mixin, so it doesn't have the breakpoints inside the mixin, so there is more spacing freedom in customized styles. Also, no color specified in it.color: $BlackLightest


This is a caption heading.

// How to use the CaptionHeading() mixinh3CaptionHeading() // This mixin includes the $StackANBold for the font family, but no color, so set color either on container or in the element.color: $BlackLightest


This is a caption paragraph.

// How to use the CaptionParagraph() mixinh2CaptionParagraph() // This mixin is just a bump in size at the 4 column breakpoint, color, line-height, etc should all be specificed when called.color: $BlackLightestline-height: 1.5


This is a midsize heading.

// How to use the MidSizeHeading() mixinh3MidSizeHeading() // Sets text to uppercase, sets line-heights, along with the font sizes bumping up as appropriate. Color may be set on the container or on the element itself.color: $BlackLightest


This is a large paragraph.

// How to use the LargeParagraph() mixinpLargeParagraph() // Simple font size bumping, so set color and line-height for this.color: $BlackLightestline-height: 1.5


This is a copy heading.

// How to use the CopyHeading($color) mixinh4CopyHeading($BlackLightest) // Line height, font-size, and $StackANBold are all set here. Color is passed in, but you could override things if need be. There is no change in font size, it holds steady at all breakpoints.line-height: 1.5