Stylesheets

Creating a Stylesheeet

New Stylesheet

It’s easy to create Stylesheets in your Theme using Harmony. Start by clicking the [+] at the bottom left of the Theme sidebar, then select ‘Stylesheet.’ To create a new blank stylesheet, simply type in the name of your new file, and click ‘Create.’ Your new file will be added and opened for you to begin editing.

If you like, we have a variety of preloaded common Stylesheets, such as resets and frameworks, for you to import into your theme. Simply select from the list instead of selecting ‘New Blank File.’ These files will be copied directly into your theme, for you to use and edit as you like.

Harmony supports Sass, SCSS, and LESS, which can be selected at the bottom of the Stylesheet. The code is processed after you save the stylesheet and is stored as regular css on the server.

Linking to Your Stylesheets

Harmony stores your Stylesheets in the /theme/:theme_id/stylesheets/ folder, so to link to master.css, for example, your link tag will look something like this:

<link href="/theme/{{ theme.id }}/stylesheets/master.css" rel="stylesheet" type="text/css" />

To make things even easier, you can use a Liquid filter in your template to create these link tags automatically. To link to the same file using the filter, simply put this in the <head> of your template:

{{ 'master' | stylesheet }}

This will produce the same markup as above. If you want to declare certain media types, just pass them after the filter like so:

{{ 'master' | stylesheet: 'screen, production' }}

To link to several stylesheets using one line, just pass a comma separated list of filenames (without the .css) through the stylesheets filter.

{{ 'reset,master,type' | stylesheets }}

This filter will produce the following HTML:

<link href="/theme/4b16c2c4cf395c1125000005/stylesheets/reset,master,type.css" rel="stylesheet" type="text/css" />

Media types for all stylesheets can be passed in the same way as the stylesheet filter.

Linking Stylesheets Together

When using more complicated CSS, or frameworks such as Compass, it may be necessary to include CSS files into other CSS files. Harmony makes this easy by hooking into CSS’s own @import declaration.

If the following stylesheets exist in a theme:

compass.scss
tables.scss
modules.scss

these can all be included into a single CSS file, say global.css with the following:


@import "compass"
@import "tables"
@import "modules"

This works across Stylesheets written in any language Harmony supports — CSS, SCSS or SASS. If Harmony cannot find a Stylesheet matching the @import, the @import will be left alone in the resulting CSS to allow for @import of external resources or to facilitate debugging.

IE Conditional Stylesheets

If you’d like to specify stylesheets for IE only, we provide some handy filters for that as well. Rather than remember the syntax for the IE conditional comments, simply use a filter like this:

{{ 'master' | ie_stylesheet }}

This produces the following HTML:

<!--[if IE]><link href="/theme/4b16c2c4cf395c1125000005/stylesheets/master.css" rel="stylesheet" type="text/css" /><![endif]-->

To specify a specific version of IE, <, >, <=, or >=, pass that after the filter like this:

{{ 'master' | ie_stylesheet: '<=7' }}

This will produce the following HTML:

<!--[if IE lte7]><link href="/theme/4b16c2c4cf395c1125000005/stylesheets/master.css" media="screen" rel="stylesheet" type="text/css" /><![endif]-->

Include multiple stylesheets inside the IE conditional comment by using the ie_stylesheets filter, which behaves the same as the stylesheets filter. Media types may be passed as a second parameter to the filter, like this:

{{ 'ie_print' | ie_stylesheet: '8', 'print' }}

This will produce the following HTML:

<!--[if IE 8]><link href="/theme/4b16c2c4cf395c1125000005/stylesheets/ie_print.css" media="print" rel="stylesheet" type="text/css" /><![endif]-->