HTML Documentation

This page has information about the use of HTML/CSS within the Storm Creek Shopify theme and how it can be used to format the content that appears on some pages such as blogs and custom pages. You should be able to copy/paste most of the code listed here and modify it as needed for use elsewhere on the site.

Alert Colors

These are the alert styles used for all actions on the site. Alerts are created automatically by the theme when something important happens. You can change the alert colors from the theme editor.

Alert: Default alert color.

Alert: This is a light alert.

Alert: This is a dark alert.

Success: Your changes have been saved!

Warning: Shipping delays in effect due to weather.

Error: The information you provided is not valid.

Info: We will be closed for the holidays next week.

Button Styles

This example shows how to apply button styles to clickable elements such as links and form buttons. Button colors are inherited from the base theme styles and can be changed from within the theme-editor in the backend.

<a class="btn btn-light" href="#">Light</a>
<a class="btn btn-dark" href="#">Dark</a>
<a class="btn btn-primary" href="#">Primary</a>
<a class="btn btn-secondary" href="#">Secondary</a>
<a class="btn btn-checkout" href="#">Checkout</a>
<a class="btn btn-delete" href="#">Delete</a>

<a class="btn btn-light btn-outline" href="#">Light</a>
<a class="btn btn-dark btn-outline" href="#">Dark</a>
<a class="btn btn-primary btn-outline" href="#">Primary</a>
<a class="btn btn-secondary btn-outline" href="#">Secondary</a>
<a class="btn btn-checkout btn-outline" href="#">Checkout</a>
<a class="btn btn-delete btn-outline" href="#">Delete</a>

Light Dark Primary Secondary Checkout Delete

Text Transformations

This example shows how to apply different colors to text. These classes can be applied to almost any element to affect the text inside of it. These colors are inherited from the base theme styles and can be changed from within the theme-editor in the backend.

<span class="text-base"> ... </span>
<span class="text-disabled"> ... </span>
<span class="text-active"> ... </span>
<span class="text-checked"> ... </span>
<span class="text-close"> ... </span>
<span class="text-success"> ... </span>
<span class="text-warning"> ... </span>
<span class="text-danger"> ... </span>
<span class="text-info"> ... </span>
<span class="text-primary"> ... </span>
<span class="text-secondary"> ... </span>
<span class="text-checkout"> ... </span>
<span class="text-delete"> ... </span>
<span class="text-eco"> ... </span>
<span class="text-new"> ... </span>
<span class="text-sale"> ... </span>
<span class="text-selling"> ... </span>
<span class="text-sold"> ... </span>

base disabled active checked close success warning danger info primary secondary checkout delete eco new sale selling sold

This example shows various classes for transforming how text is shown. These classes can be used by themselves or together to apply multiple transformations to the same text.

<span class="text-uppercase">upper case</span>
<span class="text-lowercase">lower case</span>
<span class="text-capitalize">capitalized</span>
<span class="text-underline">underlined</span>
<span class="text-striked">striked</span>
<span class="text-italic">italic</span>
<span class="text-bold">bold</span>
<span class="text-bolder">bolder</span>
<span class="text-faded">faded</span>
<span class="text-big">big</span>
<span class="text-bigger">bigger</span>
<span class="text-small">small</span>
<span class="text-smaller">smaller</span>
<span class="text-condense">condense</span>

upper case lower case capitalized underlined striked italic bold bolder faded big bigger small smaller condense

This example shows various classes for controlling the font size. The font is scaled using a percentage of the main theme front size configured in the theme editor.

<span class="text-80p">80%</span>
<span class="text-90p">90%</span>
<span class="text-100p">100%</span>
<span class="text-110p">110%</span>
<span class="text-120p">120%</span>
<span class="text-130p">130%</span>
<span class="text-140p">140%</span>
<span class="text-150p">150%</span>
<span class="text-160p">160%</span>
<span class="text-170p">170%</span>
<span class="text-180p">180%</span>
<span class="text-190p">190%</span>
<span class="text-200p">200%</span>

80% 90% 100% 110% 120% 130% 140% 150% 160% 170% 180% 190% 200%

Responsive Columns

Columns are used to display content side-by-side horizontally within a row. You can have up to 12 columns within a row. A column can span multiple spaces to make up for not having 12 columns in case you need less than that. It's possible to control when the switch happens by using CSS classes that target a specific breakpoint (screen size). Breakpoints start from mobile and go up in size, for example (mobile > sm > md > lg).

