Requirements & Restrictions
Template HTML File
Your starting point for building a website using the WDK is with a index.html.
This file is used for all page layouts and is the only file you can process any
<!--WDK--> tags on.
Although you can use external style sheets for styling, any CSS selectors that use
<!--WDK--> tags must be declared within the
<head> section of index.html.
Read more about uploading and using files.
There are a few tags that are required in order for your template to be processed correctly.
To style the core Create.net frontend components, patterns and widgets we provide a vanilla (un-themed) version of our CSS boilerplate. This tag should be placed in the head of your document in order to import the default CSS styling. Your custom CSS style sheet(s) should be placed below this tag.
This file includes a build of the inuit.css CSS framework and includes the following optional components:
- Block list
- Link complex
N.B. We are working toward abstracting these components into separate tags, see Component Modules below
Body helper classes
Many of the Create features rely on the use of classes on the page
<body for styling. These classes are dynamic and will change based on what features and settings the user has. There is a WDK tag to output these classes and it should be used like this;
What’s included in our custom build
- Feature Detects
- Border Radius
- CSS Gradients
- CSS rgba
- details Element
- Inline SVG
- Add CSS classes
This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer. For more info view the forked repository on GitHub.
If your template is to be used with a shop, you will find it useful to include the
This tag provides the following selection of base shop styles; - Category Layout (The included grid widths are not currently responsive) - Product Page Layout - Product Summary Object (The indivdual product ‘cards’ that include an image, price and product title).
You may wish to add your own shop CSS to compliment these styles.
At least one grid tag must be used with your WDK template, unless you want to roll your own CSS grid framework.
Build settings: the
$gutter value is set to
24px by default.
.grid- grid wrapper
.grid__item- grid item, must be direct decedents of the
N.B. The framework requires all whitespace to be removed form between
grid__item elements, the recommended way of doing this is by using HTML comments.
<div class="grid"> <div class="grid__item"> […] </div><!-- --><div class="grid__item"> […] </div> </div>
Sizing the grid items is a simple as adding the fractional classes e.g.
<div class="grid"> <div class="grid__item one-third"> […] </div><!-- --><div class="grid__item two-thirds"> […] </div> </div>
We recommend reading the csswizardry-grids docs for more information.
Place this tag in the
<head> before your custom CSS.
The responsive build has extra classes based on the major breakpoints set in the build. Similar to the above sizing classes, the responsive classes are prefixed to enable you to resize the grid based on the major breakpoints e.g.
lap-one-half would size the grid item to
width: 50%; and
desk-one-quarter would resize to
The major breakpoints values are as follows.
$breakpoints: ( 'palm' '(max-width: 480px)', 'lap' '(min-width: 481px)', 'lap-mid' '(min-width: 719px)', 'desk' '(min-width: 1024px)' );
Please note: We have extended the grid responsive grid classes to include one hyphen rather than two e.g.
lap-one-halfinstead of the default
Alternatively you can upload your own version of csswizardry-grids that will utilize the responsive classes across the system.
Header & Footer
Your index.html file must contain all of the header and footer tags. These tags help us to identify your templates layout and instruct us where to put the main page content.
These tags are:
For more information please see the basics tutorial.
Display Site Footer
This tag may be placed anywhere within the header or footer tags, if you leave it out, it will automatically be placed at the opening of your footer tag.
For more information please see the footer tutorial.
We offer 2 methods for creating menus: our drop down menu tag returns a full
<ul> <li> structure, however we also offer a manual method for creating your own menu loops.
If you opt to build your own, you must include the
Please see the glossary for examples on individual tags and for more information please read the tutorial on creating menu loops.
Side Column Loops
Similar to menu loops, when writing a side column, you must include the
For more information please see the Creating Side Columns tutorial.
The WDK supports conditional statements. Any
<!--WDK:if--> tag must be ended with
For more information, please read the Using Conditional Tags tutorial.
Last Updated: 30 April 2015