Skip to content

Commit

Permalink
add examples
Browse files Browse the repository at this point in the history
  • Loading branch information
straker committed Mar 16, 2016
1 parent cca4f9c commit 297f4cc
Show file tree
Hide file tree
Showing 18 changed files with 875 additions and 75 deletions.
21 changes: 21 additions & 0 deletions LICENSE.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2016 Steven Lambert

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
22 changes: 20 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -259,7 +259,9 @@ livingcss('input.css', 'styleguide.html', {
```

* `allSections` - List of all sections.
* `footerHTML` - HTML content of the footer. Defualts to `Style Guide generated with LivingCSS`.
* `globalStylesheets` - List of all CSS files to load in the `<head>` of the style guide.
* `menuButtonHTML` - HTML content of the menu button. Defaults to `☰ Menu`.
* `navbar` - List of page links for linking pages together in the `<header>` navigation bar. Only set if there is more than one page defined.
* `pageOrder` - List of page names in order that they should be sorted.
* `pages` - List of all pages and their sections. List will be sorted by `options.sortOrder`.
Expand All @@ -272,7 +274,7 @@ livingcss('input.css', 'styleguide.html', {

LivingCSS has a few helpful utility functions that you can use in custom tags or in the `options.preprocess` function.

* `livingcss.getId(name)` - Get a hyphenated id from the name. Useful for generating ids for the DOM or URL names.
* `livingcss.getId(name)` - Get a hyphenated id from the name. Useful for generating ids for the DOM or a URL.

```js
livingcss.getId('Section Name'); //=> 'section-name'
Expand Down Expand Up @@ -302,4 +304,20 @@ LivingCSS has a few helpful utility functions that you can use in custom tags or
});
```

* `livingcss.readFiles(files, callback)` - Pass a file or array of files to be read and a callback function that will be called for each file read. The function will be passed the file contents and the name of the file as parameters. Returns a Promise that is resolved when all files have been read.
* `livingcss.readFiles(files, callback)` - Pass a file or array of files to be read and a callback function that will be called for each file read. The function will be passed the file contents and the name of the file as parameters. Returns a Promise that is resolved when all files have been read.

```js
var path = require('path');

