Skip to content

Instantly share code, notes, and snippets.

View sgComponent.hbs
<div class="sg-component mobile-one-whole omega">
<div class="sg-component__header mobile-one-whole omega">
<h2 class="title--xxsmall mobile-two-thirds">{{title}}</h2>
<p class="mobile-one-third mobile-pull-right mobile-text-right">
<span class="status-dot status-dot status-dot--{{#compare status "==" "Approved"}}green{{else}}{{#compare status "==" "In progress"}}yellow{{else}}blue{{/compare}}{{/compare}}">{{status}}</span>
</p>
</div>
<!-- Markup -->
<div class="sg-component__markup mobile-one-whole omega">
{{> sgComponentContent}}
View sgComponent.js
'use strict';
// Node.js modules
var path = require('path');
// node_modules
var grunt = require('grunt'),
glob = require('globule'),
yfm = require('assemble-yaml'),
_ = require('lodash');
View headings.hbs
---
title: Headings
status: In progress
tabs:
- tab: html
- tab: css
- tab: js
- tab: description
- tab: links
jsDoc: filename.md
View Gruntfile.js
assemble: {
options: {
helpers: [
'<%= yeoman.app %>/src/templates/styleguide/handlebarshelpers/sgComponent.js'
],
jsDoc: '<%= yeoman.app %>/src/templates/styleguide/documentation',
sgComponent: {
cwd: '<%= yeoman.app %>/src/templates/styleguide/layouts',
src: '<%= yeoman.app %>/src/templates/partials',
}
View sgComponent helper
{{{sgComponent "sgcomponent.hbs" "atoms/text/headings.hbs"}}}