├── .npmignore
├── test
    ├── fixtures
    │   ├── button.css
    │   └── button.scss
    ├── kss_test.js
    └── expected
    │   └── section-1.html
├── .eslintignore
├── .travis.yml
├── .editorconfig
├── .gitignore
├── tasks
    └── kss.js
├── Gruntfile.js
├── LICENSE
├── package.json
├── .eslintrc
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .npmignore
2 | .editorconfig
3 | .travis.yml
4 | test
5 | Gruntfile.js
6 | 


--------------------------------------------------------------------------------
/test/fixtures/button.css:
--------------------------------------------------------------------------------
1 | .button {
2 | 	background: black;
3 | }
4 | .button-big {
5 | 	font-size: 24px;
6 | }
7 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | # Ignore any installed node modules.
2 | **/node_modules/**
3 | 
4 | # Ignore old test runs.
5 | test/output/**
6 | 
7 | # Ignore test coverage reports
8 | coverage/**
9 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | # Configuration options are documented at:
 2 | # http://docs.travis-ci.com/user/languages/javascript-with-nodejs/
 3 | sudo: false
 4 | language: node_js
 5 | node_js:
 6 |   - '4'
 7 |   - '5'
 8 |   - '6'
 9 |   - '7'
10 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editor configuration normalization
 2 | # @see http://editorconfig.org/
 3 | 
 4 | # This is the top-most .editorconfig file; do not search in parent directories.
 5 | root = true
 6 | 
 7 | # All files.
 8 | [*]
 9 | end_of_line = LF
10 | indent_style = space
11 | indent_size = 2
12 | charset = utf-8
13 | trim_trailing_whitespace = true
14 | insert_final_newline = true
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Exclude stuff specific to this project.
 2 | node_modules
 3 | /test/output
 4 | coverage
 5 | npm-debug.log
 6 | 
 7 | # Exclude IDE management files.
 8 |   # Eclipse
 9 | .project
10 | .settings
11 | .buildpath
12 |   # Netbeans
13 | netbeans
14 | nbproject
15 |   # Komodo
16 | *.kpf
17 |   # WebStorm
18 | .idea
19 | 
20 | # Exclude hidden OS files.
21 | .DS_Store
22 | ._*
23 | Thumbs.db
24 | 


--------------------------------------------------------------------------------
/test/fixtures/button.scss:
--------------------------------------------------------------------------------
 1 | // Buttons
 2 | //
 3 | // Buttons can and should be clicked.
 4 | //
 5 | // Markup: <a href="#" class="button {$modifiers}">This is Button!</a>
 6 | //
 7 | // .button-big - Highlight the button when hovered.
 8 | // :hover - Highlight the button when hovered.
 9 | //
10 | // Styleguide 1.0
11 | 
12 | .button {
13 | 	background: black;
14 | }
15 | .button-big {
16 | 	font-size: 24px;
17 | }
18 | 


--------------------------------------------------------------------------------
/tasks/kss.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var kss = require('kss');
 4 | 
 5 | module.exports = function(grunt) {
 6 |   grunt.registerMultiTask('kss', 'Generate style guide with KSS.', function() {
 7 | 
 8 |     var done = this.async();
 9 | 
10 |     var options = this.options({});
11 | 
12 |     // Add source and destination from Grunt.
13 |     options.source = [];
14 |     this.files.forEach(function(file) {
15 |       options.destination = file.dest;
16 |       for (var i = 0; i < file.src.length; i++) {
17 |         options.source.push(file.src[i]);
18 |       }
19 |     });
20 | 
21 |     // Use promise to make sure done() is called when kss() ends
22 |     kss(options).then(function() {
23 |       done();
24 |     }).catch(function(error) {
25 |       done(error);
26 |     });
27 |   });
28 | };
29 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | module.exports = function(grunt) {
 4 | 
 5 |   // Project configuration.
 6 |   grunt.initConfig({
 7 |     // Before generating any new files, remove any previously-created files.
 8 |     clean: {
 9 |       tests: ['test/output/']
10 |     },
11 | 
12 |     // Configuration to be run (and then tested).
13 |     kss: {
14 |       options: {},
15 |       dist: {
16 |         src: ['test/fixtures/'],
17 |         dest: 'test/output/'
18 |       }
19 |     },
20 | 
21 |     // Unit tests.
22 |     nodeunit: {
23 |       tests: ['test/*_test.js']
24 |     }
25 |   });
26 | 
27 |   // Actually load this plugin's task(s).
28 |   grunt.loadTasks('tasks');
29 | 
30 |   // These plugins provide necessary tasks.
31 |   grunt.loadNpmTasks('grunt-contrib-clean');
32 |   grunt.loadNpmTasks('grunt-contrib-nodeunit');
33 | 
34 |   // Whenever the "test" task is run, first clean the "tmp" dir, then run this
35 |   // plugin's task(s), then test the result.
36 |   grunt.registerTask('test', ['clean', 'kss', 'nodeunit']);
37 | 
38 |   // By default, lint and run all tests.
39 |   grunt.registerTask('default', ['test']);
40 | };
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright © 2013 Koji Ishimoto, John Albin Wilkins, et. al.
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "grunt-kss",
 3 |   "version": "5.0.1",
 4 |   "description": "KSS style guide generator for grunt.",
 5 |   "homepage": "https://github.com/kss-node/grunt-kss",
 6 |   "bugs": {
 7 |     "url": "https://github.com/kss-node/grunt-kss/issues"
 8 |   },
 9 |   "repository": {
10 |     "type": "git",
11 |     "url": "git://github.com/kss-node/grunt-kss.git"
12 |   },
13 |   "author": "John Albin Wilkins <virtually.johnalbin@gmail.com> (http://john.albin.net/)",
14 |   "keywords": [
15 |     "gruntplugin",
16 |     "styleguide",
17 |     "kss",
18 |     "kss-node"
19 |   ],
20 |   "main": "Gruntfile.js",
21 |   "directories": {
22 |     "test": "test"
23 |   },
24 |   "scripts": {
25 |     "test": "grunt test",
26 |     "posttest": "eslint ."
27 |   },
28 |   "license": "(MIT OR GPL-2.0)",
29 |   "dependencies": {
30 |     "kss": "~3.0.0-beta.17"
31 |   },
32 |   "devDependencies": {
33 |     "eslint": "^4.1.0",
34 |     "grunt": "~1.0.1",
35 |     "grunt-cli": "~1.2.0",
36 |     "grunt-contrib-clean": "~1.1.0",
37 |     "grunt-contrib-nodeunit": "~1.0.0"
38 |   },
39 |   "peerDependencies": {
40 |     "grunt": ">=1.0.0"
41 |   },
42 |   "engines": {
43 |     "node": ">= 4.0.0"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/test/kss_test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | var grunt = require('grunt');
 4 | 
 5 | /*
 6 |   ======== A Handy Little Nodeunit Reference ========
 7 |   https://github.com/caolan/nodeunit
 8 | 
 9 |   Test methods:
10 |     test.expect(numAssertions)
11 |     test.done()
12 |   Test assertions:
13 |     test.ok(value, [message])
14 |     test.equal(actual, expected, [message])
15 |     test.notEqual(actual, expected, [message])
16 |     test.deepEqual(actual, expected, [message])
17 |     test.notDeepEqual(actual, expected, [message])
18 |     test.strictEqual(actual, expected, [message])
19 |     test.notStrictEqual(actual, expected, [message])
20 |     test.throws(block, [error], [message])
21 |     test.doesNotThrow(block, [error], [message])
22 |     test.ifError(value)
23 | */
24 | 
25 | exports.kss = {
26 |   setUp: function(done) {
27 |     // setup here if necessary
28 |     done();
29 |   },
30 |   defaultOptions: function(test) {
31 |     test.expect(1);
32 | 
33 |     var actual = grunt.file.read('test/output/section-1.html');
34 |     var expected = grunt.file.read('test/expected/section-1.html');
35 |     test.equal(actual, expected, 'should match expected generated styleguide result.');
36 | 
37 |     test.done();
38 |   }
39 | };
40 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   // http://eslint.org/docs/user-guide/configuring.html
 3 |   "root": true,
 4 |   "extends": "eslint:recommended",
 5 |   "env": {
 6 |     "node": true,
 7 |     "es6": true
 8 |   },
 9 |   "parserOptions": {
10 |     "ecmaVersion": 6
11 |   },
12 |   "rules": {
13 |     // Errors.
14 |     "array-bracket-spacing": [2, "never"],
15 |     "block-scoped-var": 2,
16 |     "brace-style": [2, "1tbs", {"allowSingleLine": true}],
17 |     "camelcase": 2,
18 |     "comma-dangle": [2, "never"],
19 |     "comma-spacing": 2,
20 |     "comma-style": [2, "last"],
21 |     "computed-property-spacing": [2, "never"],
22 |     "consistent-this": [2, "self"],
23 |     "curly": [2, "all"],
24 |     "eol-last": 2,
25 |     "eqeqeq": [2, "smart"],
26 |     "guard-for-in": 2,
27 |     "indent": [2, 2, {"SwitchCase": 1}],
28 |     "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
29 |     "keyword-spacing": 2,
30 |     "linebreak-style": [2, "unix"],
31 |     "max-nested-callbacks": [2, 3],
32 |     "new-parens": 2,
33 |     "no-array-constructor": 2,
34 |     "no-caller": 2,
35 |     "no-catch-shadow": 2,
36 |     "no-eval": 2,
37 |     "no-extend-native": 2,
38 |     "no-extra-bind": 2,
39 |     "no-implied-eval": 2,
40 |     "no-iterator": 2,
41 |     "no-label-var": 2,
42 |     "no-labels": [2, {"allowLoop": true, "allowSwitch": true}],
43 |     "no-lone-blocks": 2,
44 |     "no-loop-func": 2,
45 |     "no-mixed-requires": [2, false],
46 |     "no-multi-spaces": 2,
47 |     "no-multi-str": 2,
48 |     "no-native-reassign": 2,
49 |     "no-nested-ternary": 2,
50 |     "no-new-func": 2,
51 |     "no-new-object": 2,
52 |     "no-new-wrappers": 2,
53 |     "no-octal-escape": 2,
54 |     "no-process-exit": 2,
55 |     "no-proto": 2,
56 |     "no-return-assign": 2,
57 |     "no-script-url": 2,
58 |     "no-sequences": 2,
59 |     "no-shadow-restricted-names": 2,
60 |     "no-spaced-func": 2,
61 |     "no-throw-literal": 2,
62 |     "no-trailing-spaces": 2,
63 |     "no-undef-init": 2,
64 |     "no-undefined": 2,
65 |     "no-unused-expressions": 2,
66 |     "no-unused-vars": 2,
67 |     "no-with": 2,
68 |     "object-curly-spacing": [2, "never"],
69 |     "quote-props": [2, "consistent-as-needed"],
70 |     "quotes": [2, "single", "avoid-escape"],
71 |     "semi": [2, "always"],
72 |     "semi-spacing": [2, {"before": false, "after": true}],
73 |     "space-before-function-paren": [2, "never"],
74 |     "space-in-parens": [2, "never"],
75 |     "space-infix-ops": 2,
76 |     "space-unary-ops": [2, { "words": true, "nonwords": false }],
77 |     "spaced-comment": [2, "always"],
78 |     "strict": [2, "global"],
79 |     "valid-jsdoc": [2, {
80 |       "prefer": {
81 |         "return": "returns"
82 |       },
83 |       "requireReturn": false
84 |     }],
85 |     "wrap-iife": 2,
86 |     "yoda": [2, "never"],
87 |     // Disabled.
88 |     "no-console": 0
89 |   }
90 | }
91 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # grunt-kss
  2 | 
  3 | [![Build Status](https://secure.travis-ci.org/kss-node/grunt-kss.png?branch=master)](http://travis-ci.org/kss-node/grunt-kss/builds)
  4 | [![NPM version](https://badge.fury.io/js/grunt-kss.png)](http://badge.fury.io/js/grunt-kss)
  5 | [![Greenkeeper badge](https://badges.greenkeeper.io/kss-node/grunt-kss.svg)](https://greenkeeper.io/)
  6 | 
  7 | > KSS style guide generator for grunt.
  8 | 
  9 | ## Getting Started
 10 | This plugin requires Grunt `~1.0.0`. If you still use Grunt 0.4.x, you can use the 4.x versions of grunt-kss.
 11 | 
 12 | If you haven't used [Grunt](http://gruntjs.com/) before, be sure to check out the [Getting Started](http://gruntjs.com/getting-started) guide, as it explains how to create a [Gruntfile](http://gruntjs.com/sample-gruntfile) as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
 13 | 
 14 | ```shell
 15 | npm install grunt-kss --save-dev
 16 | ```
 17 | 
 18 | Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
 19 | 
 20 | ```js
 21 | grunt.loadNpmTasks('grunt-kss');
 22 | ```
 23 | 
 24 | ## The "kss" task
 25 | 
 26 | ### Overview
 27 | In your project's Gruntfile, add a section named `kss` to the data object passed into `grunt.initConfig()`.
 28 | 
 29 | Here's an example:
 30 | 
 31 | ```js
 32 | grunt.initConfig({
 33 |   kss: {
 34 |     options: {
 35 |       verbose: true
 36 |     },
 37 |     dist: {
 38 |       src: ['/path/to/sourcedir'],
 39 |       dest: '/path/to/destdir'
 40 |     }
 41 |   }
 42 | })
 43 | ```
 44 | 
 45 | ### Options
 46 | 
 47 | #### options.builder
 48 | Type: `String`
 49 | Default value: `null`
 50 | 
 51 | Use a custom template to build your style guide.
 52 | 
 53 | #### options.helpers
 54 | Type: `String` or array of `String`
 55 | Default value: `null`
 56 | 
 57 | Specify location(s) of custom handlebars helpers; see
 58 | http://bit.ly/kss-helpers
 59 | 
 60 | #### options.mask
 61 | Type: `String`
 62 | Default value: `null`
 63 | 
 64 | Use a custom mask for detecting stylesheets.
 65 | 
 66 | #### options.custom
 67 | Type: `String` or array of `String`
 68 | Default value: `null`
 69 | 
 70 | Use custom property name(s) when parsing KSS comments.
 71 | 
 72 | #### options.css
 73 | Type: `String` or array of `String`
 74 | Default value: `null`
 75 | 
 76 | Adds CSS stylesheet(s) to your style guide.
 77 | 
 78 | #### options.js
 79 | Type: `String` or array of `String`
 80 | Default value: `null`
 81 | 
 82 | Adds JavaScript file(s) to your style guide.
 83 | 
 84 | #### options.config
 85 | Type: `String`
 86 | Default value: `null`
 87 | 
 88 | Loads the kss-node configuration from a JSON file.
 89 | 
 90 | ## Contributing
 91 | In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using [Grunt](http://gruntjs.com/).
 92 | 
 93 | ## Release History
 94 | 
 95 | + v5.0.0: Update to KSS 3.0.0, Grunt 1.0.0, and Node.js 4.0.0 or later.
 96 | + v4.0.0: Update to KSS 2.4.0.
 97 | + v1.0.0: [Don't ask.](https://github.com/kss-node/grunt-kss/issues/6#issuecomment-206684950)
 98 | + v0.2.6: Fix "Error: spawn ENOENT" bug for Windows.
 99 | + v0.2.4: Fix kss-node module path.
100 | + v0.2.3: Bump version.
101 | + v0.2.2: Fix README.
102 | + v0.2.0: Fix a cmd path.
103 | + v0.1.0: Release.
104 | 


--------------------------------------------------------------------------------
/test/expected/section-1.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html class="no-js" lang="en">
  3 | <head>
  4 |   <meta charset="utf-8">
  5 |   <title>KSS Style Guide</title>
  6 | 
  7 |   <meta name="description" content="">
  8 |   <meta name="generator" content="kss-node">
  9 |   <meta name="viewport" content="width=device-width">
 10 | 
 11 |   <link rel="stylesheet" href="kss-assets/kss.css">
 12 |   
 13 | </head>
 14 | <body id="kss-node" >
 15 | 
 16 | <div class="kss-sidebar kss-style">
 17 |   <header class="kss-header">
 18 |     <h1 class="kss-doc-title">KSS Style Guide</h1>
 19 |   </header>
 20 |   <nav class="kss-nav">
 21 |     <ul class="kss-nav__menu">
 22 |       <li class="kss-nav__menu-item">
 23 |         <a class="kss-nav__menu-link" href="./">
 24 |           <span class="kss-nav__ref">0</span
 25 |           ><span class="kss-nav__name">Overview</span>
 26 |         </a>
 27 |       </li>
 28 |       <li class="kss-nav__menu-item">
 29 |         <a class="kss-nav__menu-link" href="section-1.html">
 30 |           <span class="kss-nav__ref">1</span><span class="kss-nav__name">Buttons</span>
 31 |         </a>
 32 |       </li>
 33 |     </ul>
 34 |   </nav>
 35 | </div>
 36 | <article role="main" class="kss-main">
 37 | 
 38 |     <div id="kssref-1" class="kss-section kss-section--depth-1 ">
 39 | 
 40 |       <div class="kss-style">
 41 |         <h1 class="kss-title kss-title--level-1">
 42 |           <a class="kss-title__permalink" href="#kssref-1">
 43 |             <span class="kss-title__ref">
 44 |               1
 45 |               <span class="kss-title__permalink-hash">
 46 |                   #permalink
 47 |               </span>
 48 |             </span>
 49 |             Buttons
 50 |           </a>
 51 |         </h1>
 52 | 
 53 |           <p class="kss-toolbar">
 54 |               <a href="#kssref-1" data-kss-fullscreen="kssref-1">
 55 |                 <span class="kss-toolbar__tooltip">Toggle full screen</span>
 56 |                 <svg class="off" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
 57 |                   <path class="kss-toolbar__icon-fill" d="M64 0v26l-10-10-12 12-6-6 12-12-10-10zM28 42l-12 12 10 10h-26v-26l10 10 12-12z"></path>
 58 |                 </svg>
 59 |                 <svg class="on" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
 60 |                   <path class="kss-toolbar__icon-fill" d="M28 36v26l-10-10-12 12-6-6 12-12-10-10zM64 6l-12 12 10 10h-26v-26l10 10 12-12z"></path>
 61 |                 </svg>
 62 |               </a>
 63 |               <a href="item-1.html" target="_blank">
 64 |                 <span class="kss-toolbar__tooltip">Open in new window</span>
 65 |                 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
 66 |                   <rect x="0" y="20" width="40" height="44" fill="#fff"/>
 67 |                   <path class="kss-toolbar__icon-fill" d="M40,64l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
 68 |                   <rect class="kss-toolbar__icon-fill" x="0" y="20" width="40" height="10"/>
 69 |                   <rect x="24" y="0" width="40" height="44" fill="#fff"/>
 70 |                   <path class="kss-toolbar__icon-fill" d="M64,44l-40,0l0,-44l40,0l0,44Zm-36,-40l0,36l32,0l0,-36l-32,0Z"/>
 71 |                   <rect class="kss-toolbar__icon-fill" x="24" y="0" width="40" height="10"/>
 72 |                 </svg>
 73 |               </a>
 74 |             <a href="#kssref-1" data-kss-guides="true">
 75 |               <span class="kss-toolbar__tooltip">Toggle example guides</span>
 76 |               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
 77 |                 <rect class="kss-toolbar__icon-fill" x="5" y="35" width="5" height="9"/>
 78 |                 <rect class="kss-toolbar__icon-fill" x="54" y="21" width="5" height="9"/>
 79 |                 <rect class="kss-toolbar__icon-fill" x="54" y="35" width="5" height="9"/>
 80 |                 <rect class="kss-toolbar__icon-fill" x="5" y="21" width="5" height="9"/>
 81 |                 <rect class="kss-toolbar__icon-fill" x="5" y="0" width="5" height="15"/>
 82 |                 <rect class="kss-toolbar__icon-fill" x="35" y="5" width="9" height="5"/>
 83 |                 <rect class="kss-toolbar__icon-fill" x="20" y="5" width="9" height="5"/>
 84 |                 <rect class="kss-toolbar__icon-fill" x="0" y="5" width="15" height="5"/>
 85 |                 <rect class="kss-toolbar__icon-fill" x="54" y="0" width="5" height="15"/>
 86 |                 <rect class="kss-toolbar__icon-fill" x="49" y="5" width="15" height="5"/>
 87 |                 <rect class="kss-toolbar__icon-fill" x="54" y="49" width="5" height="15"/>
 88 |                 <rect class="kss-toolbar__icon-fill" x="49" y="54" width="15" height="5"/>
 89 |                 <rect class="kss-toolbar__icon-fill" x="5" y="49" width="5" height="15"/>
 90 |                 <rect class="kss-toolbar__icon-fill" x="0" y="54" width="15" height="5"/>
 91 |                 <rect class="kss-toolbar__icon-fill" x="35" y="54" width="9" height="5"/>
 92 |                 <rect class="kss-toolbar__icon-fill" x="20" y="54" width="9" height="5"/>
 93 |               </svg>
 94 |             </a>
 95 |             <a href="#kssref-1" data-kss-markup="true">
 96 |               <span class="kss-toolbar__tooltip">Toggle HTML markup</span>
 97 |               <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 64 64">
 98 |                 <path class="kss-toolbar__icon-fill" d="M37.555,46.239l6.103,6.103l20.342,-20.342l-20.342,-20.342l-6.103,6.103l14.24,14.239l-14.24,14.239Z"/>
 99 |                 <path class="kss-toolbar__icon-fill" d="M26.445,17.761l-6.103,-6.103l-20.342,20.342l20.342,20.342l6.103,-6.103l-14.24,-14.239l14.24,-14.239Z"/>
100 |               </svg>
101 |             </a>
102 |           </p>
103 | 
104 |           <div class="kss-description">
105 |             <p>Buttons can and should be clicked.</p>
106 | 
107 |           </div>
108 | 
109 |       </div>
110 | 
111 |         <div class="kss-modifier__wrapper">
112 |           <div class="kss-modifier__heading kss-style">
113 |             Examples
114 |           </div>
115 | 
116 |             <div class="kss-modifier__default-name kss-style">
117 |               Default styling
118 |             </div>
119 | 
120 |           <div class="kss-modifier__example">
121 |             <a href="#" class="button {$modifiers}">This is Button!</a>
122 |             <div class="kss-modifier__example-footer"></div>
123 |           </div>
124 | 
125 |             <div class="kss-modifier__name kss-style">
126 |               .button-big
127 |             </div>
128 |             <div class="kss-modifier__description kss-style">
129 |               Highlight the button when hovered.
130 |             </div>
131 |             <div class="kss-modifier__example">
132 |               <a href="#" class="button {$modifiers}">This is Button!</a>
133 |               <div class="kss-modifier__example-footer"></div>
134 |             </div>
135 |             <div class="kss-modifier__name kss-style">
136 |               :hover
137 |             </div>
138 |             <div class="kss-modifier__description kss-style">
139 |               Highlight the button when hovered.
140 |             </div>
141 |             <div class="kss-modifier__example">
142 |               <a href="#" class="button {$modifiers}">This is Button!</a>
143 |               <div class="kss-modifier__example-footer"></div>
144 |             </div>
145 |         </div>
146 | 
147 |           <details class="kss-markup kss-style">
148 |             <summary>
149 |                 Markup
150 |             </summary>
151 |             <pre class="prettyprint linenums lang-html"><code data-language="html">&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;button {$modifiers}&quot;&gt;This is Button!&lt;/a&gt;</code></pre>
152 |           </details>
153 | 
154 |         <div class="kss-source kss-style">
155 |           Source: <code>button.scss</code>, line 1
156 |         </div>
157 | 
158 |     </div>
159 | </article>
160 | 
161 | <!-- SCRIPTS -->
162 | <script src="kss-assets/kss.js"></script>
163 | <script src="kss-assets/scrollspy.js"></script>
164 | <script src="kss-assets/prettify.js"></script>
165 | <script src="kss-assets/kss-fullscreen.js"></script>
166 | <script src="kss-assets/kss-guides.js"></script>
167 | <script src="kss-assets/kss-markup.js"></script>
168 | <script>
169 |   prettyPrint();
170 |   var spy = new ScrollSpy('#kss-node', {
171 |     nav: '.kss-nav__menu-child > li > a',
172 |     className: 'is-in-viewport'
173 |   });
174 |   var kssFullScreen = new KssFullScreen({
175 |     idPrefix: 'kss-fullscreen-',
176 |     bodyClass: 'kss-fullscreen-mode',
177 |     elementClass: 'is-fullscreen'
178 |   });
179 |   var kssGuides = new KssGuides({
180 |     bodyClass: 'kss-guides-mode'
181 |   });
182 |   var kssMarkup = new KssMarkup({
183 |     bodyClass: 'kss-markup-mode',
184 |     detailsClass: 'kss-markup'
185 |   });
186 | </script>
187 | 
188 | 
189 | 
190 | <!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
191 | </body>
192 | </html>
193 | 


--------------------------------------------------------------------------------