Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add a builder with twig support #6

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add a builder with twig support #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 67 additions & 0 deletions kss_styleguide/twig/builder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
'use strict';

/**
* This module is used to load the base KSS builder class needed by this builder
* and to define any custom CLI options or extend any base class methods.
*
* Note: since this builder wants to extend the KssBuilderBaseTwig class, it
* must export a KssBuilderBaseTwig sub-class as a module. Otherwise, kss-node
* will assume the builder wants to use the KssBuilderBaseHandlebars class.
*
* This file's name should follow standard node.js require() conventions. It
* should either be named index.js or have its name set in the "main" property
* of the builder's package.json. See
* http://nodejs.org/api/modules.html#modules_folders_as_modules
*
* @module kss/builder/twig
*/

const path = require('path');


// We want to extend kss-node's Twig builder so we can add options that
// are used in our templates.
let KssBuilderBaseTwig;

try {
// In order for a builder to be "kss clone"-able, it must use the
// require('kss/builder/path') syntax.
KssBuilderBaseTwig = require('kss/builder/base/twig');
} catch (e) {
// The above require() line will always work.
//
// Unless you are one of the developers of kss-node and are using a git clone
// of kss-node where this code will not be inside a "node_modules/kss" folder
// which would allow node.js to find it with require('kss/anything'), forcing
// you to write a long-winded comment and catch the error and try again using
// a relative path.
KssBuilderBaseTwig = require('../base/twig');
}

/**
* A kss-node builder that takes input files and builds a style guide using Twig
* templates.
*/
class KssBuilderTwig extends KssBuilderBaseTwig {
/**
* Create a builder object.
*/
constructor() {
// First call the constructor of KssBuilderBaseTwig.
super();

// Then tell kss which Yargs-like options this builder adds.
this.addOptionDefinitions({
title: {
group: 'Style guide:',
string: true,
multiple: false,
describe: 'Title of the style guide',
default: 'KSS Style Guide'
}
});
}

}

module.exports = KssBuilderTwig;
164 changes: 164 additions & 0 deletions kss_styleguide/twig/index.twig
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<title>{{ options.title }}</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="generator" content="kss-node">

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,300">
<link rel="stylesheet" href="kss-assets/vendor/prism.css">
<link rel="stylesheet" href="kss-assets/css/kss.css">
{{ styles|raw }}
</head>

<body class="kss-body">



<!-- header. -->
<header class="kss-header">
<section class="kss-header__inner">
<a class="kss-header__hamburger-trigger">
<div class="kss-header__hamburger"></div>
</a>
<h1 class="kss-header__title kss-title">{{options.title}}</h1>
</section>
</header>
<!-- /header. -->



<!-- navigation. -->
<section class="kss-navigation">
<h1 class="kss-navigation__title kss-title">{{options.title}}</h1>
<ul class="kss-nav">
<li class="kss-nav__item">
<a href="index.html">
<span class="kss-nav__ref">0</span>
<span class="kss-nav__name">Introduction</span>
</a>
</li>
{% for menu_item in menu %}
<li class="kss-nav__item">
<a href="section-{{ menu_item.referenceURI }}.html">
<span class="kss-nav__ref">{{ menu_item.referenceNumber }}</span><span class="kss-nav__name">{{ menu_item.header }}</span>
</a>
{% if menu_item.isActive and menu_item.children is not empty %}
<ul class="kss-nav__subnav">
{% for menu_child in menu_item.children %}
<li class="kss-nav__item{% if menu_child.isGrandChild %} kss-nav__item--grandchild{% endif %}">
<a href="section-{{ menu_item.referenceURI }}.html#kssref-{{ menu_child.referenceURI }}">
<span class="kss-nav__ref {% if menu_child.isGrandChild %}kss-nav__ref-child{% endif %}">{{ menu_child.referenceNumber }}</span
><span class="kss-nav__name">{{ menu_child.header }}</span>
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</section>
<!-- /navigation. -->



