Style Guide

This style guide can be used as a reference for the implementation of common styling properties, elements and modules. For a complete set of properties and modules please refer to the SASS modules within the 'frontend/las-vegas-market/src/assets/scss' directory.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Base Properties

Common Properties

The common properties can be used as a reference for implementing style properties and values such as margins, padding, typography and colors. Additional style properties, functions and mixins can be found within each property stylesheet under the 'frontend/las-vegas-market/src/assets/scss/common/scss/base' directory.

Grid

Mobile Grid

The mobile grid consists of a 15 column grid.

Desktop Grid

The desktop grid consists of a 24 column grid, with 50px outer margins. The grid is gutterless, and begins at 992px viewport width. The max width of the grid is 1366px, including the outer margins.

Margins and Padding

When setting margins and padding for an element the following sizes can be set via the margin and padding mixins. Both of these mixins use the same TRBL syntax as the CSS properties; however instead specifying a pixel value, the alias size names below should be used.

Note: Vertical margins for elements should be set using a one directional flow, set at the bottom of the element, and should only push inward on the module. For example an element should only have vertical margins set to its bottom if it requires space vertically between it and other element. Using this pattern resolves many issues and conflicts with collapsing margins and colliding styles of surrounding elements.

In addition, margins should not be set on the outer regions of the module to not affect modules surrounding it. Rather, use decorator modules such as the vr (vertical-rhythm), section, or gallery modules to set the positioning between modules.

Spacing Properties

Property NameOutput Value
jumbodecimal100px
hulk90px
titan80px
collosal70px
jumbo60px
xxxlarge50px
xxmedium48px
xxlarge40px
xlarge30px
xlargemedium28px
largemedium25px
large20px
mediumlarge18px
medium15px
mediumsmall13px
small10px
smallmedium8px
xsmall5px
xxsmall3px
micro2px
nano1px
none0px

Example Usage

Sass input: @include margin(small medium);

CSS Output: margin: 0.625rem 0.9375rem;

Typography

When setting the font family, size and line-height of an element, the following mixins and properties can be used.

Font Types

This application contains several font families, each which are used for different content types. A serif font for heading content, and a san-serif font for body content. To set the properties for each content type the following "type-heading" and "type-content" mixins can be used.

Note:font styles use the mixins `type-heading` and `type-content` to set the proper weight.

Heading Font Properties

TitlesLinksInverted

Heading 1

Heading 1 Link

Heading 1 Invert

Heading 2

Heading 2 Link

Heading 2 Invert

Heading 3

Heading 3 Link

Heading 3 Invert

Heading 4

Heading 4 Link

Heading 4 Invert

Heading 5

Heading 5 Link

Heading 5 Invert

Heading 6

Heading 6 Link

Heading 6 Invert

Heading 7

Heading 7 Link

Heading 7 Invert

Heading 8

Heading 8 Link

Heading 8 Invert

Example Heading Usage

Sass input:
@include type-heading(kilo, primary);
Arguments: $font-size, $font-variant, $type-color
Defaults: $font-size: 'giga', $font-variant: 'primary', $type-color: 'default'

CSS Output:
font-family: "Avenir 45 Book", "sans-serif";
font-size: 1.5rem;
line-height: 1.875rem;
color: #000;

Class Reference:
.imc-type--title-1
.imc-type--title-1-link
.imc-type--title-1-inverted
**replace "1" with style you want to use**

Content Font Properties

BodyLinksInverted

Body 1

Body 1 Link

Body 1 Invert

Body 2

Body 2 Link

Body 2 Invert

Body 3

Body 3 Link

Body 3 Invert

Body 4

Body 4 Link

Body 4 Invert

Body 5

Body 5 Link

Body 5 Invert

Body 6

Body 6 Link

Body 6 Invert

Example Content Usage

Sass input:
@include type-content(delta, regular);
Arguments: $font-size, $font-variant, $type-color
Defaults: $font-size: 'gamma', $font-variant: 'regular', $type-color: 'default'

CSS Output:
font-family: 'Avenir 65 Medium', 'serif';
font-size: 0.875rem;
line-height: 1.375rem;
color: #000;

Class Reference:
Body styles 1,3,5:
.imc-type--body-1
.imc-type--body-1-link
.imc-type--body-1-inverted
Body styles 2,4,6 (include '-ui' to class name):
.imc-type--body-2-ui
.imc-type--body-2-ui-link
.imc-type--body-2-ui-inverted
**replace "1" with style you want to use**

Type Size Properties

When setting the font size of an element, the following sizes should be used in conjunction with the "type-heading" and "type-content" mixin.

