Awesome

Style-Guide-Boilerplate v2.6.0

A starting point for crafting living style guides.

This project is a port of Style-Guide-Boilerplate from PHP to nodejs. It utilizes nodejs with express and handlebars to render the page.

View Demo

Note: Sample patterns have been included in the demo. Your site will have it's own unique patterns.

Screenshot

Getting Started With Style Guide Boilerplate

Download the Style Guide Boilerplate

You can clone, fork, or download the repo from GitHub. Once you have the files for Style Guide Boilerplate, you'll create a directory on your site for them.

Set up a directory on your site for the style guide

I recommend creating a directory named style-guide in your site's root directory. I think it would be awesome if I could go to anysite.com/style-guide/ and check out that site's style guide.

Hook up your own CSS into the style guide

In the <head> of Style Guide Boilerplate are custom styles for the boilerplate itself. These have all been prefixed with sg- so they hopefully shouldn't cause any conflicts with your website's own styles.

Below the custom styles for the boilerplate, you will add in your own custom stylesheet(s) which you use on your live site.

    <!-- Style Guide Boilerplate Styles -->
    <link rel="stylesheet" href="css/sg-style.css">

    <!-- Replace below stylesheet with your own stylesheet -->
    <link rel="stylesheet" href="css/style.css">

Start the server

To start the server, go to the project's root directory and run npm install and then node server.js. The server should state the port that it's running on (8080 by default), and you can open http://localhost:8080/ in a browser to view the style guide.

Review your live site CSS

You should be able to go to yoursite.com/style-guide/ and see how your live site's CSS affects base elements. The last step is creating your sites custom patterns/modules.

Create custom patterns

To create custom patterns like buttons, breadcrumbs, alert messages, etc., create a new .html file and add your HTML markup into the file.

Save the file as pattern-name.html into the markup/patterns directory inside of your style-guide directory.

You should now be able to see the new patterns at yoursite.com/style-guide/

Create personalized documentation

To create personalized documentation for your markup examples, create a new .html file and name it whatever your markup snippet is named.

Save the file as markup-name.html into the doc/base or doc/patterns directory inside of your style-guide directory.

For example, if you want to create doc for markup/patterns/breadcrumbs.html, create a file called breadcrumbs.html and save it into doc/patterns.

You should now be able to see the new doc at yoursite.com/style-guide/