Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Merge pull request #77 from kss-node/improve-handlebars-code

Improve handlebars code
  • Loading branch information...
commit cd81b76648d15d6b2b1e0ada093f54f2b94537d0 2 parents 9fb2657 + e235e63
@JohnAlbin JohnAlbin authored
View
50 bin/kss-node
@@ -146,10 +146,13 @@ process.nextTick(function() {
styleguide = sg;
var sections = styleguide.section('*.'),
- i, sectionCount = sections.length,
- sectionRoots = [], currentRoot,
- rootCount, childSections = [],
- pages = {};
+ sectionCount = sections.length,
+ sectionRoots = [],
+ rootCount,
+ currentRoot,
+ childSections = [],
+ pages = {},
+ i;
console.log(sg.data.files.map(function(file) {
return ' - ' + file
@@ -188,7 +191,7 @@ process.nextTick(function() {
// Compile LESS/Stylus/CSS files into a single "style.css" if required
generateStylesheet = function(argv) {
var compilers = preCompiler.compilers,
- files
+ files;
console.log('...compiling additional stylesheets');
@@ -198,8 +201,8 @@ generateStylesheet = function(argv) {
if (!argv[key]) return;
return {
- files: Array.isArray(argv[key]) ? argv[key] : [argv[key]]
- , type: type
+ files: Array.isArray(argv[key]) ? argv[key] : [argv[key]],
+ type: type
};
});
@@ -208,8 +211,8 @@ generateStylesheet = function(argv) {
async.map(group.files, function (filename, next) {
- var type = group.type
- , extension
+ var type = group.type,
+ extension;
// Type-guessing for --style option
if (!type) {
@@ -320,9 +323,10 @@ jsonModifiers = function(modifiers) {
handlebars.registerHelper('ifAny', function() {
var numItems = arguments.length - 1,
options = arguments[numItems],
- success = true;
+ success = true,
+ i;
- for (var i = 0; i < numItems; i += 1) {
+ for (i = 0; i < numItems; i += 1) {
if (!arguments[i]) {
success = false;
break;
@@ -348,8 +352,9 @@ handlebars.registerHelper('section', function(reference, options) {
* @param {Mixed} query The section query
*/
handlebars.registerHelper('eachSection', function(query, options) {
- var sections,
- i, l, buffer = "";
+ var buffer = '',
+ sections,
+ i, l;
if (!query.match(/x|\*/g)) {
query = new RegExp('^' + query + '$|^' + query + "\\..*");
@@ -369,8 +374,9 @@ handlebars.registerHelper('eachSection', function(query, options) {
* Loop over each section root, i.e. each section only one level deep.
*/
handlebars.registerHelper('eachRoot', function(options) {
- var sections,
- i, l, buffer = "";
+ var buffer = '',
+ sections,
+ i, l;
sections = styleguide.section('x');
if (!sections) return '';
@@ -403,12 +409,14 @@ handlebars.registerHelper('whenDepth', function(depth, options) {
* Similar to the {#eachSection} helper, however will loop over each modifier
* @param {Object} section Supply a section object to loop over it's modifiers. Defaults to the current section.
*/
-handlebars.registerHelper('eachModifier', function(options) {
- var modifiers, i, l, buffer = '';
-
- // Default to current modifiers, but allow supplying a custom section
- if (options.data) modifiers = options.data.modifiers;
- modifiers = modifiers || this.modifiers || false;
+handlebars.registerHelper('eachModifier', function() {
+ var modifiers,
+ options = arguments[arguments.length - 1],
+ buffer = '',
+ i, l;
+
+ // Default to current modifiers, but allow supplying a custom section.
+ modifiers = (arguments.length > 1 && arguments[0].data) ? arguments[0].data.modifiers : this.modifiers;
if (!modifiers) return {};
View
128 gh-pages/index.html
@@ -5,39 +5,37 @@
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
-
<title>KSS: Living Styleguide</title>
+
<meta name="description" content="">
<meta name="generator" content="kss-node" />
-
<meta name="viewport" content="width=device-width">
- <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
-
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
-
</head>
<body><div id="kss-wrapper">
- <div id="kss-nav">
- <header id="kss-header">
- <hgroup><h1>kss-node Styleguide</h1></hgroup>
- </header>
- <aside>
- <nav><ul>
- <li><a href="index.html">0.0: Overview</a></li>
-
- <li><a href="section-1.html">1.0: Modules</a></li>
-
- <li><a href="section-2.html">2.0: Forms</a></li>
-
- </ul></nav>
- </aside>
- </div>
- <div role="main" id="kss-main">
- <article id="kss-content">
-
- <h1 class="kss-title kss-title-main"> Overview </h1>
+
+<div id="kss-nav">
+ <header id="kss-header">
+ <hgroup><h1>kss-node Styleguide</h1></hgroup>
+ </header>
+ <aside>
+ <nav><ul>
+ <li><a href="index.html">0.0: Overview</a></li>
+
+ <li><a href="section-1.html">1.0: Modules</a></li>
+
+ <li><a href="section-2.html">2.0: Forms</a></li>
+
+ </ul></nav>
+ </aside>
+</div>
+<div role="main" id="kss-main">
+ <article id="kss-content">
+
+ <h1 class="kss-title kss-title-main"> Overview </h1>
<p>This is a demo of <a href="https://github.com/kss-node/kss-node">kss-node</a>&apos;s built-in styleguide generator. The module is essentially a reimplementation of the <a href="https://github.com/kneath/kss">KSS</a> Ruby parser, in Node:
@@ -235,46 +233,50 @@ <h1 class="kss-title kss-title-main"> Overview </h1>
<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.
</p>
-
- </article>
- </div>
- <footer>
- <a href="https://github.com/kss-node/kss-node"><img id="kss-github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
- </footer>
- <!-- SCRIPTS -->
- <script src="public/kss.js"></script>
- <script src="public/prettify.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- var sidebarAdjust = function() {
- // Match footer/body height
- var height = Math.max($(window).height(), $('#kss-main').height());
-
- if ($(window).width() <= 768) {
- $('#kss-main, #kss-nav').height('auto');
- } else {
- $('#kss-main, #kss-nav').height(height);
- }
- };
-
- $(window).resize(sidebarAdjust);
- $(window).scroll(sidebarAdjust);
- sidebarAdjust();
-
- // Ensure code blocks are highlighted properly...
- $('pre>code').addClass('prettyprint');
- prettyPrint();
-
- });
+
+ </article>
+</div>
+
+
+<footer>
+ <a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+</footer>
+
+
+<!-- SCRIPTS -->
+<script src="public/kss.js"></script>
+<script src="public/prettify.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script>
+ $(document).ready(function(){
+ var sidebarAdjust = function() {
+ // Match footer/body height
+ var height = Math.max($(window).height(), $('#kss-main').height());
+
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
+ };
+
+ $(window).resize(sidebarAdjust);
+ $(window).scroll(sidebarAdjust);
+ sidebarAdjust();
+
+ // Ensure code blocks are highlighted properly...
+ $('pre>code').addClass('prettyprint');
+ prettyPrint();
+ });
+</script>
+
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
+ (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
</script>
-
-
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
- (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
-
+
</div></body>
</html>
View
285 gh-pages/section-1.html
@@ -5,177 +5,188 @@
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
-
<title>KSS: Living Styleguide</title>
+
<meta name="description" content="">
<meta name="generator" content="kss-node" />
-
<meta name="viewport" content="width=device-width">
- <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
-
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
-
</head>
<body><div id="kss-wrapper">
- <div id="kss-nav">
- <header id="kss-header">
- <hgroup><h1>kss-node Styleguide</h1></hgroup>
- </header>
- <aside>
- <nav><ul>
- <li><a href="index.html">0.0: Overview</a></li>
-
- <li><a href="section-1.html">1.0: Modules</a></li>
-
- <li><a href="section-2.html">2.0: Forms</a></li>
-
- </ul></nav>
- </aside>
- </div>
- <div role="main" id="kss-main">
- <article id="kss-content">
-
-
-
-
- <h1 class="kss-title"><span class="kss-ref">1.0</span> - Modules</h1>
-
-
-
- <p>Reusable elements that can be used across the site.
+<div id="kss-nav">
+ <header id="kss-header">
+ <hgroup><h1>kss-node Styleguide</h1></hgroup>
+ </header>
+ <aside>
+ <nav><ul>
+ <li><a href="index.html">0.0: Overview</a></li>
+
+ <li><a href="section-1.html">1.0: Modules</a></li>
+
+ <li><a href="section-2.html">2.0: Forms</a></li>
+
+ </ul></nav>
+ </aside>
+</div>
+<div role="main" id="kss-main">
+ <article id="kss-content">
+
+
+
+
+
+
+ <h1 class="kss-title"><span class="kss-ref">1.0</span> - Modules</h1>
+
+
+ <div class="kss-box"><p>Reusable elements that can be used across the site.
So far this just includes buttons. </p>
+</div>
+
-
-
-
-
-
- <section class="kss-depth-2">
- <h1 class="kss-title"><span class="kss-ref">1.1</span> - Buttons</h1>
-
-
- <div class="kss-box"><p>A majority of buttons in the site are built from the same base class.</p>
+
+
+
+
+
+ <section class="kss-depth-2">
+
+
+ <h1 class="kss-title"><span class="kss-ref">1.1</span> - Buttons</h1>
+
+
+ <div class="kss-box"><p>A majority of buttons in the site are built from the same base class.</p>
</div>
- <table class="kss-mod-list">
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Default styling</p></td>
- <td class="kss-mod-name"></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button {$modifiers}">Link Button</a>
+
+
+
+ <table class="kss-mod-list">
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Default styling</p></td>
+ <td class="kss-mod-name"></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>
<input type="button" class="button {$modifiers}" value="input[type='button']"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Indicate that the button is the primary feature of this form.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Indicate that the button is the primary feature of this form.</p>
</td>
- <td class="kss-mod-name"><p>.primary</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button primary">Link Button</a>
+ <td class="kss-mod-name"><p>.primary</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button primary">Link Button</a>
<button class="button primary">Button Element</button>
<input type="button" class="button primary" value="input[type='button']"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Indicate that the button will remove a feature, or other negative connotations.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Indicate that the button will remove a feature, or other negative connotations.</p>
</td>
- <td class="kss-mod-name"><p>.remove</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button remove">Link Button</a>
+ <td class="kss-mod-name"><p>.remove</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button remove">Link Button</a>
<button class="button remove">Button Element</button>
<input type="button" class="button remove" value="input[type='button']"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Highlight the button when hovered.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Highlight the button when hovered.</p>
</td>
- <td class="kss-mod-name"><p>:hover</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button pseudo-class-hover">Link Button</a>
+ <td class="kss-mod-name"><p>:hover</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button pseudo-class-hover">Link Button</a>
<button class="button pseudo-class-hover">Button Element</button>
<input type="button" class="button pseudo-class-hover" value="input[type='button']"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Make the button change appearance to reflect it being disabled.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Make the button change appearance to reflect it being disabled.</p>
</td>
- <td class="kss-mod-name"><p>:disabled</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button pseudo-class-disabled">Link Button</a>
+ <td class="kss-mod-name"><p>:disabled</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button pseudo-class-disabled">Link Button</a>
<button class="button pseudo-class-disabled">Button Element</button>
<input type="button" class="button pseudo-class-disabled" value="input[type='button']"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>&quot;Press&quot; the button down when clicked.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>&quot;Press&quot; the button down when clicked.</p>
</td>
- <td class="kss-mod-name"><p>:active</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><a href="#" class="button pseudo-class-active">Link Button</a>
+ <td class="kss-mod-name"><p>:active</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><a href="#" class="button pseudo-class-active">Link Button</a>
<button class="button pseudo-class-active">Button Element</button>
<input type="button" class="button pseudo-class-active" value="input[type='button']"/></td>
- </tr>
-
- </table>
- <div class="kss-markup">
- <pre class="prettyprint lang-html">&lt;a href=&quot;#&quot; class=&quot;button {$modifiers}&quot;&gt;Link Button&lt;/a&gt;
+ </tr>
+
+ </table>
+
+ <div class="kss-markup">
+ <pre class="prettyprint lang-html">&lt;a href=&quot;#&quot; class=&quot;button {$modifiers}&quot;&gt;Link Button&lt;/a&gt;
&lt;button class=&quot;button {$modifiers}&quot;&gt;Button Element&lt;/button&gt;
&lt;input type=&quot;button&quot; class=&quot;button {$modifiers}&quot; value=&quot;input[type=&#x27;button&#x27;]&quot;/&gt;</pre>
- </div>
-
-
- </section>
-
-
+ </div>
- </article>
- </div>
- <footer>
- <a href="https://github.com/kss-node/kss-node"><img id="kss-github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
- </footer>
- <!-- SCRIPTS -->
- <script src="public/kss.js"></script>
- <script src="public/prettify.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- var sidebarAdjust = function() {
- // Match footer/body height
- var height = Math.max($(window).height(), $('#kss-main').height());
-
- if ($(window).width() <= 768) {
- $('#kss-main, #kss-nav').height('auto');
- } else {
- $('#kss-main, #kss-nav').height(height);
- }
- };
-
- $(window).resize(sidebarAdjust);
- $(window).scroll(sidebarAdjust);
- sidebarAdjust();
-
- // Ensure code blocks are highlighted properly...
- $('pre>code').addClass('prettyprint');
- prettyPrint();
-
- });
- </script>
+
+ </section>
+
+
-
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
- (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
-
+ </article>
+</div>
+
+
+<footer>
+ <a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+</footer>
+
+
+<!-- SCRIPTS -->
+<script src="public/kss.js"></script>
+<script src="public/prettify.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script>
+ $(document).ready(function(){
+ var sidebarAdjust = function() {
+ // Match footer/body height
+ var height = Math.max($(window).height(), $('#kss-main').height());
+
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
+ };
+
+ $(window).resize(sidebarAdjust);
+ $(window).scroll(sidebarAdjust);
+ sidebarAdjust();
+
+ // Ensure code blocks are highlighted properly...
+ $('pre>code').addClass('prettyprint');
+ prettyPrint();
+ });
+</script>
+
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
+ (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
+ </script>
+
+
</div></body>
</html>
View
385 gh-pages/section-2.html
@@ -5,227 +5,248 @@
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
-
<title>KSS: Living Styleguide</title>
+
<meta name="description" content="">
<meta name="generator" content="kss-node" />
-
<meta name="viewport" content="width=device-width">
- <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
-
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
-
</head>
<body><div id="kss-wrapper">
- <div id="kss-nav">
- <header id="kss-header">
- <hgroup><h1>kss-node Styleguide</h1></hgroup>
- </header>
- <aside>
- <nav><ul>
- <li><a href="index.html">0.0: Overview</a></li>
-
- <li><a href="section-1.html">1.0: Modules</a></li>
-
- <li><a href="section-2.html">2.0: Forms</a></li>
-
- </ul></nav>
- </aside>
- </div>
- <div role="main" id="kss-main">
- <article id="kss-content">
-
-
-
-
- <h1 class="kss-title"><span class="kss-ref">2.0</span> - Forms</h1>
-
-
-
- <p>Covers styles used for forms, such as the <code>&lt;input&gt;</code> and <code>&lt;select&gt;</code>
+<div id="kss-nav">
+ <header id="kss-header">
+ <hgroup><h1>kss-node Styleguide</h1></hgroup>
+ </header>
+ <aside>
+ <nav><ul>
+ <li><a href="index.html">0.0: Overview</a></li>
+
+ <li><a href="section-1.html">1.0: Modules</a></li>
+
+ <li><a href="section-2.html">2.0: Forms</a></li>
+
+ </ul></nav>
+ </aside>
+</div>
+<div role="main" id="kss-main">
+ <article id="kss-content">
+
+
+
+
+
+
+ <h1 class="kss-title"><span class="kss-ref">2.0</span> - Forms</h1>
+
+
+ <div class="kss-box"><p>Covers styles used for forms, such as the <code>&lt;input&gt;</code> and <code>&lt;select&gt;</code>
elements.</p>
+</div>
+
-
-
-
-
-
- <section class="kss-depth-2">
- <h1 class="kss-title"><span class="kss-ref">2.1</span> - Text Input</h1>
-
-
-
- <p>Below are the text-oriented form elements used on the site.</p>
-
-
-
-
- </section>
-
-
-
- <section class="kss-depth-3">
- <h1 class="kss-title"><span class="kss-ref">2.1.1</span> - Single-Line Text Boxes</h1>
-
-
- <div class="kss-box"><p>Your standard, everyday text boxes.</p>
+
+
+
+
+
+ <section class="kss-depth-2">
+
+
+ <h1 class="kss-title"><span class="kss-ref">2.1</span> - Text Input</h1>
+
+
+ <div class="kss-box"><p>Below are the text-oriented form elements used on the site.</p>
</div>
- <table class="kss-mod-list">
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Default styling</p></td>
- <td class="kss-mod-name"></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><input type="text" class="{$modifiers}" value="Text"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Highlight the text box when hovering</p>
+
+
+
+
+
+ </section>
+
+
+
+ <section class="kss-depth-3">
+
+
+ <h1 class="kss-title"><span class="kss-ref">2.1.1</span> - Single-Line Text Boxes</h1>
+
+
+ <div class="kss-box"><p>Your standard, everyday text boxes.</p>
+</div>
+
+
+
+ <table class="kss-mod-list">
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Default styling</p></td>
+ <td class="kss-mod-name"></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><input type="text" class="{$modifiers}" value="Text"/></td>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Highlight the text box when hovering</p>
</td>
- <td class="kss-mod-name"><p>:hover</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><input type="text" class="pseudo-class-hover" value="Text"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Similar to <code>:hover</code>, however it should demand more attention than when an input is simply hovered.</p>
+ <td class="kss-mod-name"><p>:hover</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><input type="text" class="pseudo-class-hover" value="Text"/></td>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Similar to <code>:hover</code>, however it should demand more attention than when an input is simply hovered.</p>
</td>
- <td class="kss-mod-name"><p>:focus</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><input type="text" class="pseudo-class-focus" value="Text"/></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>When disabled, the input&apos;s appearance should reflect as such.</p>
+ <td class="kss-mod-name"><p>:focus</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><input type="text" class="pseudo-class-focus" value="Text"/></td>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>When disabled, the input&apos;s appearance should reflect as such.</p>
</td>
- <td class="kss-mod-name"><p>:disabled</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><input type="text" class="pseudo-class-disabled" value="Text"/></td>
- </tr>
-
- </table>
- <div class="kss-markup">
- <pre class="prettyprint lang-html">&lt;input type=&quot;text&quot; class=&quot;{$modifiers}&quot; value=&quot;Text&quot;/&gt;</pre>
- </div>
-
-
- </section>
-
+ <td class="kss-mod-name"><p>:disabled</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><input type="text" class="pseudo-class-disabled" value="Text"/></td>
+ </tr>
-
- <section class="kss-depth-3">
- <h1 class="kss-title"><span class="kss-ref">2.1.2</span> - Label/Textbox Pairs</h1>
-
-
- <div class="kss-box"><p>All labelled textboxes should be included in a wrapper <code>&lt;div&gt;</code> element for both layout
+ </table>
+
+ <div class="kss-markup">
+ <pre class="prettyprint lang-html">&lt;input type=&quot;text&quot; class=&quot;{$modifiers}&quot; value=&quot;Text&quot;/&gt;</pre>
+ </div>
+
+
+
+ </section>
+
+
+
+ <section class="kss-depth-3">
+
+
+ <h1 class="kss-title"><span class="kss-ref">2.1.2</span> - Label/Textbox Pairs</h1>
+
+
+ <div class="kss-box"><p>All labelled textboxes should be included in a wrapper <code>&lt;div&gt;</code> element for both layout
convenience and specific styling.</p>
</div>
- <table class="kss-mod-list">
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Default styling</p></td>
- <td class="kss-mod-name"></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><div class="mod-input text {$modifiers}">
+
+
+
+ <table class="kss-mod-list">
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Default styling</p></td>
+ <td class="kss-mod-name"></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><div class="mod-input text {$modifiers}">
<label>Text Label</label>
<input type="text" value="Text Input"/>
</div></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>To be used when the text input inside is expected to be disabled.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>To be used when the text input inside is expected to be disabled.</p>
</td>
- <td class="kss-mod-name"><p>.disabled</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><div class="mod-input text disabled">
+ <td class="kss-mod-name"><p>.disabled</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><div class="mod-input text disabled">
<label>Text Label</label>
<input type="text" value="Text Input"/>
</div></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>To be used if the input has failed a validation check.</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>To be used if the input has failed a validation check.</p>
</td>
- <td class="kss-mod-name"><p>.invalid</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><div class="mod-input text invalid">
+ <td class="kss-mod-name"><p>.invalid</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><div class="mod-input text invalid">
<label>Text Label</label>
<input type="text" value="Text Input"/>
</div></td>
- </tr>
-
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>To be used if the input has passed a validation check (intended for live validation in particular).</p>
+ </tr>
+
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>To be used if the input has passed a validation check (intended for live validation in particular).</p>
</td>
- <td class="kss-mod-name"><p>.valid</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2"><div class="mod-input text valid">
+ <td class="kss-mod-name"><p>.valid</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2"><div class="mod-input text valid">
<label>Text Label</label>
<input type="text" value="Text Input"/>
</div></td>
- </tr>
-
- </table>
- <div class="kss-markup">
- <pre class="prettyprint lang-html">&lt;div class=&quot;mod-input text {$modifiers}&quot;&gt;
+ </tr>
+
+ </table>
+
+ <div class="kss-markup">
+ <pre class="prettyprint lang-html">&lt;div class=&quot;mod-input text {$modifiers}&quot;&gt;
&lt;label&gt;Text Label&lt;/label&gt;
&lt;input type=&quot;text&quot; value=&quot;Text Input&quot;/&gt;
&lt;/div&gt;</pre>
- </div>
-
-
- </section>
-
-
+ </div>
- </article>
- </div>
- <footer>
- <a href="https://github.com/kss-node/kss-node"><img id="kss-github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>
- </footer>
- <!-- SCRIPTS -->
- <script src="public/kss.js"></script>
- <script src="public/prettify.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- var sidebarAdjust = function() {
- // Match footer/body height
- var height = Math.max($(window).height(), $('#kss-main').height());
-
- if ($(window).width() <= 768) {
- $('#kss-main, #kss-nav').height('auto');
- } else {
- $('#kss-main, #kss-nav').height(height);
- }
- };
-
- $(window).resize(sidebarAdjust);
- $(window).scroll(sidebarAdjust);
- sidebarAdjust();
-
- // Ensure code blocks are highlighted properly...
- $('pre>code').addClass('prettyprint');
- prettyPrint();
-
- });
- </script>
+
+ </section>
+
+
-
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
- (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
-
+ </article>
+</div>
+
+
+<footer>
+ <a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+</footer>
+
+
+<!-- SCRIPTS -->
+<script src="public/kss.js"></script>
+<script src="public/prettify.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script>
+ $(document).ready(function(){
+ var sidebarAdjust = function() {
+ // Match footer/body height
+ var height = Math.max($(window).height(), $('#kss-main').height());
+
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
+ };
+
+ $(window).resize(sidebarAdjust);
+ $(window).scroll(sidebarAdjust);
+ sidebarAdjust();
+
+ // Ensure code blocks are highlighted properly...
+ $('pre>code').addClass('prettyprint');
+ prettyPrint();
+ });
+</script>
+
+
+
+ <script type="text/javascript">
+ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
+ (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
+ </script>
+
+
</div></body>
</html>
View
221 lib/template/index.html
@@ -5,126 +5,129 @@
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
-
<title>KSS: Living Styleguide</title>
+
<meta name="description" content="">
<meta name="generator" content="kss-node" />
-
<meta name="viewport" content="width=device-width">
- <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
-
+ <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
-
</head>
<body><div id="kss-wrapper">
- <div id="kss-nav">
- <header id="kss-header">
- <hgroup><h1>kss-node Styleguide</h1></hgroup>
- </header>
- <aside>
- <nav><ul>
- <li><a href="index.html">0.0: Overview</a></li>
- {{#eachRoot}}
- <li><a href="section-{{reference}}.html">{{reference}}.0: {{header}}</a></li>
- {{/eachRoot}}
- </ul></nav>
- </aside>
- </div>
- <div role="main" id="kss-main">
- <article id="kss-content">
- {{#if overview}}
- {{html overview}}
- {{else}}
-
- {{!
- Find each section, in order.
- If there's no markup or modifiers supplied, use a Markdown-only
- layout instead.
-
- The "root" element comes first in this loop, and can be detected using
- the "#whenDepth 1" block as seen below.
- }}
- {{#eachSection rootNumber}}
- {{#whenDepth 1}}
- <h1 class="kss-title"><span class="kss-ref">{{ reference }}.0</span> - {{ header }}</h1>
- {{else}}
- <section class="kss-depth-{{ refDepth }}">
- <h1 class="kss-title"><span class="kss-ref">{{ reference }}</span> - {{ header }}</h1>
- {{/whenDepth}}
- {{#ifAny markup modifiers}}
- <div class="kss-box">{{html description}}</div>
- <table class="kss-mod-list">
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc"><p>Default styling</p></td>
- <td class="kss-mod-name"></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2">{{modifierMarkup}}</td>
- </tr>
- {{#eachModifier}}
- <tr class="kss-mod-desc-group">
- <td class="kss-mod-desc">{{html description}}</td>
- <td class="kss-mod-name"><p>{{name}}</p></td>
- </tr>
- <tr class="kss-mod-example">
- <td colspan="2">{{modifierMarkup}}</td>
- </tr>
- {{/eachModifier}}
- </table>
- <div class="kss-markup">
- <pre class="prettyprint lang-html">{{markup}}</pre>
- </div>
- {{else}}
- {{#if description}}
- {{html description}}
- {{/if}}
- {{/ifAny}}
- {{#whenDepth 1}} {{else}}
- </section>
- {{/whenDepth}}
- {{/eachSection}}
+
+<div id="kss-nav">
+ <header id="kss-header">
+ <hgroup><h1>kss-node Styleguide</h1></hgroup>
+ </header>
+ <aside>
+ <nav><ul>
+ <li><a href="index.html">0.0: Overview</a></li>
+ {{#eachRoot}}
+ <li><a href="section-{{reference}}.html">{{reference}}.0: {{header}}</a></li>
+ {{/eachRoot}}
+ </ul></nav>
+ </aside>
+</div>
+<div role="main" id="kss-main">
+ <article id="kss-content">
+ {{#if overview}}
+ {{html overview}}
+ {{else}}
+
+ {{!
+ Find each section, in order.
+ If there's no markup or modifiers supplied, use a Markdown-only
+ layout instead.
+
+ The "root" element comes first in this loop, and can be detected using
+ the "#whenDepth 1" block as seen below.
+ }}
+ {{#eachSection rootNumber}}
+ {{#whenDepth 1}} {{else}}
+ <section class="kss-depth-{{ refDepth }}">
+ {{/whenDepth}}
+
+ <h1 class="kss-title"><span class="kss-ref">{{ reference }}{{#whenDepth 1}}.0{{/whenDepth}}</span> - {{ header }}</h1>
+
+ {{#if description}}
+ <div class="kss-box">{{html description}}</div>
{{/if}}
- </article>
- </div>
- <footer>
- {{#if argv.xdemo}}<a href="https://github.com/kss-node/kss-node"><img id="kss-github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://a248.e.akamai.net/assets.github.com/img/30f550e0d38ceb6ef5b81500c64d970b7fb0f028/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub"></a>{{/if}}
- </footer>
- <!-- SCRIPTS -->
- <script src="public/kss.js"></script>
- <script src="public/prettify.js"></script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script>
- $(document).ready(function(){
- var sidebarAdjust = function() {
- // Match footer/body height
- var height = Math.max($(window).height(), $('#kss-main').height());
-
- if ($(window).width() <= 768) {
- $('#kss-main, #kss-nav').height('auto');
- } else {
- $('#kss-main, #kss-nav').height(height);
- }
- };
-
- $(window).resize(sidebarAdjust);
- $(window).scroll(sidebarAdjust);
- sidebarAdjust();
-
- // Ensure code blocks are highlighted properly...
- $('pre>code').addClass('prettyprint');
- prettyPrint();
-
- });
- </script>
- {{! This won't be included in the demo page }}
- {{#if argv.xdemo}}
- <script type="text/javascript">
- var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
- (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
- </script>
+ {{#ifAny markup modifiers}}
+ <table class="kss-mod-list">
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc"><p>Default styling</p></td>
+ <td class="kss-mod-name"></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2">{{modifierMarkup}}</td>
+ </tr>
+ {{#eachModifier}}
+ <tr class="kss-mod-desc-group">
+ <td class="kss-mod-desc">{{html description}}</td>
+ <td class="kss-mod-name"><p>{{name}}</p></td>
+ </tr>
+ <tr class="kss-mod-example">
+ <td colspan="2">{{modifierMarkup}}</td>
+ </tr>
+ {{/eachModifier}}
+ </table>
+
+ <div class="kss-markup">
+ <pre class="prettyprint lang-html">{{markup}}</pre>
+ </div>
+ {{/ifAny}}
+
+ {{#whenDepth 1}} {{else}}
+ </section>
+ {{/whenDepth}}
+ {{/eachSection}}
{{/if}}
+ </article>
+</div>
+
+{{#if argv.xdemo}}
+<footer>
+ <a href="https://github.com/you"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>
+</footer>
+{{/if}}
+
+<!-- SCRIPTS -->
+<script src="public/kss.js"></script>
+<script src="public/prettify.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+<script>
+ $(document).ready(function(){
+ var sidebarAdjust = function() {
+ // Match footer/body height
+ var height = Math.max($(window).height(), $('#kss-main').height());
+
+ if ($(window).width() <= 768) {
+ $('#kss-main, #kss-nav').height('auto');
+ } else {
+ $('#kss-main, #kss-nav').height(height);
+ }
+ };
+
+ $(window).resize(sidebarAdjust);
+ $(window).scroll(sidebarAdjust);
+ sidebarAdjust();
+
+ // Ensure code blocks are highlighted properly...
+ $('pre>code').addClass('prettyprint');
+ prettyPrint();
+ });
+</script>
+
+{{! This won't be included in the demo page }}
+{{#if argv.xdemo}}
+ <script type="text/javascript">
+ var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-12249588-4']); _gaq.push(['_trackPageview']);
+ (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
+ </script>
+{{/if}}
+
</div></body>
</html>
Please sign in to comment.
Something went wrong with that request. Please try again.