SMACNA Style Guide

TEXT STYLES:

HERO: BARLOW SEMI CONDENSED BOLD / 96PX
WE SET THE STANDARDS

H1: BARLOW SEMI CONDENSED BOLD / 64px
We set the standards

H2: BARLOW SEMI CONDENSED MEDIUM / 48px
WE SET THE STANDARDS

H3: BARLOW SEMI CONDENSED MEDIUM / 34px
WE SET THE STANDARDS

H4: BARLOW SEMI CONDENSED MEDIUM / 27px
WE SET THE STANDARDS

H5: open sans / 20px
WE SET THE STANDARDS

Body/Strong: Open Sans Regular/Bold / 18PX
Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.
Lorem ipsum dolor sit amet consectetur. Diam convallis imperdiet tincidunt nam et. Sem nisi adipiscing amet interdum nisi. Viverra cursus metus elementum posuere. At netus enim morbi nam. Lorem ullamcorper congue sociis leo etiam suspendisse dapibus neque. Tortor eget dui in lobortis tellus.

BLOCKQUOTE: BARLOW SEMI CONDENSED MEDIUM ITALIC / 24PX
Lorem ipsum dolor sit amet consectetur. Velit quam pretium venenatis et praesent diam consequat nisi imperdiet. Arcu elit ultrices fermentum faucibus semper molestie. Et urna morbi eu id a nec. Ligula lacinia integer velit dignissim magna vel. Tellus nunc tellus sem neque laoreet ut vivamus tortor odio. Fringilla scelerisque dignissim donec non sit sed augue enim urna.

COLOR STYLES

Buttons

Buttons can be created by adding the button class to an <a> element. The easiest way to create these is to use Sitefinity's link tool to create your link, then simply find the element that looks like 

<a href="staging.smacna.org/"> and adding class="btn" and "btn-<color> just before the >.

Examples are shown below:

SPACING

There are two types of spacing: margin and padding.

Margin is space between elements, and padding is space inside of an element. Typically, you will use padding to add space when you use a background color (because you want the space you're creating to maintain that background color to create a box), and margin at other times.

The format for the spacing CSS classes is as follows: [type of spacing][direction, optional]-[amount].

For example, my-4 would add 24px of margin to the top and bottom of an element. p-6 would add 48px of padding to all sides of an element.

You will rarely want to use anything but my- and p- classes: usually you only want to create vertical space between elements, and when adding padding you want it to be uniform on all sides.

Sometimes you will want different horizontal and vertical padding on an element, so you could add both separately: py-2 (8px of vertical padding) px-4 (24px of horizontal padding). But if you're not sure, stick with uniform padding.

Iframe

If an <iframe> is inside the content field and needs to support file downloads, add the attribute data-add-sandbox-download="" inside the <iframe> element.

Example:

Important Notes:

• Only apply this attribute to iframes that need file downloads.

• Do not add it to every iframe—only those that require downloading files.