V0.1.0

JordyPouw · May 30, 2016 · 934293e · 934293e
1 parent 71c2114
commit 934293e
Show file tree

Hide file tree

Showing 37 changed files with 1,346 additions and 1 deletion.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,26 @@
+# Logs. #
+######################
+*.log
+*.sass-cache
+
+
+# OS generated files. #
+######################
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+
+# Build tools. #
+######################
+node_modules
+bower_components
+
+
+# Compiled files #
+######################
+kss_styleguide/styleguide
diff --git a/README.md b/README.md
@@ -1 +1,6 @@
-# michelangelo
+# Michelangelo Styleguide
+A custom template for the kss-node living style guide. Check out [their Github page](https://github.com/kss-node/kss-node) for more information about how kss-node works.
+
+## Quick start guide
+- npm install
+- gulp
diff --git a/gulp_tasks/config.js b/gulp_tasks/config.js
@@ -0,0 +1,11 @@
+module.exports = function(gulp){
+
+  'use strict';
+
+
+  return {
+    plugins: require('gulp-load-plugins')()
+  };
+
+
+};
diff --git a/gulp_tasks/kss.js b/gulp_tasks/kss.js
@@ -0,0 +1,25 @@
+module.exports = function (gulp) {
+
+  'use strict';
+
+
+  var config = require('./config')();
+
+  // if OS is Mac.
+  if (process.platform === 'darwin') { var open = 'open'; }
+
+  // if OS is Linux.
+  else if (process.platform === 'linux') { var open = 'xdg-open'; }
+
+  // if OS is Windows.
+  else if (process.platform === 'win32') { var open = 'start'; }
+
+  gulp.task('kss', config.plugins.shell.task([
+
+    'kss-node --config kss-config.json',
+    open + ' kss_styleguide/styleguide/index.html'
+
+  ]));
+
+
+};
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,15 @@
+// require gulp.
+var gulp = require('gulp');
+
+// task for development.
+gulp.task('default', function () {
+  gulp.start('kss');
+});
+
+// utility function that gets task modules.
+function task (task) {
+  return require('./gulp_tasks/' + task)(gulp);
+}
+
+// task module.
+task('kss');
diff --git a/kss-config.json b/kss-config.json
@@ -0,0 +1,21 @@
+{
+
+
+  "title"       : "Michelangelo Styleguide",
+  "mask"        : "*.scss",
+  "placeholder" : "[modifier]",
+
+
+"//": "relative to this file.",
+  "homepage"     : "kss-styleguide.md",
+  "template"     : "kss_styleguide/custom-template/",
+  "source"       : "src/",
+  "destination"  : "kss_styleguide/styleguide/",
+
+
+"//": "relative to the generated style guide.",
+  "css": [],
+  "js" : []
+
+
+}
diff --git a/kss_styleguide/custom-template/index.html b/kss_styleguide/custom-template/index.html
@@ -0,0 +1,178 @@
+<!DOCTYPE html>
+<html class="kss__html">
+  <head>
+    <title>{{options.title}}</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="generator" content="kss-node">
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
+    <link rel="stylesheet" href="public/vendor/prism.css">
+    <link rel="stylesheet" href="public/css/kss.css">
+    {{{styles}}}
+  </head>
+
+  <body class="kss__body">
+    <section class="kss">
+
+      <!-- Header -->
+      <header class="kss-header">
+        <section class="kss-header-inner">
+          <div class="kss-hamburger-icon-trigger">
+            <div class="kss-hamburger-icon"></div>
+          </div>
+          <h1 class="kss-doc-title">{{options.title}}</h1>
+        </section>
+      </header>
+
+      <!-- Navigation. -->
+      <section class="kss-navigation">
+        <header class="kss-side-header">
+          <h1 class="kss-side-doc-title">{{options.title}}</h1>
+        </header>
+        <nav class="kss-nav">
+          <ul class="kss-nav__menu">
+            <li class="kss-nav__menu-item">
+              <a href="index.html">
+                <span class="kss-nav__ref">0</span>
+                <span class="kss-nav__name">Introduction</span>
+              </a>
+            </li>
+            {{#eachRoot}}
+              <li class="kss-nav__menu-item">
+                <a href="section-{{referenceURI}}.html">
+                  <span class="kss-nav__ref">{{#ifNumeric reference}}{{reference}}{{else}}{{autoincrement}}{{/ifNumeric}}</span>
+                  <span class="kss-nav__name">{{header}}</span>
+                </a>
+                {{#ifReference ../rootName}}
+                  <ul class="kss-nav__menu-child">
+                  {{#eachSection reference}}
+                    {{#ifDepth 2 ../../../options.[nav-depth]}}
+                      <li class="kss-nav__menu-item">
+                        <a href="section-{{../../referenceURI}}.html#kssref-{{referenceURI}}">
+                          <span class="kss-nav__ref {{#ifDepth 3 100}}kss-nav__ref-child{{/ifDepth}}">{{#ifNumeric reference}}{{reference}}{{else}}{{autoincrement}}{{/ifNumeric}}</span
+                          ><span class="kss-nav__name">{{header}}</span>
+                        </a>
+                      </li>
+                    {{/ifDepth}}
+                  {{/eachSection}}
+                  </ul>
+                {{/ifReference}}
+              </li>
+            {{/eachRoot}}
+          </ul>
+        </nav>
+      </section>
+
+
+      <!-- Documentation. -->
+      <section class="kss-documentation">
+      {{#if homepage}}
+        <article class="kss-section kss-section--depth-0">
+          {{{homepage}}}
+        </article>
+      {{else}}
+
+        <!-- Display each section, in order.
+          The "root" element comes first in this loop, and can be detected using
+          the "#ifDepth 1" block as seen below.
+        -->
+        {{#eachSection rootName}}
+          {{#ifDepth 1}}
+            <header class="kss-section kss-section--depth-{{depth}}" id="kssref-{{referenceURI}}">
+          {{else}}
+            <section class="kss-section kss-section--depth-{{depth}}" id="kssref-{{referenceURI}}">
+          {{/ifDepth}}
+
+            <article class="kss-intro">
+              <h{{depth}} class="kss-title kss-title--depth-{{depth}}">
+                <a class="kss-title__permalink" href="#kssref-{{referenceURI}}">
+                  <span class="kss-title__ref">
+                    {{#ifNumeric reference}}
+                      {{reference}}
+                    {{else}}
+                      {{autoincrement}}
+                    {{/ifNumeric}}
+                    <span class="kss-title__permalink-hash">
+                      {{#ifNumeric reference}}
+                        #permalink
+                      {{else}}
+                        #{{reference}}
+                      {{/ifNumeric}}
+                    </span>
+                  </span>
+                  {{header}}
+                </a>
+              </h{{depth}}>
+
+              {{#if parameters}}
+                <ul class="kss-parameters">
+                {{#eachParameter}}
+                  <li class="kss-parameters__item">
+                    <code class="kss-parameters__name">{{name}}</code>
+                    <div class="kss-parameters__description">{{{description}}}</div>
+                  </li>
+                {{/eachParameter}}
+                </ul>
+              {{/if}}
+
+              {{#if description}}
+                <div class="kss-description">
+                  {{{description}}}
+                </div>
+              {{/if}}
+            </article>
+
+            {{#if markup}}
+              <article class="kss-modifier__wrapper">
+                <div class="kss-modifier__heading">
+                  Example{{#if modifiers}}s{{/if}}
+                </div>
+
+                {{#if modifiers}}
+                  <div class="kss-modifier__default-name">
+                    Default styling
+                  </div>
+                {{/if}}
+
+                <div class="kss-modifier__example">
+                  {{{markup}}}
+                </div>
+
+                {{#eachModifier}}
+                  <div class="kss-modifier__name">
+                    {{name}}
+                  </div>
+                  <div class="kss-modifier__description">
+                    {{{description}}}
+                  </div>
+                  <div class="kss-modifier__example">
+                    {{{markup}}}
+                  </div>
+                {{/eachModifier}}
+              </article>
+
+              <article class="kss-markup">
+                <pre><code class="language-markup">{{markup}}</code></pre>
+              </article>
+            {{/if}}
+
+          {{#ifDepth 1}}
+            </header>
+          {{else}}
+            </section>
+          {{/ifDepth}}
+        {{/eachSection}}
+      {{/if}}
+      </section>
+    </section>
+
+
+    <!-- Scripts. -->
+    <script src="public/vendor/jquery.js"></script>
+    <script src="public/vendor/prism.js"></script>
+    <script src="public/js/kss.js"></script>
+    {{{scripts}}}
+  </body>
+</html>
diff --git a/kss_styleguide/custom-template/package.json b/kss_styleguide/custom-template/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "kss-node-handlebars-template",
+  "version": "2.1.0",
+  "description": "The default template for kss-node.",
+  "main": "template_config.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "less": "./node_modules/.bin/lessc --verbose --compress public/kss.less public/kss.css"
+  },
+  "devDependencies": {
+    "less": "^2.1.1"
+  }
+}
diff --git a/kss_styleguide/custom-template/public/css/_base.scss b/kss_styleguide/custom-template/public/css/_base.scss
@@ -0,0 +1,4 @@
+body {
+  margin: 0;
+  padding: 0;
+}
diff --git a/kss_styleguide/custom-template/public/css/_box-sizing.scss b/kss_styleguide/custom-template/public/css/_box-sizing.scss
@@ -0,0 +1,5 @@
+*,
+*:before,
+*:after { 
+  box-sizing: border-box;
+}