grunt-livingstyleguide
Version:
Easily create living style guides/front-end style guides/pattern libraries by adding Markdown documentation to your Sass project.
512 lines (432 loc) • 23 kB
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="The LivingStyleGuide Gem – http://livingstyleguide.org" name="generator">
<title>My Nice & Beautiful Living Style Guide</title>
<script>
// see: http://www.hagenburger.net/BLOG/Simple-HTML5-Fix-for-IE.html
for(var e,l='article aside footer header nav section time picture'.split(' ');e=l.pop();document.createElement(e));
</script>
<style>
.button {
color: pink;
background: green;
border: 1px solid #333; }
.livingstyleguide, .livingstyleguide--container, .livingstyleguide--footer, .livingstyleguide--logo, .livingstyleguide--paragraph,
.livingstyleguide--code-block,
.livingstyleguide--unordered-list,
.livingstyleguide--ordered-list, .livingstyleguide--unordered-list-item,
.livingstyleguide--ordered-list-item, .livingstyleguide--page-title,
.livingstyleguide--headline,
.livingstyleguide--sub-headline,
.livingstyleguide--sub-sub-headline, .livingstyleguide--anchor, .livingstyleguide--example, .livingstyleguide--font-example, .livingstyleguide--code, .livingstyleguide--code-span, .livingstyleguide--code-span kbd,
.livingstyleguide--code-block kbd, .livingstyleguide--code-span em,
.livingstyleguide--code-block em, .livingstyleguide--code-span b,
.livingstyleguide--code-block b, .livingstyleguide--code-span i,
.livingstyleguide--code-block i, .livingstyleguide--code-span q,
.livingstyleguide--code-block q, .livingstyleguide--code-span var,
.livingstyleguide--code-block var, .livingstyleguide--code-highlight, .livingstyleguide--code-highlight-block, .livingstyleguide--color-swatch, .livingstyleguide--color-swatch:before, .livingstyleguide--color-swatches {
background: transparent;
border: none;
border-collapse: collapse;
border-radius: 0;
border-spacing: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: inherit;
display: block;
font-size: inherit;
-webkit-font-smoothing: antialiased;
font-style: inherit;
font-weight: inherit;
line-height: inherit;
list-style: none;
margin: 0;
padding: 0;
text-align: inherit;
text-decoration: none;
vertical-align: baseline; }
.livingstyleguide {
background: #f7f7f7;
display: block; }
.livingstyleguide--container {
display: block;
min-height: 50vh; }
.livingstyleguide--footer {
display: block;
margin: 40px auto;
width: 640px; }
.livingstyleguide--logo {
background: url("data:image/png;base64,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");
background-size: 100%;
display: block;
height: 100px;
margin: auto;
overflow: hidden;
text-align: left;
text-indent: -119988px;
width: 203px; }
.livingstyleguide--logo:hover {
-webkit-transform: translateZ(0);
-webkit-filter: brightness(0.7);
-moz-filter: brightness(0.7);
filter: brightness(0.7); }
.livingstyleguide--paragraph,
.livingstyleguide--code-block,
.livingstyleguide--unordered-list,
.livingstyleguide--ordered-list {
color: #505050;
font-family: "Georgia", "Times New Roman", serif;
font-size: 14px;
font-weight: normal;
line-height: 1.4;
margin: 10px auto;
text-align: left;
width: 640px;
-webkit-font-smoothing: antialiased; }
.livingstyleguide--unordered-list-item,
.livingstyleguide--ordered-list-item {
display: list-item;
list-style: disc;
margin: 5px 0 5px 20px; }
.livingstyleguide--page-title,
.livingstyleguide--headline,
.livingstyleguide--sub-headline,
.livingstyleguide--sub-sub-headline {
color: #505050;
display: block;
font-family: "Georgia", "Times New Roman", serif;
font-size: 22px;
font-weight: bold;
line-height: 1.1;
margin: 30px auto 10px;
text-align: left;
width: 640px;
-webkit-font-smoothing: antialiased; }
.livingstyleguide--anchor {
color: inherit;
display: inline;
margin-left: -1em;
opacity: 0;
position: absolute;
text-decoration: none;
width: 1em; }
.livingstyleguide--headline:hover .livingstyleguide--anchor, .livingstyleguide--sub-headline:hover .livingstyleguide--anchor, .livingstyleguide--sub-sub-headline:hover .livingstyleguide--anchor {
opacity: 0.5; }
.livingstyleguide--headline:hover .livingstyleguide--anchor:hover, .livingstyleguide--sub-headline:hover .livingstyleguide--anchor:hover, .livingstyleguide--sub-sub-headline:hover .livingstyleguide--anchor:hover {
opacity: 1; }
.livingstyleguide--anchor:before {
content: "#"; }
.livingstyleguide--page-title {
display: block;
font-size: 30px; }
.livingstyleguide--sub-headline {
display: block;
font-size: 16px; }
.livingstyleguide--sub-sub-headline {
display: block;
font-size: 14px; }
.livingstyleguide--example, .livingstyleguide--font-example {
background: white;
border-top-left-radius: 0;
border-top-right-radius: 0;
display: block;
margin: 10px auto 0;
overflow: hidden;
padding: 10px;
position: relative;
width: 640px; }
.livingstyleguide--example.-lsg-has-full-width, .-lsg-has-full-width.livingstyleguide--font-example {
border-radius: 0;
display: block;
height: auto;
margin: 0 auto;
min-height: auto;
padding: 10px;
width: 100%; }
.livingstyleguide--example.-lsg-for-javascript, .-lsg-for-javascript.livingstyleguide--font-example {
display: none; }
.livingstyleguide--code-span,
.livingstyleguide--code-block {
background: #dddddd;
border-radius: 0;
color: #505050;
display: inline;
font-family: Courier, "Courier New", monospace;
font-size: 12px;
font-weight: normal;
overflow: scroll;
padding: 0 3px;
-webkit-font-smoothing: subpixel-antialiased; }
.livingstyleguide--code-span kbd,
.livingstyleguide--code-block kbd {
display: block;
font-weight: bold; }
.livingstyleguide--code-span kbd:before,
.livingstyleguide--code-block kbd:before {
content: "> "; }
.livingstyleguide--code-span em,
.livingstyleguide--code-block em {
color: #6a6a6a;
display: inline;
font-style: normal;
font-weight: bold;
text-decoration: underline;
vertical-align: baseline; }
.livingstyleguide--code-span b,
.livingstyleguide--code-block b {
color: #838383;
display: inline;
font-weight: bold;
vertical-align: baseline; }
.livingstyleguide--code-span i,
.livingstyleguide--code-block i {
color: #9d9d9d;
display: inline;
vertical-align: baseline; }
.livingstyleguide--code-span q,
.livingstyleguide--code-block q {
color: #9d9d9d;
display: inline;
vertical-align: baseline; }
.livingstyleguide--code-span q:before, .livingstyleguide--code-span q:after,
.livingstyleguide--code-block q:before,
.livingstyleguide--code-block q:after {
content: ""; }
.livingstyleguide--code-span var,
.livingstyleguide--code-block var {
display: inline;
text-decoration: underline;
vertical-align: baseline; }
.livingstyleguide--code-block {
display: block;
line-height: 1.5;
padding: 3px 6px;
width: 640px; }
.show-code .livingstyleguide--code-block {
display: block; }
.livingstyleguide--example + .livingstyleguide--code-block, .livingstyleguide--font-example + .livingstyleguide--code-block {
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: 0; }
.livingstyleguide--layout-example + .livingstyleguide--code-block {
background: #dddddd;
border-radius: 0;
margin: 0 0 10px;
padding: 10px 0;
width: 100%; }
.livingstyleguide--layout-example + .livingstyleguide--code-block .livingstyleguide--code {
display: block;
margin: auto;
width: 640px; }
.livingstyleguide--code-highlight, .livingstyleguide--code-highlight-block {
background-color: #f6ffa3;
border-radius: 2px;
display: inline;
vertical-align: baseline; }
.livingstyleguide--code-highlight-block {
display: block; }
.livingstyleguide--color-swatch {
color: black;
float: left;
font-family: Courier, "Courier New", monospace;
font-size: 12px;
font-weight: bold;
height: 5.6em;
line-height: 1.4em;
list-style: none;
margin: 0 10px 10px 0;
position: relative;
text-align: center;
z-index: 1; }
.livingstyleguide--color-swatch:before {
border: 4px rgba(0, 0, 0, 0.05) solid;
border-radius: 50%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1; }
.livingstyleguide--color-swatch:after {
display: block;
font-weight: normal;
text-align: center; }
.livingstyleguide--color-swatches {
margin: 10px auto -10px auto;
overflow: hidden;
padding-left: 10px;
width: 660px; }
.livingstyleguide--color-swatches.-lsg-1-columns .livingstyleguide--color-swatch {
height: 640px;
padding-top: 428px;
width: 640px; }
.livingstyleguide--color-swatches.-lsg-2-columns .livingstyleguide--color-swatch {
height: 315px;
padding-top: 200.5px;
width: 315px; }
.livingstyleguide--color-swatches.-lsg-3-columns .livingstyleguide--color-swatch {
height: 206px;
padding-top: 124.2px;
width: 206px; }
.livingstyleguide--color-swatches.-lsg-4-columns .livingstyleguide--color-swatch {
height: 152px;
padding-top: 86.4px;
width: 152px; }
.livingstyleguide--color-swatches.-lsg-5-columns .livingstyleguide--color-swatch {
height: 120px;
padding-top: 64px;
width: 120px; }
.livingstyleguide--color-swatches.-lsg-6-columns .livingstyleguide--color-swatch {
height: 98px;
padding-top: 48.6px;
width: 98px; }
.livingstyleguide--color-swatches.-lsg-7-columns .livingstyleguide--color-swatch {
height: 82px;
padding-top: 37.4px;
width: 82px; }
.livingstyleguide--color-swatches.-lsg-8-columns .livingstyleguide--color-swatch {
height: 71px;
padding-top: 29.7px;
width: 71px; }
.livingstyleguide--color-swatches.-lsg-9-columns .livingstyleguide--color-swatch {
height: 62px;
padding-top: 23.4px;
width: 62px; }
.livingstyleguide--color-swatches.-lsg-10-columns .livingstyleguide--color-swatch {
height: 55px;
padding-top: 18.5px;
width: 55px; }
.livingstyleguide--color-swatches.-lsg-11-columns .livingstyleguide--color-swatch {
height: 49px;
padding-top: 14.3px;
width: 49px; }
.livingstyleguide--color-swatches.-lsg-12-columns .livingstyleguide--color-swatch {
height: 44px;
padding-top: 10.8px;
width: 44px; }
.livingstyleguide--color-swatch.-lsg-empty {
overflow: hidden;
text-align: left;
text-indent: -119988px; }
.livingstyleguide--color-swatch.-lsg-empty:before, .livingstyleguide--color-swatch.-lsg-empty:after {
display: none; }
.\$livingstyleguide--layout-selector:after {
content: "body"; }
.\$livingstyleguide--base-font:after {
content: '"Georgia", "Times New Roman", serif'; }
.\$livingstyleguide--base-font-size:after {
content: "14px"; }
.\$livingstyleguide--base-font-weight:after {
content: "normal"; }
.\$livingstyleguide--base-line-height:after {
content: "1.4"; }
.\$livingstyleguide--base-text-align:after {
content: "left"; }
.\$livingstyleguide--page-title-font-size:after {
content: "30px"; }
.\$livingstyleguide--headline-font:after {
content: '"Georgia", "Times New Roman", serif'; }
.\$livingstyleguide--headline-font-size:after {
content: "22px"; }
.\$livingstyleguide--headline-text-align:after {
content: "left"; }
.\$livingstyleguide--sub-headline-font-size:after {
content: "16px"; }
.\$livingstyleguide--sub-sub-headline-font-size:after {
content: "14px"; }
.\$livingstyleguide--headline-font-weight:after {
content: "bold"; }
.\$livingstyleguide--headline-line-height:after {
content: "1.1"; }
.\$livingstyleguide--code-font:after {
content: 'Courier, "Courier New", monospace'; }
.\$livingstyleguide--code-font-size:after {
content: "12px"; }
.\$livingstyleguide--code-font-weight:after {
content: "normal"; }
.\$livingstyleguide--code-line-height:after {
content: "1.5"; }
.\$livingstyleguide--background-color:before {
background: #f7f7f7; }
.\$livingstyleguide--background-color:after {
content: "#f7f7f7"; }
.\$livingstyleguide--border-width:after {
content: "1px"; }
.\$livingstyleguide--border-color:before {
background: silver; }
.\$livingstyleguide--border-color:after {
content: "silver"; }
.\$livingstyleguide--border-radius:after {
content: "0"; }
.\$livingstyleguide--color:before {
background: #505050; }
.\$livingstyleguide--color:after {
content: "#505050"; }
.\$livingstyleguide--width:after {
content: "640px"; }
.\$livingstyleguide--gap-width:after {
content: "10px"; }
.\$livingstyleguide--full-width-padding:after {
content: "10px"; }
.\$livingstyleguide--code-background-color:before {
background: #dddddd; }
.\$livingstyleguide--code-background-color:after {
content: "#dddddd"; }
.\$livingstyleguide--code-color:before {
background: #505050; }
.\$livingstyleguide--code-color:after {
content: "#505050"; }
.\$livingstyleguide--code-border-width:after {
content: "1px"; }
.\$livingstyleguide--code-border-color:before {
background: silver; }
.\$livingstyleguide--code-border-color:after {
content: "silver"; }
.\$livingstyleguide--code-border-radius:after {
content: "0"; }
.\$livingstyleguide--color-swatch-color {
color: #f7f7f7; }
.\$livingstyleguide--color-swatch-color:before {
background: black; }
.\$livingstyleguide--color-swatch-color:after {
content: "black"; }
.\$livingstyleguide--color-swatch-border-width:after {
content: "4px"; }
.\$livingstyleguide--color-swatch-border-color {
color: #f7f7f7; }
.\$livingstyleguide--color-swatch-border-color:before {
background: rgba(0, 0, 0, 0.05); }
.\$livingstyleguide--color-swatch-border-color:after {
content: "rgba(0, 0, 0, 0.05)"; }
.\$livingstyleguide--color-swatch-border-radius:after {
content: "50%"; }
.\$livingstyleguide--color-swatches-per-line:after {
content: "2"; }
.\$livingstyleguide--highlight-color:before {
background: #f6ffa3; }
.\$livingstyleguide--highlight-color:after {
content: "#f6ffa3"; }
.\$livingstyleguide--highlight-border-radius:after {
content: "2px"; }
</style>
</head>
<body class="livingstyleguide">
<h1 class="livingstyleguide--page-title">Living Style Guide</h1>
<div class="livingstyleguide--container">
<h2 class="livingstyleguide--headline" id="buttons"><a class="livingstyleguide--anchor" href="#buttons"></a>Buttons</h2>
<div class="livingstyleguide--example">
<button class="button">Example button</button>
</div>
<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><b><<em>button</em></b> <b>class</b>="button"<b>></b>Example button<b></<em>button</em>></b></code></pre><div class="livingstyleguide--example">
<button class="button-primary">Example button</button>
</div>
<pre class="livingstyleguide--code-block"><code class="livingstyleguide--code"><b><<em>button</em></b> <b>class</b>="button-primary"<b>></b>Example button<b></<em>button</em>></b></code></pre>
</div>
<div class="livingstyleguide--footer"><a class="livingstyleguide--logo" href="http://livingstyleguide.org">Made with the LivingStyleGuide gem.</a></div>
</body>
</html>