A (User Interface) Documentation Library built using AngularJS.
##Why 'peculiar'?
Naming is the worst. So to solve this problem, at the time of deciding what to name a project, I take the name of the song currently playing (my soundcloud is usually always on while I'm working). At the time, this was on:
Ain't That Peculiar - Oddisee Remix
##Why This Library?
I'll be writing a blog post about this in the coming days, but the tl;dr version is I wanted a tool to quickly and easily document a user interface neatly, and not worry about the documentation site styles and the user interface styles interfering with each other.
Documentation for internal use is usually a low priority, and involves quite a lot of work. So this tool can greatly speed up the process, as well as being maintainable.
##Using the Library
This library is available as a bower package. With bower installed, run:
bower install peculiar-uiThis library has a number of dependencies you'd also need to add when including the scripts in your markup.
For CSS, it requires the peculiar-ui styles, the default highlight-js theme (feel free to replace this with any other hightlight-js theme, however this was used to tie in with the peculiar style - pun not intended) and the Google Font used.
<link rel="stylesheet" href="bower_components/peculiar-ui/build/peculiar-ui.css" />
<link rel="stylesheet" href="bower_components/peculiar-ui/build/highlightjs-googlecode.css" />
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900,300italic,400italic,700italic' rel='stylesheet' type='text/css'>The scripts required:
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/highlightjs/highlight.pack.js"></script>
<script src="bower_components/angular-highlightjs/angular-highlightjs.min.js"></script>
<script src="bower_components/lodash/dist/lodash.min.js"></script>
<script src="bower_components/peculiar-ui/build/peculiar.js"></script>To load this tool into your page, you then need to add peculiar as a dependency of your angular app. If you don't have an angular app, then just create one:
angular.module('your-app', ['peculiar'])and add the app to your DOM
<html ng-app='your-app'>##Working on this Library
If you'd like to contribute or modify this library for your own needs, make sure you've got node, grunt-cli and bower installed.
npm install -g grunt-cli
npm install -g bowerThere are two grunt tasks registered to aid in development.
grunt watchWatches a change to .js and .styl and runs grunt concat and grunt stylus respectively.
grunt buildRuns: stylus, html2js, karma, jshint:beforeconcat, concat, jshint:afterconcat, uglify
####List of all available commands
grunt stylus
grunt html2js
grunt karma
grunt jshint (beforeconcat/afterconcat)
grunt uglify
grunt watch
grunt build