livingcss('input.css', 'styleguide.html', {
preprocess: function(context, Handlebars) {
// register a glob of partials with Handlebars
return livingcss.readFiles(['partials/one.hb', 'partials/two.hb'], function(data, file) {

// make the name of the partial the name of the file
var partialName = path.basename(file, path.extname(file));
Handlebars.registerPartial(partialName, data);
});
}
});
```
13 changes: 0 additions & 13 deletions TODO.md

This file was deleted.

2 changes: 0 additions & 2 deletions examples/basic/buttons.css
Original file line number Diff line number Diff line change
Expand Up @@ -45,8 +45,6 @@
* <button class="btn primary">Button</button>
* <input type="submit" class="btn primary" value="Input"/>
* <a href="#" class="btn primary">Anchor</a>
*
* @page test this
*/
.btn.primary {
background-color: #60b044;
Expand Down
42 changes: 28 additions & 14 deletions examples/basic/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@

MODULAR FONT SCALE
------------------
14px - small, H6
16px - body
14px - small
16px - body, H6
18px - H5
22px - H4
26px - H3
Expand Down Expand Up @@ -70,6 +70,14 @@
line-height: 3.25rem; /* 1.625 * 2 */
}

h4 {
font-size: 1.375rem; /* 22 / 16 */
}

h5 {
font-size: 1.125rem; /* 18 / 16 */
}

h4, h5, h6 {
line-height: 1.625rem;
margin: 0;
Expand Down Expand Up @@ -186,7 +194,7 @@
}

.livingcss__article + .livingcss__article {
margin-top: 3.25rem;
margin-top: 4.875rem;
}

.livingcss__section {
Expand Down Expand Up @@ -415,17 +423,9 @@

<header class="livingcss__header">
<div class="livingcss__header-title-container livingcss__inverse-text">
<h1 class="livingcss__container livingcss__header-title">LivingCSS Style Guide</h1>
</div>

<div class="livingcss__main-nav-container">
<nav class="livingcss__container livingcss__main-nav">
<a class="livingcss__nav-link livingcss__nav-link--main " href="test-this.html">test this</a>
<a class="livingcss__nav-link livingcss__nav-link--main livingcss__nav-link--active" href="index.html">index</a>
</nav>
<h1 class="livingcss__container livingcss__header-title"><a href="">LivingCSS Style Guide</a></h1>
</div>

<button class="livingcss__menu livingcss__inverse-text">☰ Menu</button>
</header>

<div class="livingcss__container livingcss__content">
Expand All @@ -443,6 +443,20 @@ <h1 class="livingcss__article-title">Buttons</h1><div class="livingcss__section-
<pre class="livingcss__section-code"><code class="language-markup">&lt;button class&#x3D;&quot;btn&quot;&gt;Button&lt;/button&gt;
&lt;input type&#x3D;&quot;submit&quot; class&#x3D;&quot;btn&quot; value&#x3D;&quot;Input&quot;/&gt;
&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;btn&quot;&gt;Anchor&lt;/a&gt;</code></pre>
</div>

</article>
<article class="livingcss__article" id="primary-button">
<h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__section-description"><p>A primary button</p></div>

<livingcss-example><button class="btn primary">Button</button>
<input type="submit" class="btn primary" value="Input"/>
<a href="#" class="btn primary">Anchor</a></livingcss-example>

<div class="livingcss__section-markup">
<pre class="livingcss__section-code"><code class="language-markup">&lt;button class&#x3D;&quot;btn primary&quot;&gt;Button&lt;/button&gt;
&lt;input type&#x3D;&quot;submit&quot; class&#x3D;&quot;btn primary&quot; value&#x3D;&quot;Input&quot;/&gt;
&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;btn primary&quot;&gt;Anchor&lt;/a&gt;</code></pre>
</div>

</article>
Expand All @@ -452,6 +466,7 @@ <h1 class="livingcss__article-title">Buttons</h1><div class="livingcss__section-
<nav class="livingcss__nav">
<div class="livingcss__nav-container">
<a class="livingcss__nav-link" href="#buttons">Buttons</a>
<a class="livingcss__nav-link" href="#primary-button">Primary Button</a>
</div>
</nav>

Expand All @@ -470,7 +485,6 @@ <h1 class="livingcss__article-title">Buttons</h1><div class="livingcss__section-
<!-- /prism -->

<!-- user scripts -->
<script src="test.js"></script>
<!-- /user scripts -->

<script>
Expand Down Expand Up @@ -522,7 +536,7 @@ <h1 class="livingcss__article-title">Buttons</h1><div class="livingcss__section-
var y = window.scrollY;

// fix the sidebar nav
if (nav.getBoundingClientRect().top <= 0) {
if (nav.getBoundingClientRect().top <= 0 && y > 50) {
nav.classList.add('livingcss__nav--fixed');
}
else {
Expand Down
7 changes: 1 addition & 6 deletions examples/basic/index.js
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
var livingcss = require('../../index');

livingcss('buttons.css', {
sortOrder: {'test this': ['buttons']},
preprocess: function(context) {
context.scripts.push('test.js');
}
});
livingcss('buttons.css');
2 changes: 0 additions & 2 deletions examples/basic/test.js

This file was deleted.

65 changes: 65 additions & 0 deletions examples/parse-handlebars-as-example/buttons.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
/**
* Buttons
*
* The Button `.btn` class can be applied to `<button>`, `<input>`, or `<a>` elements.
*
* @section
*
* @button Button
* @input Input
* @anchor Anchor
*
* @handlebarsExample handlebars.hbs
*/
.btn {
background-color: #ddd;
border-radius: 4px;
border: 2px solid transparent;
color: black;
display: inline-block;
font-size: 16px;
line-height: 1;
padding: 5px 15px;
text-decoration: none;
}

.btn:hover,
.btn:focus,
.btn:active {
background-color: #aaa;
text-decoration: none;
cursor: pointer;
}

.btn:disabled {
opacity: 0.5;
}

/**
* Primary Button
*
* A primary button
*
* @section
*
* @example
* <button class="btn primary">Button</button>
* <input type="submit" class="btn primary" value="Input"/>
* <a href="#" class="btn primary">Anchor</a>
*/
.btn.primary {
background-color: #60b044;
background-image: linear-gradient(#8add6d, #60b044);
border-color: #5ca941;
color: #fff;
}
.btn.primary:hover {
background-color: #569e3d;
background-image: linear-gradient(#79d858, #569e3d);
border-color: #4a993e;
}

.btn.smaller {
font-size: 10px;
padding: 4px 10px;
}
3 changes: 3 additions & 0 deletions examples/parse-handlebars-as-example/handlebars.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
<button class="btn">{{button}}</button>
<input type="submit" class="btn" value="{{input}}"/>
<a href="#" class="btn">{{anchor}}</a>
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,8 @@

MODULAR FONT SCALE
------------------
14px - small, H6
16px - body
14px - small
16px - body, H6
18px - H5
22px - H4
26px - H3
Expand Down Expand Up @@ -70,6 +70,14 @@
line-height: 3.25rem; /* 1.625 * 2 */
}

h4 {
font-size: 1.375rem; /* 22 / 16 */
}

h5 {
font-size: 1.125rem; /* 18 / 16 */
}

h4, h5, h6 {
line-height: 1.625rem;
margin: 0;
Expand Down Expand Up @@ -186,7 +194,7 @@
}

.livingcss__article + .livingcss__article {
margin-top: 3.25rem;
margin-top: 4.875rem;
}

.livingcss__section {
Expand Down Expand Up @@ -415,23 +423,29 @@

<header class="livingcss__header">
<div class="livingcss__header-title-container livingcss__inverse-text">
<h1 class="livingcss__container livingcss__header-title">LivingCSS Style Guide</h1>
<h1 class="livingcss__container livingcss__header-title"><a href="">LivingCSS Style Guide</a></h1>
</div>

<div class="livingcss__main-nav-container">
<nav class="livingcss__container livingcss__main-nav">
<a class="livingcss__nav-link livingcss__nav-link--main livingcss__nav-link--active" href="test-this.html">test this</a>
<a class="livingcss__nav-link livingcss__nav-link--main " href="index.html">index</a>
</nav>
</div>

<button class="livingcss__menu livingcss__inverse-text">☰ Menu</button>
</header>

<div class="livingcss__container livingcss__content">

<main class="livingcss__main" role="main">

<article class="livingcss__article" id="buttons">
<h1 class="livingcss__article-title">Buttons</h1><div class="livingcss__section-description"><p>The Button <code>.btn</code> class can be applied to <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, or <code>&lt;a&gt;</code> elements.</p></div>

<livingcss-example><button class="btn">Button</button>
<input type="submit" class="btn" value="Input"/>
<a href="#" class="btn">Anchor</a></livingcss-example>

<div class="livingcss__section-markup">
<pre class="livingcss__section-code"><code class="language-markup">&lt;button class&#x3D;&quot;btn&quot;&gt;Button&lt;/button&gt;
&lt;input type&#x3D;&quot;submit&quot; class&#x3D;&quot;btn&quot; value&#x3D;&quot;Input&quot;/&gt;
&lt;a href&#x3D;&quot;#&quot; class&#x3D;&quot;btn&quot;&gt;Anchor&lt;/a&gt;</code></pre>
</div>

</article>
<article class="livingcss__article" id="primary-button">
<h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__section-description"><p>A primary button</p></div>

Expand All @@ -451,6 +465,7 @@ <h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__s

<nav class="livingcss__nav">
<div class="livingcss__nav-container">
<a class="livingcss__nav-link" href="#buttons">Buttons</a>
<a class="livingcss__nav-link" href="#primary-button">Primary Button</a>
</div>
</nav>
Expand All @@ -470,7 +485,6 @@ <h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__s
<!-- /prism -->

<!-- user scripts -->
<script src="test.js"></script>
<!-- /user scripts -->

<script>
Expand Down Expand Up @@ -522,7 +536,7 @@ <h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__s
var y = window.scrollY;

// fix the sidebar nav
if (nav.getBoundingClientRect().top <= 0) {
if (nav.getBoundingClientRect().top <= 0 && y > 50) {
nav.classList.add('livingcss__nav--fixed');
}
else {
Expand All @@ -548,9 +562,12 @@ <h1 class="livingcss__article-title">Primary Button</h1><div class="livingcss__s
});

// open mobile drawer
document.querySelector('.livingcss__menu').addEventListener('click', function(e) {
document.body.classList.toggle('livingcss__main-nav--open')
});
var menu = document.querySelector('.livingcss__menu');
if (menu) {
menu.addEventListener('click', function(e) {
document.body.classList.toggle('livingcss__main-nav--open')
});
}
})(window, document);
</script>
</body>
Expand Down
Loading

0 comments on commit 297f4cc

Please sign in to comment.