Getting Started

This page demonstrates useful classes and techniques to use when building new pages in the Shopify admin or developing new templates.

It should be useful both to EB employees with a basic knowledge of html/css and to developers.

If you'd like to see all our current template sections you can take a look at those here.

Colors

color-midnight
color-highlight
color-white
color-off-white
color-light-creme
color-dark-creme
color-accent
color-gray-border

Font Stacks

Primary Font:

Normal:
"Avenir LT 45 Book"
Medium:
"Avenir LT 65 Medium"
Heavy:
"Avenir LT 85 Heavy"
Italic:
"Avenir LT 45 Book Oblique"

Headers:

Headline:
"Avenir LT 65 Medium, uppercase"
Headline heavy:
"Avenir LT 85 Heavy, uppercase"

utilities

aligned grid row

Add your personalized documentation here.

Example

Wrapped in element .aligned-row
Wrapped in element .aligned-row
Wrapped in element .aligned-row
Wrapped in element .aligned-row-sm (minimum screen size: small)
Wrapped in element .aligned-row-sm (minimum screen size: small)
Wrapped in element .aligned-row-sm (minimum screen size: small)
Back to Top
<style>
  .example-box {
    background-color: #f1f1f1;
    margin: 10px;
    padding: 20px;
  }
</style>

<div class="row">
  <div class="aligned-row">
    <div class="example-box">Wrapped in element <strong>.aligned-row</strong></div>
    <div class="example-box">Wrapped in element <strong>.aligned-row</strong></div>
    <div class="example-box">Wrapped in element <strong>.aligned-row</strong></div>
  </div>
</div>

<div class="row">
  <div class="aligned-row-sm">
    <div class="example-box">Wrapped in element <strong>.aligned-row-sm</strong> (minimum screen size: small)</div>
    <div class="example-box">Wrapped in element <strong>.aligned-row-sm</strong> (minimum screen size: small)</div>
    <div class="example-box">Wrapped in element <strong>.aligned-row-sm</strong> (minimum screen size: small)</div>
  </div>
</div>

alignment

This is how you can control the alignment of text and many other elements.

Example

.text-align left
.text-align center
.text-align right
.align_left_sm (left-align text with min-screen size: small)
.align_right_sm (right-align text with min-screen size: small)
Back to Top
<!---- Global Classes --->
<div class="row">
  <div class="col-xs-12 border-screen-size-display text-left">.text-align left</div>
  <div class="col-xs-12 border-screen-size-display text-center">.text-align center</div>
  <div class="col-xs-12 border-screen-size-display text-right">.text-align right</div>
</div>

<!--- Spacer --->
<div class="spacer"></div>

<!---- Desktop Specific Classes --->
<div class="row">
  <div class="col-xs-12 border-screen-size-display align_left_sm">.align_left_sm (left-align text with min-screen size: small)</div>
  <div class="col-xs-12 border-screen-size-display align_right_sm">.align_right_sm (right-align text with min-screen size: small)</div>
</div>

background colors

Add your personalized documentation here.

Example

Back to Top
<div></div>

blockquote

Add your personalized documentation here.

Example

Back to Top
<div></div>

borders

Use the class below to add a responsive border to an element, which is perfect for debugging!

Example

.border-screen-size-display (resize your screen to see the responsive color changing border)
Back to Top
<div class="row">
  <div class="col-xs-12">
    <div class="border-screen-size-display"><strong>.border-screen-size-display</strong> (resize your screen to see the responsive color changing border)</div>
  </div>
</div>

grid

This site uses Bootstrap 3 for its grid system. More documentation can be found here.

Example

.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
Back to Top
<div class="row">
  <div class="border-screen-size-display col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="border-screen-size-display col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="border-screen-size-display col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="border-screen-size-display col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="border-screen-size-display col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

images

Below are different image classes, which can change the aspect ratio of the embedded image. The original image used below is 1200x1200.

Example

.aspect-1x1
.aspect-16x9
.aspect-2x1
.aspect-4x3
.aspect-3x4
.aspect-1x2
Back to Top
<div class="row">
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-1x1" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-1x1</strong></div>
  </div>
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-16x9" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-16x9</strong></div>
  </div>
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-2x1" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-2x1</strong></div>
  </div>
</div>

<div class="spacer"></div>

<div class="row">
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-4x3" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-4x3</strong></div>
  </div>
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-3x4" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-3x4</strong></div>
  </div>
  <div class="col-xs-12 col-lg-4 border-screen-size-display">
    <div class="background-cover aspect-1x2" style="background-image: url(https://cdn.shopify.com/s/files/1/1668/2933/files/00_EB_Knickers_Bikini_OS_Amethyst_0934_1200x.jpg?9947912445273725604)"></div>
    <div><strong>.aspect-1x2</strong></div>
  </div>
</div>



margins and padding

This is how you can control margins and padding.

Example

Hello World (No Styling)
.margin-top-small
.margin-top-medium
.margin-top-large
.margin-top-xlarge
.no-margin
.margin-bottom-small
.margin-bottom-medium
.margin-bottom-large
.margin-bottom-xlarge
.no-margin

