Permalink
Browse files

Aesthetic tweaks

* Updated README.md
* Add preview screenshot
* Rearrange buttons on demo
* Add argv variable in Handlebar templates - allows additional variables to be passed through to the template
  • Loading branch information...
1 parent ba97a97 commit a9262885a08a619a3d7a74abe36074ed23c2fb63 @hughsk hughsk committed Mar 8, 2012
View
@@ -2,7 +2,7 @@ test:
mocha -u tdd --reporter spec
gh-pages:
- node ./bin/kss-node demo gh-pages -l demo/styles.less
+ node ./bin/kss-node demo gh-pages -l demo/styles.less --xdemo
.PHONY: test
.PHONY: gh-pages
View
@@ -24,10 +24,14 @@ You'll need to specify a directory containing all of your CSS files to be parsed
$ kss-node demo styleguide --less demo/styles.less
-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.
+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. The default template should look something like this:
+
+![CLI Template Preview](https://raw.github.com/hughsk/kss-node/develop/demo/preview.png)
## Using kss-node from Node
+Check out the [Module API](https://github.com/hughsk/kss-node/wiki/Module-API) a full explanation. Here's an example:
+
var kss = require('kss'),
options = {
markdown: false
@@ -36,17 +40,17 @@ You can create your own templates too, either by editing the contents of the `li
kss.traverse('public/stylesheets/', options, function(err, styleguide) {
if (err) { throw err; }
- styleguide.section('2.1.1') // <KssSection>
+ styleguide.section('2.1.1') // <KssSection>
- styleguide.section('2.1.1').description() // A button suitable for giving stars to someone
+ styleguide.section('2.1.1').description() // A button suitable for giving stars to someone
- styleguide.section('2.1.1').modifiers(0) // <KssModifier>
+ styleguide.section('2.1.1').modifiers(0) // <KssModifier>
- styleguide.section('2.1.1').modifiers(0).name // ':hover'
+ styleguide.section('2.1.1').modifiers(0).name // ':hover'
styleguide.section('2.1.1').modifiers(0).description // 'Subtle hover highlight'
- styleguide.section('2.1.1').modifiers(':hover').description() // 'Subtle hover highlight'
+ styleguide.section('2.1.1').modifiers(':hover').description() // 'Subtle hover highlight'
styleguide.section('2.1.1').modifiers(0).className() // 'pseudo-class-hover'
@@ -56,11 +60,10 @@ You can create your own templates too, either by editing the contents of the `li
});
-Check out the [Module API](https://github.com/hughsk/kss-node/wiki/Module-API) for more information.
## Differences
-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.
+Included are a few additional (optional) features to allow for completely automated styleguide generation.
Take a look at the [demo project](http://github.com/hughsk/kss-node/tree/master/demo) for some examples.
View
@@ -86,7 +86,7 @@ wrench.copyDirSyncRecursive(
process.nextTick(function() {
less.render('@import "' + path.relative(process.cwd(), options.destinationDirectory) + '/public/kss.less";', function(err, css) {
if (err) {
- console.log(err);
+ console.error(err);
throw err;
}
@@ -210,7 +210,8 @@ generatePage = function(styleguide, sections, root, pages, sectionRoots) {
sections: jsonSections(sections),
rootNumber: root,
sectionRoots: sectionRoots,
- overview: false
+ overview: false,
+ argv: argv || {}
})
);
};
@@ -226,6 +227,7 @@ generateIndex = function(styleguide, sections, pages, sectionRoots) {
sectionRoots: sectionRoots,
sections: jsonSections(sections),
rootNumber: 0,
+ argv: argv || {},
overview: marked(fs.readFileSync(options.sourceDirectory + '/styleguide.md', 'utf8'))
})
);
@@ -7,11 +7,11 @@
// <button class="button {$modifiers}">Button Element</button>
// <input type="button" class="button {$modifiers}" value="input[type='button']"/>
//
+// .primary - Indicate that the button is the primary feature of this form.
+// .remove - Indicate that the button will remove a feature, or other negative connotations.
// :hover - Highlight the button when hovered.
// :disabled - Make the button change appearance to reflect it being disabled.
// :active - "Press" the button down when clicked.
-// .primary - Indicate that the button is the primary feature of this form.
-// .remove - Indicate that the button will remove a feature, or other negative connotations.
//
// Styleguide 1.1
.button {
View
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -1,6 +1,6 @@
<h1 class="kss-title kss-title-main"> Overview </h1>
-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:
+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 the [KSS](http://github.com/kneath/kss) Ruby parser, in Node:
> Inspired by TomDoc, KSS attempts to provide a methodology for writing maintainable, documented CSS within a team.
> Specifically, KSS is a documentation specification and styleguide format.
View
@@ -8,18 +8,15 @@
<title>KSS: Living Styleguide</title>
<meta name="description" content="">
- <meta name="generator" content="kss-node [http://github.com/hughsk/kss-node]" />
+ <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/less" href="public/style.less">-->
<link rel="stylesheet" href="public/kss.css">
<link rel="stylesheet" href="public/style.css">
- <!--<script type="text/javascript" src="public/less.js"></script>-->
-
</head>
<body><div id="kss-wrapper">
<div id="kss-nav">
@@ -42,7 +39,7 @@
<h1 class="kss-title kss-title-main"> Overview </h1>
-<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:
+<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 the <a href="http://github.com/kneath/kss">KSS</a> Ruby parser, in Node:
</p>
<blockquote>
@@ -242,7 +239,7 @@ <h1 class="kss-title kss-title-main"> Overview </h1>
</article>
</div>
<footer>
-
+ <a href="http://github.com/hughsk/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>
Oops, something went wrong.
@@ -149,14 +149,9 @@ li.L9 { background: #eee }
}
}
-/*@media screen and (max-width:768px) and (orientation:landscape) {
- body {
- font-size:12px;
+@media screen and (max-width: 640px) {
+ #kss-github {
+ display:none;
}
}
-@media screen and (max-width:48px) and (orientation:landscape) {
- body {
- font-size:10px;
- }
-}*/
// @end
Oops, something went wrong.

0 comments on commit a926288

Please sign in to comment.