Skip to content
This repository
Browse code

Releasing

  • Loading branch information...
commit ae8123673fb9c804f76238c0bc43d3d84148165b 1 parent c375675
Hugh Kennedy authored

Showing 46 changed files with 7,220 additions and 0 deletions. Show diff stats Hide diff stats

  1. +1 0  .gitignore
  2. +8 0 Makefile
  3. +92 0 README.md
  4. +370 0 bin/kss-node
  5. +61 0 demo/elements/buttons.less
  6. +116 0 demo/forms/base.less
  7. +213 0 demo/styleguide.md
  8. +15 0 demo/styles.less
  9. +12 0 gh-pages.sh
  10. +256 0 gh-pages/index.html
  11. +1 0  gh-pages/public/kss.css
  12. +47 0 gh-pages/public/kss.js
  13. +301 0 gh-pages/public/kss.less
  14. +9 0 gh-pages/public/less.js
  15. +1,477 0 gh-pages/public/prettify.js
  16. +1 0  gh-pages/public/style.css
  17. +139 0 gh-pages/section-1.html
  18. +199 0 gh-pages/section-2.html
  19. +1 0  index.js
  20. +481 0 lib/kss.js
  21. +59 0 lib/kss_modifier.js
  22. +86 0 lib/kss_section.js
  23. +66 0 lib/kss_styleguide.js
  24. +105 0 lib/template/index.html
  25. +47 0 lib/template/public/kss.js
  26. +301 0 lib/template/public/kss.less
  27. +9 0 lib/template/public/less.js
  28. +1,477 0 lib/template/public/prettify.js
  29. +50 0 lib/walk.js
  30. +33 0 package.json
  31. +84 0 test/common.js
  32. 0  test/fixtures-styles/includes/buttons.js
  33. 0  test/fixtures-styles/includes/buttons.less
  34. +25 0 test/fixtures-styles/options-markup.less
  35. +23 0 test/fixtures-styles/options-typos.less
  36. +43 0 test/fixtures-styles/section-queries.less
  37. +45 0 test/fixtures-styles/sections-description.less
  38. +51 0 test/fixtures-styles/sections-modifiers.less
  39. 0  test/fixtures-styles/sections-raw.less
  40. +55 0 test/fixtures-styles/sections-status.less
  41. +32 0 test/fixtures-styles/style.css
  42. +39 0 test/fixtures-styles/style.less
  43. +454 0 test/kss.js
  44. +64 0 test/kss_modifier.js
  45. +120 0 test/kss_section.js
  46. +152 0 test/kss_styleguide.js
1  .gitignore
... ... @@ -0,0 +1 @@
  1 +/node_modules
8 Makefile
... ... @@ -0,0 +1,8 @@
  1 +test:
  2 + mocha -u tdd --reporter spec
  3 +
  4 +gh-pages:
  5 + ./bin/kss-node demo gh-pages -l demo/styles.less
  6 +
  7 +.PHONY: test
  8 +.PHONY: gh-pages
