Last active
August 29, 2015 14:22
-
-
Save koddsson/746613d0313fb4d5b1e0 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var gulp = require('gulp'); | |
| gulp.task('default', function () { | |
| var postcss = require('gulp-postcss'); | |
| return gulp.src('index.css') | |
| .pipe(postcss([ | |
| require('postcss-style-guide')(), | |
| require('cssnext')() | |
| ])) | |
| .pipe(gulp.dest('build/')); | |
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| # Button | |
| My awesome button component. | |
| <button class="Button">Ok</button> | |
| <button class="Button">Ok</button> | |
| */ | |
| :root { | |
| --buttonColor: rebeccapurple; | |
| --textColor: white; | |
| } | |
| .Button { | |
| background-color: var(--buttonColor); | |
| color: var(--textColor); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "postcss-styleguide-extracss", | |
| "version": "1.0.0", | |
| "description": "", | |
| "main": "gulpfile.js", | |
| "scripts": { | |
| "test": "echo \"Error: no test specified\" && exit 1" | |
| }, | |
| "author": "", | |
| "license": "ISC", | |
| "dependencies": { | |
| "cssnext": "^1.6.0", | |
| "gulp": "^3.9.0", | |
| "gulp-postcss": "^5.1.8", | |
| "postcss-style-guide": "^0.3.0" | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Style Guide</title> | |
| <link rel="stylesheet" href="./default.css"> | |
| <style>.hljs{display:block;overflow-x:auto;padding:.5em;color:#333;background:#f8f8f8;-webkit-text-size-adjust:none}.diff .hljs-header,.hljs-comment{color:#998;font-style:italic}.css .rule .hljs-keyword,.hljs-keyword,.hljs-request,.hljs-status,.hljs-subst,.hljs-winutils,.nginx .hljs-title{color:#333;font-weight:700}.hljs-hexcolor,.hljs-number,.ruby .hljs-constant{color:teal}.hljs-doctag,.hljs-string,.hljs-tag .hljs-value,.tex .hljs-formula{color:#d14}.hljs-id,.hljs-title,.scss .hljs-preprocessor{color:#900;font-weight:700}.hljs-list .hljs-keyword,.hljs-subst{font-weight:400}.hljs-class .hljs-title,.hljs-type,.tex .hljs-command,.vhdl .hljs-literal{color:#458;font-weight:700}.django .hljs-tag .hljs-keyword,.hljs-rule .hljs-property,.hljs-tag,.hljs-tag .hljs-title{color:navy;font-weight:400}.hljs-attribute,.hljs-name,.hljs-variable,.lisp .hljs-body{color:teal}.hljs-regexp{color:#009926}.clojure .hljs-keyword,.hljs-prompt,.hljs-symbol,.lisp .hljs-keyword,.ruby .hljs-symbol .hljs-string,.scheme .hljs-keyword,.tex .hljs-special{color:#990073}.hljs-built_in{color:#0086b3}.hljs-cdata,.hljs-doctype,.hljs-pi,.hljs-pragma,.hljs-preprocessor,.hljs-shebang{color:#999;font-weight:700}.hljs-deletion{background:#fdd}.hljs-addition{background:#dfd}.diff .hljs-change{background:#0086b3}.hljs-chunk{color:#aaa}html{font-size:20px}@media (max-width:48rem){html{font-size:18px}}body{margin:0;font-family:PT Sans,sans-serif;color:#5a5a5a}a{color:#08c;text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{margin:0 0 .5rem;font-weight:400;line-height:1;color:#2a2a2a;letter-spacing:-.05em}h1{font-size:1.8rem}h2{font-size:1.5rem}h3{font-size:1.2rem}h4{font-size:1rem}p{margin:0 0 1rem}.lead{font-size:1.3rem}blockquote{position:relative;margin:0 1rem 1rem;font-style:italic;color:#7a7a7a}blockquote p{margin-bottom:0}ul li{margin-bottom:.25rem}blockquote:last-child,p:last-child,ul:last-child{margin-bottom:0}code,pre{font-family:PT Mono,Menlo,Courier New,monospace;font-size:95%}code{padding:2px 4px;font-size:85%;color:#d44950;background-color:#f7f7f9;border-radius:.2rem}pre{display:block;margin:1rem 0;line-height:1.4;white-space:pre;white-space:pre-wrap}pre.code{margin-top:0}pre code{padding:0;color:inherit;background-color:transparent;border:0}.col{padding:2rem 1rem}.col p{max-width:40rem}.col+.col{border-top:1px solid #dfe1e8;background-color:#f7f7f9}@media (min-width:38em){.col{padding:2rem}}@media (min-width:48em){.section{display:table;width:100%;table-layout:fixed}.col{display:table-cell;padding:3rem;vertical-align:top}.col+.col{border-top:0}}.toc .col+.col{background-color:#fff}.masthead{padding:3rem 1rem;color:hsla(0,0%,100%,.5);text-align:center;background-color:#333}.masthead h1{color:#fff;margin-bottom:.25rem;font-size:2.5rem}.masthead .icon{display:inline-block;font-size:3rem;margin:0 .5rem}.masthead-links{font-size:2rem}.masthead-links a{color:hsla(0,0%,100%,.5);text-decoration:none;transition:all .15s linear}.masthead-links a:hover{color:#fff}@media (min-width:38em){.masthead{padding-top:4rem;padding-bottom:4rem}}.heading{padding:2rem 1rem 1.5rem;background-color:#dfe1e8}@media (min-width:38em){.heading{padding:3rem 3rem 2.5rem}}.section{border-bottom:1px solid #dfe1e8}:root{--buttonColor:#639;--textColor:#fff}.Button{background-color:var(--buttonColor);color:var(--textColor)}</style> | |
| </head> | |
| <body> | |
| <header class="masthead"> | |
| <h1>Style Guide</h1> | |
| <p class="lead">Generated by <a href="https://github.com/morishitter/postcss-style-guide">postcss-style-guide</a></p> | |
| </header> | |
| <div class="section"> | |
| <div class="col"><h1 id="button">Button</h1> | |
| <p>My awesome button component.</p> | |
| <button class="Button">Ok</button> | |
| <pre><code><span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"Button"</span>></span>Ok<span class="hljs-tag"></<span class="hljs-title">button</span>></span> | |
| </code></pre></div> | |
| <div class="col"><pre class="code"><code class="lang-css"><span class="hljs-pseudo">:root</span> <span class="hljs-rules">{ | |
| <span class="hljs-rule"><span class="hljs-attribute">--buttonColor</span>:<span class="hljs-value"> rebeccapurple</span></span>; | |
| <span class="hljs-rule"><span class="hljs-attribute">--textColor</span>:<span class="hljs-value"> white</span></span>; | |
| }</span> | |
| <span class="hljs-class">.Button</span> <span class="hljs-rules">{ | |
| <span class="hljs-rule"><span class="hljs-attribute">background-color</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--buttonColor)</span></span>; | |
| <span class="hljs-rule"><span class="hljs-attribute">color</span>:<span class="hljs-value"> <span class="hljs-function">var</span>(--textColor)</span></span>; | |
| }</span></code></pre></div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment