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  tags on.

Although you can use external style sheets for styling, any CSS selectors that use  tags must be declared within the <head> section of index.html.

Read more about uploading and using files.

Required Tags

There are a few tags that are required in order for your template to be processed correctly.

Core Styling

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.

Tag: 

This file includes a build of the inuit.css CSS framework and includes the following optional components:

Nav
Island
Matrix
Block list
Breadcrumb
Link complex
Pagination

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;

<body class="">

Component Modules

Modernizr

Tag: 

Modernizr is a feature detection javascript library that enables you to provide fallbacks for modern browser features. It’s important to note that Modernizr doesn’t fix, or polyfill, unsupported features. Read the Modernizr documentation

What’s included in our custom build

Feature Detects
- @font-face
- Border Radius
- CSS Gradients
- CSS rgba
- details Element
- Inline SVG
- SVG
Extra
- Add CSS classes
APIs
- Modernizr.testStyles()
- Modernizr.testProp()
- Modernizr.testAllProps()
- Modernizr._prefixes
- Modernizr._domPrefixes

View our custom build on the Modernizr site

html5shiv

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.

Shop Styling

If your template is to be used with a shop, you will find it useful to include the  tag.

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.

Grid

At least one grid tag must be used with your WDK template, unless you want to roll your own CSS grid framework.

We utilize css-wizardry’s grid framework csswizardry-grids for the Create.net frontend. See csswizardry-grids in action

Build settings: the $gutter value is set to 24px by default.

HTML classes:

.grid - grid wrapper
.grid__item - grid item, must be direct decedents of the .grid item

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.

HTML example:

<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. one-third.

HTML example:

<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.

Fluid build

Place this tag in the <head> before your custom CSS.

Tag: 

Responsive build

Tag: 

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 width: 25%;.

The major breakpoints values are as follows.

Sass example:

$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-half instead of the default lap--one-half.

Custom build

Alternatively you can upload your own version of csswizardry-grids that will utilize the responsive classes across the system.

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:

Tag: 
Tag: 
Tag: 
Tag:

For more information please see the basics tutorial.

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.

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  and  tags.

Tag: 
Tag:

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  and  tags.

Tag: 
Tag:

For more information please see the Creating Side Columns tutorial.

Conditional Tags

The WDK supports conditional statements. Any  tag must be ended with .

Tag: 
Tag: 
Tag:

For more information, please read the Using Conditional Tags tutorial.

Last Updated: 30 April 2015

Tutorials