CSS built using SASS, Scut and Bootstrap. Do not make any direct modifications to the CSS directly. Update
the SASS files then recompile them.
Colours
All colours used are stored in styles/_variables.scss. Use them when creating new elements. Do
not just add hex codes or RBG values. If a colour is not present then add it to the
_variables.scss page with the other colours.
.my-class
{
background: $orange;
}
Blue
Grey
Green
Orange
Red
Light Grey
Type
Headings
There should only be one h1 tag per page. Add class .heading to the main heading item.
<h1 class="heading">
Style Guide
</h1>
h2
h3
h4
h5
h6
Text
Make a paragraph stand out with class .lead
<p class="lead">
Make a paragraph stand out with class .lead
</p>
Paragraph text is extended from Bootstrap
Unordered list item
More unordered lists
Ordered list item
Second list item
Blockquotes
<blockquote>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante."
Grid System
Bootstraps grid system is used through out the site. See their
documentation for more information on how that is used.
Along with the Bootstrap grid we have a collapsible grid system. The following grid has 4 items per row,
then collapses to 2 at the next media query.
Create more collapsible grid classes in styles/_grid.scss. This crazy happy chappy is super
responsive and has the attractive class name .grid-12-to-6-to-4-to-3-to-2-to-1:
Buttons have different sizes. The classes .button-large, .button-huge and
.button-colossal(!!) will increase the button size. If you want to make them fluid then add
the .button-fluid class to them.
You can add placeholders using placeholder="", and you can also add icons over form elements
so long as you add the over-input class, and add the icon as part of the form group.
To use our custom checkboxes and radios you need to include our pretty form control javascript plugin.
Pretty form checkboxes and radios inherit the button styles.
Post preview items will display the post preview image only, and expand articles on click or hover. We have
a custom function for generating this html.
Since we’ve had a large number of enquiries about the design tool we’ve made it into an installable Magento extension for your store. It’s completely native and requires no core hacks, you’re store will be 100% upgradeable and it will work with any other extensions. If you’d like to use the design tool on your next project or existing site please contact us.