Overview:

This project has been set up with Ruby, Sass, Node, NPM, Grunt, and Bower .

Requirements:

• Ruby
• Sass
• Node and NPM
• Grunt
• Bower

Setup:

In the console or terminal, run the following commands from the root directory of the project.

npm install
bower install
grunt buildStyleGuide

The buildStyleGuide command will create an index.html file in the root of the project. The file can be accessed directly, or served via a server such as Apache. The styleguide refrences the following assets:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="css/styleguide.css">

If support for Internet Explorer less than version 9 is desired:

<!--[if lt IE 9]>
    <script src="js/vendor/html5-3.6-respond-1.4.2.min.js"></script>
<![endif]-->

To create the components in this guide, the following JavaScript libraries were used, but are not absolutely necessary, depending on the libraries your project will use.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="bower_components/jquery-resizable/dist/jquery-resizable.min.js"></script>
<script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/jquery-extendext/jQuery.extendext.min.js"></script>
<script src="../bower_components/jQuery-QueryBuilder/dist/js/query-builder.min.js"></script>
<script src="js/main.js"></script>

How it Works:

The individual components live in subdirectories of components. The styles are all in the sass directory. Templates for the styleguide are in the 'templates' directory. The iframe source pages are all located in the 'frames' directory. The styleguide sidebar links are in a file called links.html in the templates directory.

grunt buildStyleGuide will recursively read each index.html file in the components directory and subdirectories. The contents are then combined with the iframe header.html and footer.html tempates, and then written to a file with the name of it's directory, and placed in the frames directory.

Finally, all of the frames files are written to the index.html file in the root.

grunt build will build the style guide into the dist directory with only the files necessary to view and interact with the style guide. It omits development dependencies such as node_modules and files in bower_components that aren't needed for the build.

Contributing:

New components can be created and added to a current component file. Additionally, a new subdirectory can be created in the components directory. New components can be created, and added to the new directory's index.html file. Afterwards, grunt buildStyleGuide needs to be run to rebuild the styleguide. When editing CSS or JavaScript files, the grunt command can be run to watch and reload the styleguide when changes are made.