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.
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>
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>
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>
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>
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>
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>
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>
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>
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="icon icon-circle-up"></i></div> <div class="form-file-text"></div> <div class="form-file-btn">Choose file</div> </label> </div>
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>