<!-- documentation. -->
<section class="kss-documentation">
{% if template.isHomepage %}
{% if homepage %}
<article class="kss-markdown">
{{ homepage|raw }}
</article>
{% endif %}
{% else %}
{#
Display each section, in order.
The "root" element comes first in this loop, and can be detected using the
"loop.first" variable as seen below.
#}
{% for section in sections %}
{% set sectionElement = loop.first ? 'div' : 'section' %}
<{{ sectionElement }} id="kssref-{{ section.referenceURI }}" class="kss-section kss-section--depth-{{ section.depth }}">
<article class="kss-section__content">

<a class="kss-section__permalink" href="#kssref-{{ section.referenceURI }}"><h{{ section.depth }} class="kss-section__item kss-section__item--depth-{{ section.depth }}">
<span class="kss-section__ref">{{ section.referenceNumber }}</span>
<span class="kss-section__name">{{ section.header }}</span>
</h{{ section.depth }}></a>

{% if section.description %}
<div class="kss-section__description">
{{ section.description|raw }}
</div>
{% endif %}

{% for parameter in section.parameters %}
{% if loop.first %}
<div class="kss-parameters__title">Parameters:</div>
<ul class="kss-parameters">
{% endif %}
<li class="kss-parameters__item">
<p class="kss-parameters__description">
{{ parameter.description|raw }}

{% if parameter.defaultValue %}
Defaults to: <code>{{ defaultValue }}</code>
{% endif %}
</p>
<code>{{ parameter.name }}</code>
</li>
{% if loop.last %}
</ul>
{% endif %}
{% endfor %}

</article>

{% if section.example %}
<article class="kss-section__modifiers">
<h1 class="kss-modifiers__heading">Example{% if section.modifiers is not empty %}s{% endif %}</h1>

{% if section.modifiers is not empty %}
<h2 class="kss-modifier__name">Default styling</h2>
{% endif %}

<div class="kss-modifier__example">
{{ section.example|raw }}
</div>

{% for modifier in section.modifiers %}
<h2 class="kss-modifier__name">{{ modifier.name }}</h2>
<p class="kss-modifier__description">{{ modifier.description|raw }}</p>
<div class="kss-modifier__example">{{ modifier.markup|raw }}</div>
{% endfor %}

</article>

{% if section.example %}
<article class="kss-section__markup">
<pre><code class="language-markup">{{ section.markup }}</code></pre>
</article>
{% endif %}

{% endif %}

</{{ sectionElement }}>
{% endfor %}
{% endif %}
</section>
<!-- /documentation. -->



<!-- scripts. -->
<script src="kss-assets/vendor/jquery.js"></script>
<script src="kss-assets/vendor/prism.js"></script>
<script src="kss-assets/js/kss.js"></script>
{{ scripts|raw }}
<!-- /scripts. -->

<!-- Automatically built using <a href="https://github.com/kss-node/kss-node">kss-node</a>. -->
</body>
</html>
5 changes: 5 additions & 0 deletions kss_styleguide/twig/kss-assets/css/kss-body.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.kss-body {
margin: 0;
padding: 0;
background: $white;
}
53 changes: 53 additions & 0 deletions kss_styleguide/twig/kss-assets/css/kss-colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
.kss-colors-container {
margin: 0;
padding-left: 0;

@include mq(min, 568px) { margin-left: -10px; }
}

.kss-color {
position: relative;
display: block;
box-sizing: border-box;
width: 100%;
height: 127px;
margin: 0 auto;
margin-top: 10px;
border: 1px solid $gray;
border-radius: 2px;

@include mq(min, 568px) {
display: inline-block;
width: 225px;
margin-left: 10px;
}
}

.kss-color .kss-parameters__description {
position: absolute;
bottom: 0;
left: 0;
display: block;
box-sizing: border-box;
width: 100%;
padding: 5px;
background: $white;
}

.kss-color__name {
display: block;
min-height: 22px;
font-weight: 700;
font-size: em(14px);
line-height: 1.6;
}

.kss-color__var,
.kss-color__code {
display: block;
font-size: em(12px);
line-height: 1.4;
}

.kss-color .kss-parameters__name { display: none; }

Loading