Default CSS Styles

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

StoreConnect stores come with default CSS styles that works as out-of-the-box framework and you can use in liquid templates, custom Markdown and HTML code.

For a more comprehensive guide to styling markdown with CSS gitlab has a great article on Markdown Kramdown that can help.

Flex

Class Style
.sc-flex display: flex;
.sc-flex-row display: flex;
flex-direction: row;
.sc-flex-col display: flex;
flex-direction: column;
Class Style
.sc-flex display: flex;
.sc-flex-row display: flex;
flex-direction: row;
.sc-flex-col display: flex;
flex-direction: column;

Responsive Flex Classes

Class Small ≥ 576px Medium ≥ 768px
.sc-flex-row-sm display: flex;
flex-direction: row;		  
.sc-flex-col-to-row display: flex;
flex-direction: column;		 flex-direction: row;
Class Style
.sc-justify-space-between justify-content: space-between;
.sc-justify-space-evenly justify-content: space-evenly;
.sc-justify-space-around justify-content: space-around;
.sc-justify-space-center justify-content: center;
.sc-justify-space-start justify-content: flex-start;
.sc-justify-space-end justify-content: flex-end;
Class Style
.sc-align-items-center align-items: center;
.sc-align-items-start align-items: flex-start;
.sc-align-items-end align-items: flex-end;
Class Style
.sc-grow flex-grow: 1;
.sc-no-shrink flex-shrink: 0;

Grid

Responsive columns

Class Style Medium ≥ 768px
.sc-one-to-two-column display: grid;
gap: 20px;
grid-template-columns: 1;		 grid-template-columns: repeat(2, 1fr);
.sc-one-to-three-column display: grid;
gap: 20px;
grid-template-columns: 1;		 grid-template-columns: repeat(3, 1fr);
.sc-one-to-four-column display: grid;
gap: 20px;
grid-template-columns: 1;		 grid-template-columns: repeat(4, 1fr);
.sc-two-to-four-column display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr);		 grid-template-columns: repeat(4, 1fr);

Fixed columns

Class Style
.sc-one-third-two-thirds display: grid;
gap: 20px;
grid-template-columns: 1fr 2fr;
.sc-two-thirds-one-third display: grid;
gap: 20px;
grid-template-columns: 2fr 1fr;
.sc-two-column display: grid;
gap: 20px;
grid-template-columns: 1fr 1fr;
.sc-three-column display: grid;
gap: 20px;
grid-template-columns: repeat(3, 1fr);
.sc-four-column display: grid;
gap: 20px;
grid-template-columns: repeat(4, 1fr);

Display

Class Style
.sc-display-inline-block display: inline-block;
.sc-display-inline display: inline;
.sc-display-block display: block;
.sc-hide display: none;
.sc-invisble display: hidden;

Responsive Hide / Display Elements

Screen Size Class
Hidden on small ≤ 576px .sc-hide-up-to-small
Hidden only up to medium ≤ 768px .sc-hide-up-to-medium
Hidden only up to large ≤ 992px .sc-hide-up-to-large
Visible up to small ≤ 576px .sc-hide-small-and-up
Visible up to medium ≤ 768px .sc-hide-medium-and-up
Visible up to large ≤ 768px .sc-hide-large-and-up

Width

Class Style
.sc-expand width: 100%;
.sc-mw-100 max-width: 100%;
.sc-one-whole width: 100%;
.sc-three-quarters width: 75%;
.sc-two-thirds width: 66.66%;
.sc-one-half width: 50%;
.sc-one-third width: 33.33%;
.sc-one-quarter width: 25%;

Responsive widths

Class Style
.sc-one-whole-small-and-up width: 100%;
.sc-three-quarters-small-and-up width: 75%;
.sc-two-thirds-small-and-up width: 66.66%;
.sc-one-half-small-and-up width: 50%;
.sc-one-third-small-and-up width: 33.33%;
.sc-one-quarter-small-and-up width: 25%;
Class Style
.sc-one-whole-medium-and-up width: 100%;
.sc-three-quarters-medium-and-up width: 75%;
.sc-two-thirds-medium-and-up width: 66.66%;
.sc-one-half-medium-and-up width: 50%;
.sc-one-third-medium-and-up width: 33.33%;
.sc-one-quarter-medium-and-up width: 25%;
Class Style
.sc-one-whole-up-to-medium width: 100%;
.sc-three-quarters-up-to-medium width: 75%;
.sc-two-thirds-up-to-medium width: 66.66%;
.sc-one-half-up-to-medium width: 50%;
.sc-one-third-up-to-medium width: 33.33%;
.sc-one-quarter-up-to-medium width: 25%;

Typography & Alignments

Class Style
.sc-text-left text-align: left;
.sc-text-right text-align: right;
.sc-text-center text-align: center;
Class Style
.sc-font-zero font-size: 0;
.sc-font-tiny font-size: 14px;
.sc-font-small font-size: 15px;
.sc-font-base font-size: 16px;
.sc-font-medium font-size: 18px;
.sc-font-large font-size: 20px;
.sc-font-xlarge font-size: 24px;
.sc-font-xxlarge font-size: 30px;
.sc-font-huge font-size: 35px;
.sc-font-gigantic font-size: 45px;
Class Style
.sc-font-normal font-weight: 400;
.sc-font-bold font-weight: 600;
.sc-font-family font-family: var(–sc-font-family);
.sc-font-line-through text-decoration: line-through;
Class Style
.sc-uppercase text-transform: uppercase;
.sc-truncate white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Colours