This is class .no-pad .no-pad-xs. This is mobile-only class .no-pad-xs.
This is class .no-pad .no-pad-xs. This is mobile-only .no-pad-xs.
This is right-aligned text with class .text-right. This is class .padding-right-small.
This is left-aligned text with class .text-left. This is class .padding-left-small.
This is right-aligned text class .text-right. This is class .padding-right-medium.
This is left-aligned text with class .text-left. This is class .padding-left-medium.
This is right-aligned text class .text-right. This is class .padding-right-large.
This is left-aligned text with class .text-left. This is class .padding-left-large.
This is right-aligned text class .text-right. This is class .padding-right-xlarge.
This is left-aligned text with class .text-left. This is class .padding-left-xlarge.
Back to Top
<!-- Begin Margin Classes -->
<div class="row">
  <div class="col-xs-12 border-screen-size-display">Hello World (No Styling)</div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-top-small"><strong>.margin-top-small</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-top-medium"><strong>.margin-top-medium</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-top-large"><strong>.margin-top-large</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-top-xlarge"><strong>.margin-top-xlarge</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display no-margin"><strong>.no-margin</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-bottom-small"><strong>.margin-bottom-small</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-bottom-medium"><strong>.margin-bottom-medium</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-bottom-large"><strong>.margin-bottom-large</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display margin-bottom-xlarge"><strong>.margin-bottom-xlarge</strong></div>
</div>
<div class="row">
  <div class="col-xs-12 border-screen-size-display no-margin"><strong>.no-margin</strong></div>
</div>

<hr>

<!-- Begin Padding Classes -->
<div class="row">
  <div class="col-xs-12 col-sm-6 border-screen-size-display no-pad no-pad-xs" style="width: 200px; height: 200px; background: #e8ded8">This is class <strong>.no-pad .no-pad-xs</strong>. This is mobile-only class <strong>.no-pad-xs</strong>.</div>
  <div class="col-xs-12 col-sm-6 border-screen-size-display no-pad no-pad-xs" style="width: 200px; height: 200px; background: #b6b6b6">This is class <strong>.no-pad .no-pad-xs</strong>. This is mobile-only <strong>.no-pad-xs</strong>.</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-right padding-right-small" style="width: 200px; height: 200px; background: #e8ded8">This is right-aligned text with class <strong>.text-right</strong>. This is class <strong>.padding-right-small</strong>.</div>
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-left padding-left-small" style="width: 200px; height: 200px; background: #b6b6b6">This is left-aligned text with class <strong>.text-left</strong>. This is class <strong>.padding-left-small</strong>.</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-right padding-right-medium" style="width: 200px; height: 200px; background: #e8ded8">This is right-aligned text class <strong>.text-right</strong>. This is class <strong>.padding-right-medium</strong>.</div>
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-left padding-left-medium" style="width: 200px; height: 200px; background: #b6b6b6">This is left-aligned text with class <strong>.text-left</strong>. This is class <strong>.padding-left-medium</strong>.</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-right padding-right-large" style="width: 200px; height: 200px; background: #e8ded8">This is right-aligned text class <strong>.text-right</strong>. This is class <strong>.padding-right-large</strong>.</div>
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-left padding-left-large" style="width: 200px; height: 200px; background: #b6b6b6">This is left-aligned text with class <strong>.text-left</strong>. This is class <strong>.padding-left-large</strong>.</div>
</div>
<div class="row">
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-right padding-right-xlarge" style="width: 200px; height: 200px; background: #e8ded8">This is right-aligned text class <strong>.text-right</strong>. This is class <strong>.padding-right-xlarge</strong>.</div>
  <div class="col-xs-12 col-sm-6 border-screen-size-display text-left padding-left-xlarge" style="width: 200px; height: 200px; background: #b6b6b6">This is left-aligned text with class <strong>.text-left</strong>. This is class <strong>.padding-left-xlarge</strong>.</div>
</div>

show hide

This is how you can show or hide elements based on screen-size. Resize the screen to desktop or mobile resolution to show/hide each element.

Example

This is an element that is visible on mobile screen sizes using class .visible-xs-block
Back to Top
<div class="row border-screen-size-display visible-xs-block" style="background-color: #e8ded8">
  <div class="col-xs-12">This is an element that is visible on mobile screen sizes using class <strong>.visible-xs-block</strong></div>
</div>

<div class="row border-screen-size-display hidden-xs" style="background-color: #b6b6b6">
  <div class="col-xs-12">This is an element that is hidden on mobile screen sizes using class <strong>.hidden-xs</strong></div>
</div>

text handling

This is how you truncate text, when the text is longer than the containing element.

Example

Here is text that will be truncated using class .text-truncate when the text is longer than the containing element.
Here is text that will be truncated using class .text-truncate when the text is longer than the containing element.
Here is text that will be truncated using class .text-truncate when the text is longer than the containing element.
Back to Top
<div class="row">
  <div class="col-xs-4 border-screen-size-display text-truncate">Here is text that will be truncated using class <strong>.text-truncate</strong> when the text is longer than the containing element.</div>
  <div class="col-xs-4 border-screen-size-display text-truncate">Here is text that will be truncated using class <strong>.text-truncate</strong> when the text is longer than the containing element.</div>
  <div class="col-xs-4 border-screen-size-display text-truncate">Here is text that will be truncated using class <strong>.text-truncate</strong> when the text is longer than the containing element.</div>
</div>