This example shows how to create a row with two columns when the screen size has reached a small breakpoint (when-sm). Both columns span 6 spaces (equal size) adding up to the total of 12.

<div class="row when-sm">
  <div class="col col-6">
    content
  </div>
  <div class="col col-6">
    content
  </div>
</div>

col-6

This example has three columns of the same size that switches to a row when the medium breakpoint is reached (when-md). As long as columns add up to the total of 12 they should fill the entire row.

<div class="row when-md">
  <div class="col col-4">
    content
  </div>
  <div class="col col-4">
    content
  </div>
  <div class="col col-4">
    content
  </div>
</div>

col-4

This example shows how to create two rows with reversed columns using the class (is-reversed) on one of them. This allows for placing images on alternating sides without affecting how the content shows on mobile. The image column will show first on mobile, but will be shown on the right when it switches to a row.

<div class="row when-md is-reversed">
  <div class="col col-4">
    <img class="lazyload" data-src="/path/to/img.jpg" alt="" />
  </div>
  <div class="col col-8">
    paragraph
  </div>
</div>

<div class="row when-md">
  <div class="col col-4">
    <img class="lazyload" data-src="/path/to/img.jpg" alt="" />
  </div>
  <div class="col col-8">
    paragraph
  </div>
</div>

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quaerat, atque excepturi aliquam hic culpa ducimus amet, animi debitis a facere nostrum rerum! Dignissimos dolore ipsam recusandae maxime debitis nam ab.

NOTE: When using images, there is no need to define the width/height. Images stretch 100% of their container space. Let the size of a column define the size of the image, as the example above.

Responsive Grids

Responsive grids are similar to columns, but there is no need to specify the size of each column. Grids have a fixed size for each cell that wrap around depending on the available space. It's possible to control how the grid cells are divided by using CSS classes that target a specific breakpoint. The smaller the breakpoint, the bigger the cells. Available breakpoints are: xs, sm, md, lg.

<div class="items-grid is-lg">
  <div class="item"> image </div>
  <div class="item"> image </div>
  <div class="item"> image </div>
  <div class="item"> image </div>
  <div class="item"> image </div>
  <div class="item"> image </div>
</div>

Aspect-Ratio Containers

Aspect-Ratio containers are used to wrap around content that has an unknown height, such as embedded iframes and other widgets. These container provide a way to stretch the content in a predictable way by using an common aspect ratio, such as 16:9, 4:3. Useful for showing embedded videos.

This example shows how to wrap an iframe video embed code with an aspect-ratio container to display the video with the correct height.

<div class="aspect-wrap is-16x9">
  <div class="aspect-inner">
    <iframe src="#" frameborder="0"></iframe>
  </div>
</div>

Form Elements

This example shows how create a text input with label.

<label>
  <div class="form-label">Text input</div>
  <input class="form-input input-full" type="email" placeholder="you@provider.com" />
</label>

Text input

This example shows how create a dropdown select menu with label.

<label>
  <div class="form-label">Select menu</div>
  <select class="form-select input-full">
    <option value="A">Option A</option>
    <option value="B">Option B</option>
    <option value="C">Option C</option>
  </select>
</label>

Select menu

This example shows how create a text area input with label.

<label>
  <div class="form-label">Text area</div>
  <textarea class="form-input input-full" placeholder="Enter text..."></textarea>
</label>

Text area

This example shows how create a custom file select menu with label.

<div>
  <div class="form-label">File select</div>
  <label class="form-file">
    <input class="form-file-target" type="file" />
    <div class="form-file-icon"><i class="icon icon-circle-up"></i></div>
    <div class="form-file-text"></div>
    <div class="form-file-btn">Choose file</div>
  </label>
</div>

File select

Choose file

Content Spacing

Most elements used to build content for pages already have spacing applied, such as paragraphs, rows, headings and horizontals lines. For elements that don't, it's possible to use CSS classes. These classes can be used to add spacing to elements by using margin.

<div class="push-top"> content </div>
<div class="push-bottom"> content </div>
<div class="push-left"> content </div>
<div class="push-right"> content </div>
<div class="push-vertical"> content </div>
<div class="push-horizontal"> content </div>
<div class="push-all"> content </div>