Note: font-sizes should never be set using an exact pixel value (for example "font-size: 16px"), instead the type mixins should be used (for example "@include type-content(zeta)"

Property NameOutput Value

peta

104px

tera

72px

omni

42px

giga

32px

mega

26px

kilo

24px

alpha

20px

beta

18px

gamma

16px

delta

14px

epsilon

13px

zeta

12px

micro

11px

milli

10px

mini

9px

nano

6px

Base Properties

Color Properties

When setting the color properties of an element, the color mixins should be used to set the proper available color variants based on the color type. For example, setting the background or outline colors of an element, the mixin "get-box-color" can be used for retrieving the available colors from the $colors map.

Note: For additional color properties and implementation mixins see "scss/base/_colors.scss"

Variable Colors

Variable colors as they are defined in code for this particular market.

Primary Heavy

Primary Medium

Primary Light

Secondary Heavy

Secondary Medium

Secondary Light

Tertiary Heavy

Tertiary Medium

Tertiary Light

Neutral Heaviest

Neutral Heavy

Neutral Heavy Medium

Neutral Medium

Neutral Medium Light

Neutral Light

Juniper Market Green

White

Link

Alert

Success

Box Colors

Box color properties can be used for setting background and outlines of elements.

Primary Heavy

Primary Medium

Primary Light

Secondary Heavy

Secondary Medium

Secondary Light

Tertiary Heavy

Tertiary Medium

Tertiary Light

Neutral Heaviest

Neutral Heavy

Neutral Heavy Medium

Neutral Medium

Neutral Medium Light

Neutral Light

Type Colors

Type color properties can be used for setting the type color of an elements.

Note:Setting the color of type can be set with both the "type-content/type-heading" mixins as well as the "get-type-color" mixins. When setting the font size of an element, the preferred method to set the color is with the "type-content/type-heading" mixins with the color argument. If overriding an inherited color, using the "get-type-color" method is the preferred method.

Primary Heavy

Primary Medium

Primary Light

Secondary Heavy

Secondary Medium

Secondary Light

Tertiary Heavy

Tertiary Medium

Tertiary Light

Neutral Heaviest

Neutral Heavy

Neutral Heavy Medium

Neutral Medium

Neutral Medium Light

Neutral Light

Link Colors

Link color properties can be used for setting the color of link elements (NOT USED).

Neutral Light

Neutral Medium Light

Neutral Medium

Neutral Heavy Medium

Neutral Heavy

Neutral Heaviest

Primary

Primary Heavy

Secondary

Tertiary

Tertirary Light

Button Colors

Button color properties can be used for setting the color of button elements.

Primary

Primary Background

Primary Active Background

Primary Text

Primary Inverted

Primary Inverted Background

Primary Inverted Active Background

Primary Inverted Text

Secondary

Secondary Background

Secondary Active Background

Secondary Text

Secondary Inverted

Secondary Inverted Background

Secondary Inverted Active Background

Secondary Inverted Text

Tertiary

Tertiary Background

Tertiary Active Background

Tertiary Text

Tertiary Inverted

Tertiary Inverted Background

Tertiary Inverted Active Background

Tertiary Inverted Text

Shop Zio

Shop Zio Background

Shop Zio Active Background

Shop Zio Text

Muted Inverted

Muted Background

Muted Active Background

Muted Text

Muted Inverted

Muted Inverted Background

Muted Inverted Active Background

Muted Inverted Text

Notification Colors

Notification color properties can be used for setting the color of the background for the notification banner.

Default

Green

Red

State Colors

State color properties can be used for setting the color of an elements to display its state (e.g. error, active, alert, etc).

Highlight

Alert

Error

Success

Content Modules

Content Modules

The common elements can be used as a reference for reusable content modules that are commonly used within the LVM/Portal applications. For additional modules and implementation methods you can refer to each content module file under the "src/assets/scss/modules/content" directory.

Content (alternating background color - heavy)

Example content, default font size. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi culpa dolore error excepturi, facere fugit harum illo impedit labore molestias quas quisquam repellat veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, similique?

Content (alternating background color - medium)

Example content, default font size. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi culpa dolore error excepturi, facere fugit harum illo impedit labore molestias quas quisquam repellat veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, similique?

Content (alternating background color - light)

Example content, default font size. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi culpa dolore error excepturi, facere fugit harum illo impedit labore molestias quas quisquam repellat veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, similique?

Content (alternating background color - gray dark)

Example content, default font size. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi culpa dolore error excepturi, facere fugit harum illo impedit labore molestias quas quisquam repellat veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, similique?

Content (alternating background color - gray medium)

Example content, default font size. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores commodi culpa dolore error excepturi, facere fugit harum illo impedit labore molestias quas quisquam repellat veritatis!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, similique?

Links

Buttons with Class Names

imc-button

imc-button imc-button--small

imc-button--primary-inverted

imc-button--secondary

imc-button--secondary-inverted

imc-button--tertiary

imc-button--tertiary-inverted

imc-button--muted

imc-button--muted-inverted

Button With Icons

imc-button imc-button--shop-zio-icon

imc-button imc--button-download