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.
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.
The mobile grid consists of a 15 column 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.
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.
| 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 |
Sass input: @include margin(small medium);
CSS Output: margin: 0.625rem 0.9375rem;
When setting the font family, size and line-height of an element, the following mixins and properties can be used.
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.
| 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 |
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**
| 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 |
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**
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 |
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 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 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 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 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 color properties can be used for setting the color of button elements.
Primary Background
Primary Active Background
Primary Text
Primary Inverted Background
Primary Inverted Active Background
Primary Inverted Text
Secondary Background
Secondary Active Background
Secondary Text
Secondary Inverted Background
Secondary Inverted Active Background
Secondary Inverted Text
Tertiary Background
Tertiary Active Background
Tertiary Text
Tertiary Inverted Background
Tertiary Inverted Active Background
Tertiary Inverted Text
Shop Zio Background
Shop Zio Active Background
Shop Zio Text
Muted Background
Muted Active Background
Muted Text
Muted Inverted Background
Muted Inverted Active Background
Muted Inverted Text
Notification color properties can be used for setting the color of the background for the notification banner.
Default
Green
Red
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
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.
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?
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?
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?
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?
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?
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
imc-button imc-button--atmarket-icon
imc-button imc--button-download