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 Name	Output Value
jumbodecimal	100px
hulk	90px
titan	80px
collosal	70px
jumbo	60px
xxxlarge	50px
xxmedium	48px
xxlarge	40px
xlarge	30px
xlargemedium	28px
largemedium	25px
large	20px
mediumlarge	18px
medium	15px
mediumsmall	13px
small	10px
smallmedium	8px
xsmall	5px
xxsmall	3px
micro	2px
nano	1px
none	0px

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

Titles	Links	Inverted
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

Body	Links	Inverted
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 Name	Output 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

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!