Class Style
.sc-color-primary color: hsla(212, 100%, 50%, 1);
.sc-color-secondary color: hsla(0, 0%, 15%, 1);
.sc-color-error color: hsla (0, 100%, 45%, 1);
.sc-color-sale color: hsla (0, 100%, 45%, 1);

Primary and secondary might change if you have set up your brand colors during the installation process or you have overridden these properties in the custom style field.

Class Style
.sc-shade-darkest color: #1a1a1a;
.sc-shade-dark color: #4d4d4d;
.sc-shade-neutral color: #737373;
.sc-shade-light color: #b3b3b3;
.sc-shade-lighter color: #dedede;
.sc-shade-lightest color: #f2f2f2;

Box Shadow

Class Style
.sc-shadow box-shadow: 0 1px 2px hsla(0,0%,0%,0.1);
.sc-shadow-2 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.05);
.sc-shade-3 box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.2);

Spacing

Margins

You can configure and apply responsive spacing classes to margin and padding classes. Here are the basics:

sc-{ breakpoint }:{ property }-{ size }

Mobile-first breakpoints

sm: 576px
md: 768px
lg: 992px
xl: 1400px
hg: 1700px

Properties:

m - for classes that set margin
p - for classes that set padding

Sides:

  • t sets margin-top or padding-top
  • b sets margin-bottom or padding-bottom
  • l sets margin-left or padding-left
  • r sets margin-right or padding-right
  • s sets margin-left and margin-right or padding-left and padding-right
  • e sets margin-top and margin-bottom or padding-top and padding-bottom

Sizes:

micro: 3px
tiny: 5px
small: 10px
medium: 15px
base: 20px
large: 30px
xlarge: 40px
xxlarge: 60px
huge: 80px

Example with breakpoints

sc-md:m-base sets margin: 20px; from 768px and up

sc-md:ms-base sets margin-right: 20px; margin-left: 20px; from 768px and up

Example without breakpoints

sc-p-base sets padding: 20px; across all devices
sc-pl-base sets padding-left: 20px; across all devices


Margin built-in classes

Class Small ≥ 576px Medium ≥ 768px
.sc-m-none margin: 0; margin: 0;
.sc-mt margin-top: 10px; margin-top: 20px;
.sc-mr margin-right: 10px; margin-right: 20px;
.sc-mb margin-bottom: 10px; margin-bottom: 20px;
.sc-ml margin-left: 10px; margin-left: 20px;
.sc-mt-spacious margin-top: 20px;
margin-bottom: 20px;		 margin-top: 40px;
margin-bottom: 40px;
.sc-mr-spacious margin-top: 20px;
margin-bottom: 20px;		 margin-top: 40px;
margin-bottom: 40px;
.sc-mb-spacious margin-top: 20px;
margin-bottom: 20px;		 margin-top: 40px;
margin-bottom: 40px;
.sc-ml-spacious margin-top: 20px;
margin-bottom: 20px;		 margin-top: 40px;
margin-bottom: 40px;
.sc-me-spacious margin-top: 20px;
margin-bottom: 20px;		 margin-top: 40px;
margin-bottom: 40px;
.sc-ms-spacious margin-left: 20px;
margin-right: 20px;		 margin-left: 40px;
margin-right: 40px;
Class Style
.sc-ms-auto margin-left: auto;
margin-right: auto;

Padding built-in classes

Class Small ≥ 576px Medium ≥ 768px
.sc-p-none padding: 0; padding: 0;
.sc-pt padding: 10px; padding: 20px;
.sc-pr padding: 10px; padding: 20px;
.sc-pb padding: 10px; padding: 20px;
.sc-pl padding: 10px; padding: 20px;
.sc-pt-spacious padding-top: 20px;
padding-bottom: 20px;		 padding-top: 40px;
padding-bottom: 40px;
.sc-pr-spacious padding-top: 20px;
padding-bottom: 20px;		 padding-top: 40px;
padding-bottom: 40px;
.sc-pb-spacious padding-top: 20px;
padding-bottom: 20px;		 padding-top: 40px;
padding-bottom: 40px;
.sc-pl-spacious padding-top: 20px;
padding-bottom: 20px;		 padding-top: 40px;
padding-bottom: 40px;
.sc-pe-spacious padding-top: 20px;
padding-bottom: 20px;		 padding-top: 40px;
padding-bottom: 40px;
.sc-ps-spacious padding-left: 20px;
padding-right: 20px;		 padding-left: 40px;
padding-right: 40px;

Borders

Class Style Applied
.sc-border-top border-top: 1px solid #d9d9d9;
.sc-border-right border-right: 1px solid #d9d9d9;
.sc-border-bottom border-bottom: 1px solid #d9d9d9;
.sc-border-left border-left: 1px solid #d9d9d9;
.sc-border-ends border-top: 1px solid #d9d9d9;
border-bottom: 1px solid #d9d9d9;
.sc-border-sides border-left: 1px solid #d9d9d9;
border-right: 1px solid #d9d9d9;
.sc-border-none border: none;


Related help documents

 
 
Back to Documentation