92 README.md
Source Rendered
... ... @@ -0,0 +1,92 @@
  1 +# kss-node
  2 +
  3 +This is a NodeJS implementation of [Knyle Style Sheets](https://github.com/kneath/kss) (KSS), "a documentation syntax for CSS". Beyond that, it's intended to have syntax readable by humans *and* machines - hence, this module can be used to create a "living styleguide". The methodology and ideas behind Knyle Style Sheets are contained in [the specification](https://github.com/kneath/kss/blob/master/SPEC.md).
  4 +
  5 +There's an example project in the [demo directory](https://github.com/hughsk/kss-node/tree/master/demo) of this repo.
  6 +
  7 +## Installation
  8 +
  9 +Just one line: `npm install kss`. If you want to use the command line interface, make sure the installation is global: `npm install -g kss`
  10 +
  11 +## Using the CLI
  12 +
  13 +To get you up and running quickly, a styleguide generator is included that can be used from the command line. It parses a directory of stylesheets and spits out a set of static HTML files like the ones used on this site.
  14 +
  15 + Usage:
  16 + kss-node sourcedir [destdir] --less [file] --css [file]
  17 +
  18 + Options:
  19 + -l, --less Compile and include a LESS stylesheet [string]
  20 + -c, --css Compile and include a CSS stylesheet [string]
  21 + -t, --template Use a custom template to build your styleguide [string]
  22 +
  23 +You'll need to specify a directory containing all of your CSS files to be parsed for documentation as the first argument. Optionally, the second argument can be used to specify a target directory. Your CSS won't be included by default, hence you should use the `--less`, `--css`, etc. flags to point to a stylesheet to compile and include. You can generate a copy of the demo styleguide like so:
  24 +
  25 + $ kss-node demo styleguide --less demo/styles.less
  26 +
  27 +You can create your own templates too, either by editing the contents of the `lib/template` directory or using the `--template` flag to point to your own.
  28 +
  29 +## Using kss-node from Node
  30 +
  31 + var kss = require('kss'),
  32 + options = {
  33 + markdown: false
  34 + };
  35 +
  36 + kss.traverse('public/stylesheets/', options, function(err, styleguide) {
  37 + if (err) { throw err; }
  38 +
  39 + styleguide.section('2.1.1') // <KssSection>
  40 +
  41 + styleguide.section('2.1.1').description() // A button suitable for giving stars to someone
  42 +
  43 + styleguide.section('2.1.1').modifiers(0) // <KssModifier>
  44 +
  45 + styleguide.section('2.1.1').modifiers(0).name // ':hover'
  46 +
  47 + styleguide.section('2.1.1').modifiers(0).description // 'Subtle hover highlight'
  48 +
  49 + styleguide.section('2.1.1').modifiers(':hover').description() // 'Subtle hover highlight'
  50 +
  51 + styleguide.section('2.1.1').modifiers(0).className() // 'pseudo-class-hover'
  52 +
  53 + styleguide.section('2.x.x') // [<KssSection>, ...]
  54 +
  55 + styleguide.section('2.1.1').modifiers() // [<KssModifier>, ...]
  56 +
  57 + });
  58 +
  59 +Check out the [Module API](https://github.com/hughsk/kss-node/wiki/Module-API) for more information.
  60 +
  61 +## Differences
  62 +
  63 +I've tried to avoid cluttering up the module with extra features, but have made a couple of optional additions to completely automate a few more things.
  64 +
  65 +Take a look at the [demo project](http://github.com/hughsk/kss-node/tree/master/demo) for some examples.
  66 +
  67 +* **Overview Document**. This "overview" page is generated from a Markdown file, which you should place in the directory you're generating from, just name it `styleguide.md` and it will be included in the final styleguide automatically.
  68 +
  69 +
  70 +* **HTML Markup**. In `kss-node` you can include sample markup in your styleguide entries. This is not only helpful for newcomers to a project, but is also used by the generator to include samples in your styleguide - just start a paragraph in your description section with `Markup:` like so:
  71 +
  72 +```less
  73 +// Buttons
  74 +//
  75 +// Buttons can and should be clicked.
  76 +//
  77 +// Markup: <button class="button {$modifiers}">
  78 +//
  79 +// :hover - Highlight the button when hovered.
  80 +//
  81 +// Styleguide 1.1
  82 +```
  83 +
  84 +* **Multi-line descriptions**. You can run your descriptions over multiple lines and paragraphs, and if you don't want to include the "modifiers" section you don't have to.
  85 +
  86 +## Development
  87 +
  88 +Forking, hacking, tearing apart of this module welcome - it still needs some cleaning up.
  89 +
  90 +If you've got [mocha](https://github.com/visionmedia/mocha) installed, you can run the module's tests with `npm test` or `make test`.
  91 +
  92 +To generate a new version of the demo styleguide, use `make gh-pages`. After committing your changes to master you can use the `gh-pages.sh` script to move this over to the `gh-pages` branch real quick.
370 bin/kss-node
... ... @@ -0,0 +1,370 @@
  1 +#!/usr/bin/env node
  2 +
  3 +var kss = require(__dirname + '/../lib/kss.js'),
  4 + handlebars = require('handlebars'),
  5 + cleanCss = require('clean-css'),
  6 + optimist = require('optimist'),
  7 + marked = require('marked'),
  8 + wrench = require('wrench'),
  9 + util = require('util'),
  10 + less = require('less'),
  11 + path = require('path'),
  12 + fs = require('fs'),
  13 + template, styleguide,
  14 + generatePage, generateStylesheet,
  15 + options = {
  16 + templateDirectory: __dirname + '/../lib/template',
  17 + sourceDirectory: __dirname + '/../demo',
  18 + destinationDirectory: process.cwd() + '/styleguide'
  19 + },
  20 + argv;
  21 +
  22 +
  23 +/**
  24 + * CLI argument parsing, thanks to Substack's optimist.
  25 + * @type {Object}
  26 + */
  27 +argv = require('optimist')
  28 + .usage('Usage:\n $0 sourcedir [destdir] --less [file] --css [file]')
  29 + .check(function(args) {
  30 + if (args._.length < 1) {
  31 + throw new Error('Please provide a source directory');
  32 + }
  33 + })
  34 + .string('l')
  35 + .alias('l', 'less')
  36 + .describe('l', 'Compile and include a LESS stylesheet')
  37 +
  38 + // .string('s')
  39 + // .alias('s', 'sass')
  40 + // .describe('s', 'Compile and include a SASS stylesheet')
  41 +
  42 + .string('c')
  43 + .alias('c', 'css')
  44 + .describe('c', 'Compile and include a CSS stylesheet')
  45 +
  46 + .string('t')
  47 + .alias('t', 'template')
  48 + .describe('t', 'Use a custom template to build your styleguide')
  49 +
  50 + .argv;
  51 +
  52 +options.sourceDirectory = path.relative(process.cwd(), argv['_'][0]);
  53 +if (argv['_'].length > 1) {
  54 + options.destinationDirectory = path.relative(process.cwd(), argv['_'][1]);
  55 +}
  56 +if (argv.template) {
  57 + options.templateDirectory = path.relative(process.cwd(), argv.template);
  58 +}
  59 +
  60 +console.log('');
  61 +console.log('Generating your KSS Styleguide!');
  62 +console.log('');
  63 +console.log(' * Source: ' + path.resolve(options.sourceDirectory));
  64 +console.log(' * Destination: ' + path.resolve(options.destinationDirectory));
  65 +console.log(' * Template: ' + path.resolve(options.templateDirectory));
  66 +console.log('');
  67 +
  68 +// Compile the Handlebars template
  69 +template = fs.readFileSync(options.templateDirectory + '/index.html', 'utf8');
  70 +template = handlebars.compile(template);
  71 +
  72 +// Create a new "styleguide" directory and copy the contents
  73 +// of "public" over.
  74 +try {
  75 + fs.mkdirSync(options.destinationDirectory);
  76 +} catch (e) {}
  77 +
  78 +wrench.copyDirSyncRecursive(
  79 + options.templateDirectory + '/public',
  80 + options.destinationDirectory + '/public'
  81 +);
  82 +
  83 +// Generate the static HTML pages in the next tick, i.e. after the other functions have
  84 +// been defined and handlebars helpers set up.
  85 +process.nextTick(function() {
  86 + less.render(fs.readFileSync(options.destinationDirectory + '/public/kss.less', 'utf8'), function(err, css) {
  87 + if (err) {
  88 + console.log(err);
  89 + throw err;
  90 + }
  91 +
  92 + css = cleanCss.process(css);
  93 +
  94 + console.log('...compiling LESS');
  95 + // Write the compiled LESS styles from the template.
  96 + fs.writeFileSync(options.destinationDirectory + '/public/kss.css', css, 'utf8');
  97 +
  98 + console.log('...parsing your styleguide');
  99 + kss.traverse(options.sourceDirectory, {
  100 + multiline : true,
  101 + markdown : true,
  102 + markup : true
  103 + }, function(err, sg) {
  104 + styleguide = sg;
  105 +
  106 + var sections = styleguide.section('*.'),
  107 + i, sectionCount = sections.length,
  108 + sectionRoots = [], currentRoot,
  109 + rootCount, childSections = [],
  110 + pages = {};
  111 +
  112 + if (err) {
  113 + throw err;
  114 + }
  115 +
  116 + // Accumulate all of the sections' first indexes
  117 + // in case they don't have a root element.
  118 + for (i = 0; i < sectionCount; i += 1) {
  119 + currentRoot = sections[i].reference().match(/[0-9]*\.?/)[0].replace('.', '');
  120 +
  121 + if (!~sectionRoots.indexOf(currentRoot)) {
  122 + sectionRoots.push(currentRoot);
  123 + }
  124 + }
  125 +
  126 + sectionRoots.sort();
  127 + rootCount = sectionRoots.length;
  128 +
  129 + // Now, group all of the sections by their root
  130 + // reference, and make a page for each.
  131 + for (i = 0; i < rootCount; i += 1) {
  132 + childSections = styleguide.section(sectionRoots[i]+'.*');
  133 +
  134 + generatePage(
  135 + styleguide, childSections,
  136 + sectionRoots[i], pages, sectionRoots
  137 + );
  138 + }
  139 +
  140 + generateIndex(styleguide, childSections, pages, sectionRoots);
  141 + generateStylesheet(argv);
  142 + });
  143 + });
  144 +});
  145 +
  146 +// Compile LESS/CSS files into a single "style.css" if required
  147 +generateStylesheet = function(argv) {
  148 + var stylebuffer = '',
  149 + count = 0,
  150 + type,
  151 + projectStyles = {
  152 + less: argv.less,
  153 + css : argv.css
  154 + };
  155 +
  156 + console.log('...compiling additional stylesheets');
  157 +
  158 + for (type in projectStyles) {
  159 + if (typeof projectStyles[type] === 'undefined') continue;
  160 + switch (type) {
  161 + case 'less':
  162 + count += 1;
  163 +
  164 + // Hackish? Sure. But it works.
  165 + less.render("@import '"+path.relative(process.cwd(), projectStyles[type])+"';", function(err, css) {
  166 + if (err) {
  167 + throw err;
  168 + }
  169 + stylebuffer += css;
  170 + count -= 1;
  171 +
  172 + if (count < 1) {
  173 + saveStylesheet(stylebuffer);
  174 + }
  175 + });
  176 + break;
  177 + case 'css':
  178 + stylebuffer += fs.readFileSync(projectStyles[Key]);
  179 + break;
  180 + }
  181 + }
  182 +
  183 + if (!count) {
  184 + saveStylesheet(stylebuffer);
  185 + }
  186 +};
  187 +
  188 +// Used by generateStylesheet to minify and then
  189 +// save its final buffer to a single CSS file.
  190 +saveStylesheet = function(buffer) {
  191 + buffer = cleanCss.process(buffer);
  192 + fs.writeFileSync(
  193 + options.destinationDirectory + '/public/style.css',
  194 + buffer, 'utf8'
  195 + );
  196 +};
  197 +
  198 +// Renders the handlebars template for a section and saves it to a file.
  199 +// Needs refactoring for clarity.
  200 +generatePage = function(styleguide, sections, root, pages, sectionRoots) {
  201 + console.log(
  202 + '...generating section '+root+' [',
  203 + styleguide.section(root) ? styleguide.section(root).header() : 'Unnamed',
  204 + ']'
  205 + );
  206 + fs.writeFileSync(options.destinationDirectory + '/section-'+root+'.html',
  207 + template({
  208 + styleguide: styleguide,
  209 + sections: jsonSections(sections),
  210 + rootNumber: root,
  211 + sectionRoots: sectionRoots,
  212 + overview: false
  213 + })
  214 + );
  215 +};
  216 +
  217 +// Equivalent to generatePage, however will take `styleguide.md` and render it
  218 +// using first Markdown and then Handlebars
  219 +generateIndex = function(styleguide, sections, pages, sectionRoots) {
  220 + try {
  221 + console.log('...generating styleguide overview');
  222 + fs.writeFileSync(options.destinationDirectory + '/index.html',
  223 + template({
  224 + styleguide: styleguide,
  225 + sectionRoots: sectionRoots,
  226 + sections: jsonSections(sections),
  227 + rootNumber: 0,
  228 + overview: marked(fs.readFileSync(options.sourceDirectory + '/styleguide.md', 'utf8'))
  229 + })
  230 + );
  231 + } catch(e) {
  232 + console.log('...no styleguide overview generated:', e.message);
  233 + }
  234 +};
  235 +
  236 +// Convert an array of `KssSection` instances to a JSON object.
  237 +jsonSections = function(sections) {
  238 + return sections.map(function(section) {
  239 + return {
  240 + header: section.header(),
  241 + description: section.description(),
  242 + reference: section.reference(),
  243 + depth: section.data.refDepth,
  244 + deprecated: section.deprecated(),
  245 + experimental: section.experimental(),
  246 + modifiers: jsonModifiers(section.modifiers())
  247 + };
  248 + });
  249 +};
  250 +
  251 +// Convert an array of `KssModifier` instances to a JSON object.
  252 +jsonModifiers = function(modifiers) {
  253 + return modifiers.map(function(modifier) {
  254 + return {
  255 + name: modifier.name(),
  256 + description: modifier.description(),
  257 + className: modifier.className()
  258 + };
  259 + });
  260 +};
  261 +
  262 +/**
  263 + * Equivalent to the {#if} block helper with multiple arguments.
  264 + */
  265 +handlebars.registerHelper('ifAny', function() {
  266 + var argLength = arguments.length - 2,
  267 + content = arguments[argLength + 1],
  268 + success = true;
  269 +
  270 + for (var i = 0; i < argLength; i += 1) {
  271 + if (!arguments[i]) {
  272 + success = false;
  273 + break;
  274 + }
  275 + }
  276 +
  277 + return success ? content(this) : content.inverse(this);
  278 +});
  279 +
  280 +/**
  281 + * Returns a single section, found by its reference number
  282 + * @param {String|Number} reference The reference number to search for.
  283 + */
  284 +handlebars.registerHelper('section', function(reference) {
  285 + var section = styleguide.section(reference);
  286 + if (!section) return false;
  287 +
  288 + return arguments[arguments.length-1](section.data);
  289 +});
  290 +
  291 +/**
  292 + * Loop over a section query. If a number is supplied, will convert into
  293 + * a query for all children and descendants of that reference.
  294 + * @param {Mixed} query The section query
  295 + */
  296 +handlebars.registerHelper('eachSection', function(query) {
  297 + var sections,
  298 + i, l, buffer = "";
  299 +
  300 + if (!query.match(/x|\*/g)) {
  301 + query = query + ".x.*";
  302 + }
  303 + sections = styleguide.section(query);
  304 + if (!sections) return false;
  305 +
  306 + l = sections.length;
  307 + for (i = 0; i < l; i++) {
  308 + buffer += arguments[arguments.length-1](sections[i].data);
  309 + }
  310 +
  311 + return buffer;
  312 +});
  313 +
  314 +/**
  315 + * Similar to the {#eachSection} helper, however will loop over each modifier
  316 + * @param {Object} section Supply a section object to loop over it's modifiers. Defaults to the current section.
  317 + */
  318 +handlebars.registerHelper('eachModifier', function(section) {
  319 + var modifiers, i, l, buffer = '';
  320 +
  321 + // Default to current modifiers, but allow supplying a custom section
  322 + if (section.data) modifiers = section.data.modifiers;
  323 + modifiers = modifiers || this.modifiers || false;
  324 +
  325 + if (!modifiers) return {};
  326 +
  327 + l = modifiers.length;
  328 + for (i = 0; i < l; i++) {
  329 + buffer += arguments[arguments.length-1](modifiers[i].data || '');
  330 + }
  331 + return buffer;
  332 +});
  333 +
  334 +/**
  335 + * Outputs a modifier's markup, if possible.
  336 + * @param {Object} modifier Specify a particular modifier object. Defaults to the current modifier.
  337 + */
  338 +handlebars.registerHelper('modifierMarkup', function(modifier) {
  339 + modifier = arguments.length < 2 ? this : modifier || this || false;
  340 +
  341 + if (!modifier) {
  342 + return false;
  343 + }
  344 +
  345 + // Maybe it's actually a section?
  346 + if (modifier.modifiers) {
  347 + return new handlebars.SafeString(
  348 + modifier.markup
  349 + );
  350 + }
  351 +
  352 + // Otherwise return the modifier markup
  353 + return new handlebars.SafeString(
  354 + new kss.KssModifier(modifier).markup()
  355 + );
  356 +});
  357 +
  358 +/**
  359 + * Quickly avoid escaping strings
  360 + * @param {String} arg The unescaped HTML
  361 + */
  362 +handlebars.registerHelper('html', function(arg) {
  363 + return new handlebars.SafeString(arg || '');
  364 +});
  365 +
  366 +process.on('exit', function() {
  367 + console.log('');
  368 + console.log('Generation completed successfully!');
  369 + console.log('');
  370 +});
61 demo/elements/buttons.less
... ... @@ -0,0 +1,61 @@
  1 +// Buttons
  2 +//
  3 +// A majority of buttons in the site are built from the same base class.
  4 +//
  5 +// Markup:
  6 +// <a href="#" class="button {$modifiers}">Link Button</a>
  7 +// <button class="button {$modifiers}">Button Element</button>
  8 +// <input type="button" class="button {$modifiers}" value="input[type='button']"/>
  9 +//
  10 +// :hover - Highlight the button when hovered.
  11 +// :disabled - Make the button change appearance to reflect it being disabled.
  12 +// .primary - Indicate that the button is the primary feature of this form.
  13 +// .remove - Indicate that the button will remove a feature, or other negative connotations.
  14 +//
  15 +// Styleguide 1.1
  16 +.button {
  17 + @color:#aaa;
  18 +
  19 + -webkit-appearance:none;
  20 + -moz-appearance:none;
  21 + appearance:none;
  22 +
  23 + padding:10px 20px;
  24 +
  25 + color:#fff;
  26 +
  27 + font-family:Helvetica, Arial, sans-serif;
  28 + font-size:16px;
  29 + font-weight:bold;
  30 + text-transform:lowercase;
  31 + text-decoration:none;
  32 +
  33 + cursor:pointer;
  34 +
  35 + border-radius:3px;
  36 + .button-colorize(@color);
  37 +
  38 + &:hover {
  39 + .button-colorize(lighten(@color, 8%));
  40 + border:1px solid darken(@color, 20%);
  41 + }
  42 + &.primary {
  43 + .button-colorize(#5c4);
  44 + }
  45 + &:disabled {
  46 + .button-colorize(lighten(@color, 20%));
  47 + cursor:default;
  48 + }
  49 + &.remove {
  50 + .button-colorize(#c54);
  51 + }
  52 +}
  53 +
  54 +.button-colorize(@color) {
  55 + background-color:@color;
  56 + border:1px solid darken(@color, 20%);
  57 +
  58 + text-shadow:0 2px 0 darken(@color, 10%);
  59 + box-shadow:0 3px 0 0 darken(@color, 30%), inset 0 1px 3px rgba(255,255,255,0.4);
  60 + background-image:-webkit-linear-gradient(top, rgba(255,255,255, 0.125) 0%, rgba(0,0,0, 0.125) 100%);
  61 +}
116 demo/forms/base.less
... ... @@ -0,0 +1,116 @@
  1 +// Text Input
  2 +//
  3 +// Below are the text-oriented form elements used on the site.
  4 +//
  5 +// This could actually be a **complete** Markdown summary of the following sections.
  6 +// But I wouldn't know what to write. Here's a link to [Google](http://www.google.com) though.
  7 +//
  8 +// Styleguide 2.1
  9 +
  10 +
  11 +// Single-Line Text Boxes
  12 +//
  13 +// Your standard, everyday text boxes.
  14 +//
  15 +// :hover - Highlight the text box when hovering
  16 +// :focus - Similar to `:hover`, however it should demand more attention than when an input is simply hovered.
  17 +// :disabled - When disabled, the input's appearance should reflect as such.
  18 +//
  19 +// Markup: <input type="text" class="{$modifiers}" value="Text"/>
  20 +//
  21 +// Styleguide 2.1.1
  22 +input[type='text'] {
  23 + -webkit-appearance: none;
  24 + -moz-appearance: none;
  25 + appearance: none;
  26 +
  27 + box-sizing:border-box;
  28 +
  29 + font-size:14px;
  30 + line-height:1.5em;
  31 + padding:8px;
  32 +
  33 + border:1px solid #aaa;
  34 + background-color:#eee;
  35 + outline:0;
  36 +
  37 + border-radius:3px;
  38 + box-shadow:inset 1px 1px 1px rgba(0, 0, 0, 0.15);
  39 +
  40 + &:hover {
  41 + border-color:#999;
  42 + background-color:#f0f0f0;
  43 + }
  44 +
  45 + &:focus {
  46 + border-color:#89e;
  47 + background-color:#fff;
  48 + box-shadow:inset 1px 1px 2px rgba(20, 20, 120, 0.3);
  49 + }
  50 +
  51 + &:disabled {
  52 + border-color:#ccc;
  53 + background-color:#eee;
  54 + color:#999;
  55 + }
  56 +}
  57 +
  58 +// Label/Textbox Pairs
  59 +//
  60 +// All labelled textboxes should be included in a wrapper `<div>` element for both layout
  61 +// convenience and specific styling.
  62 +//
  63 +// Markup:
  64 +// <div class="mod-input text {$modifiers}">
  65 +// <label>Text Label</label>
  66 +// <input type="text" value="Text Input"/>
  67 +// </div>
  68 +//
  69 +// .disabled - To be used when the text input inside is expected to be disabled.
  70 +// .invalid - To be used if the input has failed a validation check.
  71 +// .valid - To be used if the input has passed a validation check (intended for live validation in particular).
  72 +//
  73 +// Styleguide 2.1.2
  74 +.mod-input {
  75 + position:relative;
  76 + display:block;
  77 +
  78 + &>label {
  79 + width:45%; font-weight:bold;
  80 + }
  81 +
  82 + &>input, &>label {
  83 + display : -moz-inline-stack;
  84 + display : inline-block;
  85 + zoom : 1;
  86 + *display : inline;
  87 + }
  88 +
  89 + &.disabled {
  90 + color:#888;
  91 + input {
  92 + border-color:#ccc;
  93 + background-color:#eee;
  94 + color:#999;
  95 + }
  96 + }
  97 +
  98 + &.invalid {
  99 + label {
  100 + color:#911;
  101 + }
  102 + input {
  103 + border-color:#e65;
  104 + background-color:#fdd;
  105 + }
  106 + }
  107 + &.valid {
  108 + label {
  109 + color:#191;
  110 + }
  111 + input {
  112 + border-color:#6e5;
  113 + background-color:#dfd;
  114 + }
  115 + }
  116 +}
213 demo/styleguide.md
Source Rendered
... ... @@ -0,0 +1,213 @@
  1 +<h1 class="kss-title kss-title-main"> Overview </h1>
  2 +
  3 +This is a demo of [kss-node](http://github.com/hughsk/kss-node)'s built-in styleguide generator. The module is essentially a reimplementation of Kyle Kneath's original Ruby library, [KSS](http://github.com/kneath/kss), in Node:
  4 +
  5 +> Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.
  6 +> Specifically, KSS is a documentation specification and styleguide format.
  7 +> It is **not** a preprocessor, CSS framework, naming convention, or specificity guideline.
  8 +>
  9 +> KSS is a set of guidelines to help you produce an HTML styleguide tied to CSS documentation that is nice to read in plain text, yet structured enough to be automatically extracted and processed by a machine.
  10 +
  11 +The upshot of this is that KSS can be used for generating CSS documentation pages. This site is generated with the `kss-node` command-line tool used on this [demo project](https://github.com/hughsk/kss-node/tree/master/demo).
  12 +
  13 +Check out the [project on Github](https://github.com/hughsk/kss-node) for more information, or read on for details on how to document your stylesheets for KSS.
  14 +
  15 +# Specification
  16 +
  17 +The text from here on is mostly taken from the [KSS specification](https://github.com/kneath/kss/blob/master/SPEC.md).
  18 +
  19 +Unlike TomDoc, not every CSS rule should be documented. You should document a rule declaration when the rule can accurately describe a visual UI element in the styleguide. Each element should have one documentation block describing that particular UI element's various states.
  20 +
  21 +KSS documentation is hierarchical in nature — any documentation blocks at any point within the styleguide hierarchy apply to the documentation blocks beneath that level. This means that documentation for 2.1 applies to documentation for 2.1.3.
  22 +
  23 +## Format
  24 +
  25 +The basic format for KSS documentation can be best explained in an example:
  26 +
  27 +```css
  28 +/*
  29 +A button suitable for giving stars to someone.
  30 +
  31 +:hover - Subtle hover highlight.
  32 +.stars-given - A highlight indicating you've already given a star.
  33 +.stars-given:hover - Subtle hover highlight on top of stars-given styling.
  34 +.disabled - Dims the button to indicate it cannot be used.
  35 +
  36 +Styleguide 2.1.3.
  37 +*/
  38 +a.button.star{
  39 + ...
  40 +}
  41 +a.button.star.stars-given{
  42 + ...
  43 +}
  44 +a.button.star.disabled{
  45 + ...
  46 +}
  47 +```
  48 +
  49 +When using a preprocessor that supports the functionality, use `//` to prefix your comment sections (SCSS example):
  50 +
  51 +```less
  52 +// A button suitable for giving stars to someone.
  53 +//
  54 +// :hover - Subtle hover highlight.
  55 +// .stars-given - A highlight indicating you've already given a star.
  56 +// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
  57 +// .disabled - Dims the button to indicate it cannot be used.
  58 +//
  59 +// Styleguide 2.1.3.
  60 +a.button.star{
  61 + ...
  62 + &.star-given{
  63 + ...
  64 + }
  65 + &.disabled{
  66 + ...
  67 + }
  68 +}
  69 +```
  70 +
  71 +Each KSS documentation block consists of three parts: a description of what the element does or looks like, a list of modifier classes or pseudo-classes and how they modify the element, and a reference to the element's position in the styleguide.
  72 +
  73 +## Style Documentation
  74 +
  75 +The description should be plain sentences of what the CSS rule or hierarchy does and looks like. A good description gives guidance toward the application of elements the CSS rules style.
  76 +
  77 +CSS rules that depend on specific HTML structures should describe those structures using `<element#id.class:pseudo>` notation. For example:
  78 +
  79 +```less
  80 +// A feed of activity items. Within each <section.feed>, there should be many
  81 +// <article>s which are the feed items.
  82 +```
  83 +
  84 +To describe the status of a set of rules, you should prefix the description with **Experimental** or **Deprecated**.
  85 +
  86 +**Experimental** indicates CSS rules that apply to experimental styling. This can be useful when testing out new designs before they launch (staff only), alternative layouts in A/B tests, or beta features.
  87 +
  88 +```less
  89 +// Experimental: An alternative signup button styling used in AB Test #195.
  90 +```
  91 +
  92 +**Deprecated** indicates that the rule is slated for removal. Rules that are deprecated should not be used in future development. This description should explain what developers should do when encountering this style.
  93 +
  94 +```less
  95 +// Deprecated: Styling for legacy wikis. We'll drop support for these wikis on
  96 +// July 13, 2007.
  97 +```
  98 +
  99 +## The modifiers section
  100 +
  101 +If the UI element you are documenting has multiple states or styles depending on added classes or pseudo-classes, you should document them in the modifiers section.
  102 +
  103 +```less
  104 +// :hover - Subtle hover highlight.
  105 +// .stars-given - A highlight indicating you've already given a star.
  106 +// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
  107 +// .disabled - Dims the button to indicate it cannot be used.
  108 +```
  109 +
  110 +## The styleguide section
  111 +
  112 +If the UI element you are documenting has an example in the styleguide, you should reference it using the "Styleguide [ref]" syntax.
  113 +
  114 +```less
  115 +// Styleguide 2.1.3.
  116 +```
  117 +
  118 +References should be integer sections separated by periods. Each period denotes a hierarchy of the styleguide. Styleguide references can point to entire sections, a portion of the section, or a specific example.
  119 +
  120 +If there is no example, then you must note that there is no reference.
  121 +
  122 +```less
  123 +// No styleguide reference.
  124 +```
  125 +
  126 +## The markup section
  127 +
  128 +*Note: This section is unofficial, and only implemented in `kss-node`.*
  129 +
  130 +If you wish to include example HTML for the UI element you are documenting, you should include an additional paragraph with sample markup and prefix it with `Markup:`. You should also note the placement of modifier classes with `{$modifiers}`, like so:
  131 +
  132 +```less
  133 +// Buttons
  134 +//
  135 +// :hover - Highlight the button when hovering.
  136 +//
  137 +// Markup:
  138 +// <a href="#" class="button {$modifiers}">Link</a>
  139 +// <button class="button {$modifiers}">Button</button>
  140 +//
  141 +// Styleguide 2.1.3.
  142 +```
  143 +
  144 +If you're using the `kss-node` module or CLI, make sure not to include any double line-breaks, as only the first paragraph prefixed with `Markup:` will be included.
  145 +
  146 +# Preprocessor Helper Documentation
  147 +
  148 +If you use a CSS preprocessor like SCSS or LESS, you should document all helper functions (sometimes called mixins).
  149 +
  150 +```less
  151 +// Creates a linear gradient background, from top to bottom.
  152 +//
  153 +// $start - The color hex at the top.
  154 +// $end - The color hex at the bottom.
  155 +//
  156 +// Compatible in IE6+, Firefox 2+, Safari 4+.
  157 +@mixin gradient($start, $end){
  158 + ...
  159 +}
  160 +```
  161 +
  162 +Each documentation block should have a description section, parameters section, and compatibility section. The description section follows the same guidelines as style documentation.
  163 +
  164 +## The parameters section
  165 +
  166 +If the mixin takes parameters, you should document each parameter and describe what sort of input it expects (hex, number, etc).
  167 +
  168 +```less
  169 +// $start - The color hex at the top.
  170 +// $end - The color hex at the bottom.
  171 +```
  172 +
  173 +## The compatibility section
  174 +
  175 +You must list out what browsers this helper method is compatible in.
  176 +
  177 +```less
  178 +// Compatible in IE6+, Firefox 2+, Safari 4+.
  179 +```
  180 +
  181 +If you do not know the compatibility, you should state as such.
  182 +
  183 +```less
  184 +// Compatibility untested.
  185 +```
  186 +
  187 +# Styleguide
  188 +
  189 +In order to fully take advantage of KSS, you should create a living styleguide. A living styleguide is a *part of your application* and should include all of the CSS, Javascript, and layout the rest of your application does.
  190 +
  191 +To get started quickly use the CLI tool, which supports custom templates too. If you're feeling game you can (and should) build it up from scratch using the module's API.
  192 +
  193 +Overall, keep in mind that styleguides should adapt to the application they are referencing and be easy to maintain and as automatic as possible.
  194 +
  195 +## Organization
  196 +
  197 +The styleguide should be organized by numbered sections. These sections can go as deep as you like. Every element should have a numbered section to refer to. For example:
  198 +
  199 + 1. Buttons
  200 + 1.1 Form Buttons
  201 + 1.1.1 Generic form button
  202 + 1.1.2 Special form button
  203 + 1.2 Social buttons
  204 + 1.3 Miscelaneous buttons
  205 + 2. Form elements
  206 + 2.1 Text fields
  207 + 2.2 Radio and checkboxes
  208 + 3. Text styling
  209 + 4. Tables
  210 + 4.1 Number tables
  211 + 4.2 Diagram tables
  212 +
  213 +The goal here is to create an organizational structure that is flexible, but rigid enough to be machine processed and referenced inside of documentation.
15 demo/styles.less
... ... @@ -0,0 +1,15 @@
  1 +// Modules
  2 +//
  3 +// Reusable elements that can be used across the site.
  4 +// So far this just includes buttons.
  5 +//
  6 +// Styleguide 1.
  7 +@import "./elements/buttons.less";
  8 +
  9 +// Forms
  10 +//
  11 +// Covers styles used for forms, such as the `<input>` and `<select>`
  12 +// elements.
  13 +//
  14 +// Styleguide 2.
  15 +@import "./forms/base.less";
12 gh-pages.sh
... ... @@ -0,0 +1,12 @@
  1 +#!/bin/bash
  2 +# Update the gh-pages branch to include content from
  3 +# the gh-pages folder.
  4 +
  5 +# Dependcies: `awk` and `git`, must be run on a Unix system.
  6 +
  7 +cd "$(dirname $0)";
  8 +parent_sha=$(git show-ref -s refs/heads/gh-pages)
  9 +doc_sha=$(git ls-tree -d HEAD gh-pages | awk '{print $3}')
  10 +new_commit=$(echo "Auto-update docs." | git commit-tree $doc_sha -p $parent_sha)
  11 +git update-ref refs/heads/gh-pages $new_commit
  12 +exit;
256 gh-pages/index.html
... ... @@ -0,0 +1,256 @@
  1 +<!DOCTYPE html>
  2 +<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
  3 +<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
  4 +<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
  5 +<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
  6 +<head>
  7 + <meta charset="utf-8">
  8 +
  9 + <title>KSS: Living Styleguide</title>
  10 + <meta name="description" content="">
  11 + <meta name="generator" content="kss-node [http://github.com/hughsk/kss-node]" />
  12 +
  13 + <meta name="viewport" content="width=device-width">
  14 +
  15 + <link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One|Cabin|Asap:400,700,400italic|Enriqueta' rel='stylesheet' type='text/css'>
  16 +
  17 + <!--<link rel="stylesheet/less" href="public/style.less">-->
  18 + <link rel="stylesheet" href="public/kss.css">
  19 + <link rel="stylesheet" href="public/style.css">
  20 +
  21 + <!--<script type="text/javascript" src="public/less.js"></script>-->
  22 +
  23 +</head>
  24 +<body><div id="kss-guide">
  25 + <header class="kss-format">
  26 + <hgroup><h1>node-kss Styleguide</h1></hgroup>
  27 + </header>
  28 + <div role="main" id="kss-content">
  29 + <aside class="kss-format">
  30 + <ul>
  31 + <li><a href="index.html">Overview</a></li>
  32 +
  33 + <li><a href="section-1.html">1.0: Modules</a></li>
  34 +
  35 + <li><a href="section-2.html">2.0: Forms</a></li>
  36 +
  37 + </ul>
  38 + </aside>
  39 + <article>
  40 +
  41 + <section class="kss-section kss-has-no-modifiers kss-md kss-format kss-overview">
  42 + <h1 class="kss-title kss-title-main"> Overview </h1>
  43 +
  44 +<p>This is a demo of <a href="http://github.com/hughsk/kss-node">kss-node</a>&apos;s built-in styleguide generator. The module is essentially a reimplementation of Kyle Kneath&apos;s original Ruby library, <a href="http://github.com/kneath/kss">KSS</a>, in Node:
  45 +
  46 +</p>
  47 +<blockquote>
  48 +<p>Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.
  49 +Specifically, KSS is a documentation specification and styleguide format.
  50 +It is <strong>not</strong> a preprocessor, CSS framework, naming convention, or specificity guideline.
  51 +
  52 +</p>
  53 +<p>KSS is a set of guidelines to help you produce an HTML styleguide tied to CSS documentation that is nice to read in plain text, yet structured enough to be automatically extracted and processed by a machine.
  54 +
  55 +</p>
  56 +</blockquote>
  57 +<p>The upshot of this is that KSS can be used for generating CSS documentation pages. This site is generated with the <code>kss-node</code> command-line tool used on this <a href="https://github.com/hughsk/kss-node/tree/master/demo">demo project</a>.
  58 +
  59 +</p>
  60 +<p>Check out the <a href="https://github.com/hughsk/kss-node">project on Github</a> for more information, or read on for details on how to document your stylesheets for KSS.
  61 +
  62 +</p>
  63 +<h1>Specification</h1>
  64 +<p>The text from here on is mostly taken from the <a href="https://github.com/kneath/kss/blob/master/SPEC.md">KSS specification</a>.
  65 +
  66 +</p>
  67 +<p>Unlike TomDoc, not every CSS rule should be documented. You should document a rule declaration when the rule can accurately describe a visual UI element in the styleguide. Each element should have one documentation block describing that particular UI element&apos;s various states.
  68 +
  69 +</p>
  70 +<p>KSS documentation is hierarchical in nature — any documentation blocks at any point within the styleguide hierarchy apply to the documentation blocks beneath that level. This means that documentation for 2.1 applies to documentation for 2.1.3.
  71 +
  72 +</p>
  73 +<h2>Format</h2>
  74 +<p>The basic format for KSS documentation can be best explained in an example:
  75 +
  76 +</p>
  77 +<pre><code class="css">/*
  78 +A button suitable for giving stars to someone.
  79 +
  80 +:hover - Subtle hover highlight.
  81 +.stars-given - A highlight indicating you&apos;ve already given a star.
  82 +.stars-given:hover - Subtle hover highlight on top of stars-given styling.
  83 +.disabled - Dims the button to indicate it cannot be used.
  84 +
  85 +Styleguide 2.1.3.
  86 +*/
  87 +a.button.star{
  88 + ...
  89 +}
  90 +a.button.star.stars-given{
  91 + ...
  92 +}
  93 +a.button.star.disabled{
  94 + ...
  95 +}</code></pre>
  96 +<p>When using a preprocessor that supports the functionality, use <code>//</code> to prefix your comment sections (SCSS example):
  97 +
  98 +</p>
  99 +<pre><code class="less">// A button suitable for giving stars to someone.
  100 +//
  101 +// :hover - Subtle hover highlight.
  102 +// .stars-given - A highlight indicating you&apos;ve already given a star.
  103 +// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
  104 +// .disabled - Dims the button to indicate it cannot be used.
  105 +//
  106 +// Styleguide 2.1.3.
  107 +a.button.star{
  108 + ...
  109 + &amp;.star-given{
  110 + ...
  111 + }
  112 + &amp;.disabled{
  113 + ...
  114 + }
  115 +}</code></pre>
  116 +<p>Each KSS documentation block consists of three parts: a description of what the element does or looks like, a list of modifier classes or pseudo-classes and how they modify the element, and a reference to the element&apos;s position in the styleguide.
  117 +
  118 +</p>
  119 +<h2>Style Documentation</h2>
  120 +<p>The description should be plain sentences of what the CSS rule or hierarchy does and looks like. A good description gives guidance toward the application of elements the CSS rules style.
  121 +
  122 +</p>
  123 +<p>CSS rules that depend on specific HTML structures should describe those structures using <code>&lt;element#id.class:pseudo&gt;</code> notation. For example:
  124 +
  125 +</p>
  126 +<pre><code class="less">// A feed of activity items. Within each &lt;section.feed&gt;, there should be many
  127 +// &lt;article&gt;s which are the feed items.</code></pre>
  128 +<p>To describe the status of a set of rules, you should prefix the description with <strong>Experimental</strong> or <strong>Deprecated</strong>.
  129 +
  130 +</p>
  131 +<p><strong>Experimental</strong> indicates CSS rules that apply to experimental styling. This can be useful when testing out new designs before they launch (staff only), alternative layouts in A/B tests, or beta features.
  132 +
  133 +</p>
  134 +<pre><code class="less">// Experimental: An alternative signup button styling used in AB Test #195.</code></pre>
  135 +<p><strong>Deprecated</strong> indicates that the rule is slated for removal. Rules that are deprecated should not be used in future development. This description should explain what developers should do when encountering this style.
  136 +
  137 +</p>
  138 +<pre><code class="less">// Deprecated: Styling for legacy wikis. We&apos;ll drop support for these wikis on
  139 +// July 13, 2007.</code></pre>
  140 +<h2>The modifiers section</h2>
  141 +<p>If the UI element you are documenting has multiple states or styles depending on added classes or pseudo-classes, you should document them in the modifiers section.
  142 +
  143 +</p>
  144 +<pre><code class="less">// :hover - Subtle hover highlight.
  145 +// .stars-given - A highlight indicating you&apos;ve already given a star.
  146 +// .stars-given:hover - Subtle hover highlight on top of stars-given styling.
  147 +// .disabled - Dims the button to indicate it cannot be used.</code></pre>
  148 +<h2>The styleguide section</h2>
  149 +<p>If the UI element you are documenting has an example in the styleguide, you should reference it using the &quot;Styleguide [ref]&quot; syntax.
  150 +
  151 +</p>
  152 +<pre><code class="less">// Styleguide 2.1.3.</code></pre>
  153 +<p>References should be integer sections separated by periods. Each period denotes a hierarchy of the styleguide. Styleguide references can point to entire sections, a portion of the section, or a specific example.
  154 +
  155 +</p>
  156 +<p>If there is no example, then you must note that there is no reference.
  157 +
  158 +</p>
  159 +<pre><code class="less">// No styleguide reference.</code></pre>
  160 +<h2>The markup section</h2>
  161 +<p><em>Note: This section is unofficial, and only implemented in <code>kss-node</code>.</em>
  162 +
  163 +</p>
  164 +<p>If you wish to include example HTML for the UI element you are documenting, you should include an additional paragraph with sample markup and prefix it with <code>Markup:</code>. You should also note the placement of modifier classes with <code>{$modifiers}</code>, like so:
  165 +
  166 +</p>
  167 +<pre><code class="less">// Buttons
  168 +//
  169 +// :hover - Highlight the button when hovering.
  170 +//
  171 +// Markup:
  172 +// &lt;a href=&quot;#&quot; class=&quot;button {$modifiers}&quot;&gt;Link&lt;/a&gt;
  173 +// &lt;button class=&quot;button {$modifiers}&quot;&gt;Button&lt;/button&gt;
  174 +//
  175 +// Styleguide 2.1.3.</code></pre>
  176 +<p>If you&apos;re using the <code>kss-node</code> module or CLI, make sure not to include any double line-breaks, as only the first paragraph prefixed with <code>Markup:</code> will be included.
  177 +
  178 +</p>
  179 +<h1>Preprocessor Helper Documentation</h1>
  180 +<p>If you use a CSS preprocessor like SCSS or LESS, you should document all helper functions (sometimes called mixins).
  181 +
  182 +</p>
  183 +<pre><code class="less">// Creates a linear gradient background, from top to bottom.
  184 +//
  185 +// $start - The color hex at the top.
  186 +// $end - The color hex at the bottom.
  187 +//
  188 +// Compatible in IE6+, Firefox 2+, Safari 4+.
  189 +@mixin gradient($start, $end){
  190 + ...
  191 +}</code></pre>
  192 +<p>Each documentation block should have a description section, parameters section, and compatibility section. The description section follows the same guidelines as style documentation.
  193 +
  194 +</p>
  195 +<h2>The parameters section</h2>
  196 +<p>If the mixin takes parameters, you should document each parameter and describe what sort of input it expects (hex, number, etc).
  197 +
  198 +</p>
  199 +<pre><code class="less">// $start - The color hex at the top.
  200 +// $end - The color hex at the bottom.</code></pre>
  201 +<h2>The compatibility section</h2>
  202 +<p>You must list out what browsers this helper method is compatible in.
  203 +
  204 +</p>
  205 +<pre><code class="less">// Compatible in IE6+, Firefox 2+, Safari 4+.</code></pre>
  206 +<p>If you do not know the compatibility, you should state as such.
  207 +
  208 +</p>
  209 +<pre><code class="less">// Compatibility untested.</code></pre>
  210 +<h1>Styleguide</h1>
  211 +<p>In order to fully take advantage of KSS, you should create a living styleguide. A living styleguide is a <em>part of your application</em> and should include all of the CSS, Javascript, and layout the rest of your application does.
  212 +
  213 +</p>
  214 +<p>To get started quickly use the CLI tool, which supports custom templates too. If you&apos;re feeling game you can (and should) build it up from scratch using the module&apos;s API.
  215 +
  216 +</p>
  217 +<p>Overall, keep in mind that styleguides should adapt to the application they are referencing and be easy to maintain and as automatic as possible.
  218 +
  219 +</p>
  220 +<h2>Organization</h2>
  221 +<p>The styleguide should be organized by numbered sections. These sections can go as deep as you like. Every element should have a numbered section to refer to. For example:
  222 +
  223 +</p>
  224 +<pre><code>1. Buttons
  225 + 1.1 Form Buttons
  226 + 1.1.1 Generic form button
  227 + 1.1.2 Special form button
  228 + 1.2 Social buttons
  229 + 1.3 Miscelaneous buttons
  230 +2. Form elements
  231 + 2.1 Text fields
  232 + 2.2 Radio and checkboxes
  233 +3. Text styling
  234 +4. Tables
  235 + 4.1 Number tables
  236 + 4.2 Diagram tables</code></pre>
  237 +<p>The goal here is to create an organizational structure that is flexible, but rigid enough to be machine processed and referenced inside of documentation.
  238 +</p>
  239 +
  240 + </section>
  241 +
  242 + </article>
  243 + </div>
  244 + <footer>
  245 +
  246 + </footer>
  247 + <!-- SCRIPTS -->
  248 + <script src="public/kss.js"></script>
  249 + <script src="public/prettify.js"></script>
  250 + <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  251 + <script>$(document).ready(function(){
  252 + $('pre>code').addClass('prettyprint');
  253 + prettyPrint();
  254 + });</script>
  255 +</div></body>
  256 +</html>
1  gh-pages/public/kss.css
... ... @@ -0,0 +1 @@
  1 +html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}#kss-content,#kss-guide>header>hgroup{width:1000px;margin:0 auto;position:relative}#kss-guide>header{height:50px;font-size:24px;background:#ddd}#kss-guide>header h1{line-height:50px;margin:0}#kss-content>aside{width:199px;float:left}#kss-content>aside ul{list-style-type:none}#kss-content>aside ul li{font-size:18px;line-height:30px}#kss-content>aside ul li a{text-decoration:none}#kss-content>article{width:780px;padding-left:20px;border-left:1px solid #eee;padding-bottom:80px;float:left}#kss-content>aside,#kss-content>article{padding-top:20px}.kss-format h1,.kss-md h1,.kss-format h2,.kss-md h2,.kss-format h3,.kss-md h3,.kss-format h4,.kss-md h4,.kss-format h5,.kss-md h5,.kss-format h6,.kss-md h6{font-family:'Asap',Helvetica;line-height:1.5em;margin-top:40px;margin-bottom:8px}.kss-format article,.kss-md article,.kss-format p,.kss-md p,.kss-format ul,.kss-md ul,.kss-format ol,.kss-md ol,.kss-format section,.kss-md section,.kss-format aside,.kss-md aside{font-family:'Asap',Helvetica;color:#333}.kss-format pre,.kss-md pre,.kss-format code,.kss-md code{font-family:'Ubuntu Mono',monospace;white-space:pre-wrap}.kss-format code,.kss-md code{background-color:#eee;border:1px solid #bbb;color:#333}.kss-format pre,.kss-md pre{padding:12px;background-color:#eee;border:1px solid #c8c8c8;margin-top:25px;margin-bottom:25px}.kss-format pre>code,.kss-md pre>code{border:0;background-color:transparent}.kss-format a,.kss-md a{color:#888}.kss-format a:hover,.kss-md a:hover{color:#8ad}.kss-format p,.kss-md p,.kss-format ul,.kss-md ul,.kss-format ol,.kss-md ol{margin-bottom:15px;font-size:16px;line-height:1.5em}.kss-format blockquote,.kss-md blockquote{margin:0 20px;margin-bottom:15px;padding:10px}.kss-format blockquote p,.kss-md blockquote p{color:#666}.kss-format blockquote>p:last-child,.kss-md blockquote>p:last-child{margin-bottom:0}.kss-md ul,.kss-md ol{margin-left:30px}.kss-section .kss-title{margin:0}.kss-title{font-family:'Asap',Helvetica}.kss-section .kss-title-main,.kss-title-main{font-size:36px!important;line-height:1em;padding-bottom:20px;margin-bottom:20px;position:relative;left:-20px;padding-left:20px;padding-right:20px;border-bottom:1px solid #ddd}section>.kss-title{font-size:26px;color:#222}.kss-md h1{font-size:30px}.kss-md h2{font-size:26px}.kss-md h3{font-size:22px}.kss-md h4{font-size:18px}.kss-md h5{font-size:16px}.kss-md h6{font-size:15px}.kss-mod{background:#ddd;border:1px solid #aaa;margin-bottom:30px}.kss-mod .kss-title{background:#ddd;color:#444;padding:14px 0 0 14px;font-size:18px}.kss-desc{margin-top:30px;margin-bottom:40px}.kss-desc>.kss-title{margin-bottom:10px}.kss-markup{padding:20px;background:#e5e5e5;line-height:1.2em}.kss-box{padding:14px;padding-bottom:0}.kss-mod-list{width:100%;background:#fff;border-bottom:1px solid #aaa}.kss-mod-list td{padding:10px;line-height:1.35em;font-size:14px;font-family:'Trebuchet MS'}.kss-mod-name{font-weight:700;text-align:right;width:30%}td.kss-mod-name,td.kss-mod-desc{padding-bottom:0;border-top:1px solid #aaa}.pln{color:#000}@media screen{.str{ color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{ color:#060}.kwd{color:#006;font-weight:700}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:700}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:700}.atn{color:#404}.atv{color:#060}}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}@media screen and (max-width: 1000px){#kss-content>aside{ margin-left:20px}#kss-content>article,#kss-content,#kss-guide>header>hgroup{width:auto}#kss-content>article{padding-right:20px}#kss-guide>header>hgroup>h1{margin-left:20px}.kss-section .kss-title-main,.kss-title-main{position:inherit;left:0;top:0;padding-left:0;padding-right:0}}
47 gh-pages/public/kss.js
... ... @@ -0,0 +1,47 @@
  1 +(function() {
  2 + var KssStateGenerator;
  3 +
  4 + KssStateGenerator = (function() {
  5 +
  6 + function KssStateGenerator() {
  7 + var idx, idxs, pseudos, replaceRule, rule, stylesheet, _i, _len, _len2, _ref, _ref2;
  8 + pseudos = /(\:hover|\:disabled|\:active|\:visited|\:focus)/g;
  9 + // try {
  10 + _ref = document.styleSheets;
  11 + for (_i = 0, _len = _ref.length; _i < _len; _i++) {
  12 + stylesheet = _ref[_i];
  13 + idxs = [];
  14 + _ref2 = stylesheet.cssRules || [];
  15 + for (idx = 0, _len2 = _ref2.length; idx < _len2; idx++) {
  16 + rule = _ref2[idx];
  17 + if ((rule.type === CSSRule.STYLE_RULE) && pseudos.test(rule.selectorText)) {
  18 + replaceRule = function(matched, stuff) {
  19 + return ".pseudo-class-" + matched.replace(':', '');
  20 + };
  21 + this.insertRule(rule.cssText.replace(pseudos, replaceRule));
  22 + }
  23 + }
  24 + }
  25 + // } catch (_error) {console.log(_error.message);}
  26 + }
  27 +
  28 + KssStateGenerator.prototype.insertRule = function(rule) {
  29 + var headEl, styleEl;
  30