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.


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">base</span>
<span class="text-active">active</span>
<span class="text-checked">checked</span>
<span class="text-close">close</span>
<span class="text-info">info</span>
<span class="text-success">success</span>
<span class="text-warning">warning</span>
<span class="text-danger">danger</span>
<span class="text-primary">primary</span>
<span class="text-secondary">secondary</span>
<span class="text-checkout">checkout</span>
<span class="text-delete">delete</span>
base   active   checked   close   info   success   warning   danger   primary   secondary   checkout   delete  

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  

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-default" href="#">Default</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-default btn-outline" href="#">Default</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>

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
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
col-4
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>
Image 1
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.
Image 2
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>
Image 1
Image 2
Image 3
Image 4
Image 5
Image 6
Image 7
Image 8
Image 9
Image 10

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>

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>

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>

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="far fa-upload"></i></div>
    <div class="form-file-text"></div>
    <div class="form-file-btn">Choose file</div>
  </label>
</div>
File select

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>