A Style Guide that outputs most standard HTML elements, with the styles from your website.
CodeKit 1 or CodeKit 2 (this project uses the .kit methods).
The styles are written in LESS.
This project is written in HTML, LESS, and Javascript: it has no server-side language dependencies.
Put the style-guide folder in the base-install folder of your project.
When you have put the files and folder in the right place, open the style-guide/config.kit file. This allows you to put in your project name, and project CSS path.
<!-- KIT VARIABLE == ENTER THE NAME OF YOUR PROJECT HERE -->
<!-- $projectName = [Project X] -->
<!-- KIT VARIABLE == ENTER THE DESCRIPTION OF YOUR PROJECT HERE -->
<!-- $projectDescription = [Description of Project X] -->
<!-- KIT VARIABLE == ENTER THE PATH TO YOUR PROJECT'S CSS FILE -->
<!-- $projectCSSPath = ../css/styles.css -->
<!-- KIT VARIABLE == ENTER A "HOW TO USE" HERE -->
<!-- $sgHowTo = This style guide shows how each of the elements within your website works.
Click on "View Source" and you can then find the HTML that will generate the look and feel that you want. -->
This is a little trickier, since there are a lot of variables (although more automation might be introduced later). Set up is mainly done in style-guide/colour-config.less
This file tells the Style Guide where to find your colours file (check the path).
You may also need to modify style-guide/kit-snippets/colours.kit depending on how many brand colours you have. Currently, the project is set up to accept three brand colours, but templates for extending this are covered.
The Top Menu will be built automatically from the <h2 class="sg-element">
Wrap your elements in this:
Wrap snippets in <div data-xrayhtml="flip" class="prism zeroclip"><p>Code here</p></div>
Create a new .kit file in style-guide/kit-snippets, and write your HTML into it.
Then open index.kit, and scroll to where the snippets are called (around line 70). Then call your new file: <!-- @import "kit-snippets/[your-file-name]" --> (you do not need to include the .kit extension in your call).
The code and its presentation is generated by Filament Group's XRayHTML project.
The menu is built automatically using Janko's Table of Contents script
The smooth scroll uses a snippet from CSS Tricks
The project uses Bryan Jones's most excellent CodeKit .kit language to provide variables and includes, and for compiling the LESS.
LESS and CodeKit 2 are the best things to happen to front-end development since CSS. Fact.