This guide contains all HTML markup and CSS styling necessary to create and Interactive Style Guide.
http://t7.github.io/Interactive-Style-Guide-Classic/
- Git http://git-scm.com
- Node & NPM http://nodejs.org
$ git clone https://github.com/t7/Interactive-Style-Guide-Classic
$ cd Interactive-Style-Guide-Classic
$ npm install
$ npm run build
$ npm run styleguide
$ npm start
NOTE: This will start a server that automatically reloads the browser when code is updated. Automatically generates a new version of the style guide anytime changes made to files in the src/ folder. No need to manually build everytime you make a change!
The Style guide will be accessible from http://localhost:8080
It contains the code that handles asset bundling and styleguide generation.
All source code for the application prototype
You are encouraged to split out your CSS into as many small, modular files as possible. The build process will combine all CSS in this folder and files in the dist/css/ folder...
Any static assets such as images, icons, PDF's, or anything else that can be downloaded.
Custom javascript goes here.
Contains HTML templates. We use http://handlebarsjs.com as our templating system.
Templates can be thought of as one of three types...
Fragment of markup that can be included by other template
Stand alone HTML pages that represent an entire screen or screen template.
Before
src/templates/partial/button.html
<button type="button" class="{{className}}">{{label}}</button>
src/templates/partial/buttons/label_button.html
---
title: Button
---
{{#extend 'document'}}
{{#content 'main'}}
{{include 'button'
label='Label Button
className='btn j-btn-label btn-sm'
}}
{{/content}}
{{/extend}}
After
dist/patterns/buttons/label_button.html
<!doctype html>
<html lang="en">
<head>
<title>Button</title>
<meta name="description" content="">
<meta charset="UTF-8">
<link rel="stylesheet" href="../../../../css/main.css">
<script src="../../../../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../../../../js/main.js"></script>
</head>
<body>
<button type="button" class="btn j-btn-label btn-sm">Label Button</button>
</body>
</html>