Using This Site

This site has been built using Fractal and combines a style guide with code examples. The new styles are made available by attaching a class="" attribute to a HTML tag. This is inline with the concept of Semantic Markup and ensuring that presentation is separated from content. This concept means that the display of content can be adapted without needing to re-author or edit content.

The Fractal window is divided into three parts:

  1. Menu - To access the sections of the style guide
  2. Preview - Where you can see markup and code as it would appear
  3. Code & Info - Here you can see the markup and see how it’s constructed

Fractal Layout

The Menu lets you navigate through the different components included in the theme.

The Preview lets you see those components as they would be styled.

The Code & Info The HTML panel let you see the actual source code that is being rendered and can be used as a reference or to cut & paste from. The View panel lets you see the variable elements of the component and can highlight elements that can be changed - like classes for colour, and placeholder text. Finally the Notes panel displays any notes that have been included to help explain the component.