├── .bowerrc
├── .gitignore
├── LICENSE
├── README.md
├── bower.json
├── data
    └── modifier.yaml
├── gulpfile.js
├── package.json
├── site.yaml
├── site
    ├── css
    │   └── src
    │   │   ├── assembler
    │   │       ├── _atomic-globals.scss
    │   │       ├── _atomic-swatch.scss
    │   │       ├── _index.scss
    │   │       └── _prism.scss
    │   │   └── style.scss
    ├── js
    │   ├── lib
    │   │   └── prism.js
    │   └── src
    │   │   ├── atomic-generator.js
    │   │   ├── atomic-swatch.js
    │   │   └── scrollmation.js
    └── templates
    │   ├── includes
    │       ├── assembler
    │       │   ├── footer.hbs
    │       │   ├── logo.hbs
    │       │   ├── nav.hbs
    │       │   └── swatches.hbs
    │       └── atoms
    │       │   ├── anchors.hbs
    │       │   ├── default-button.hbs
    │       │   ├── email-input.hbs
    │       │   ├── headings.hbs
    │       │   ├── paragraphs.hbs
    │       │   ├── password-input.hbs
    │       │   ├── radio-input.hbs
    │       │   ├── search.hbs
    │       │   ├── select-input.hbs
    │       │   ├── submit-button.hbs
    │       │   ├── tel-input.hbs
    │       │   ├── text-input.hbs
    │       │   ├── type.hbs
    │       │   └── unordered-list.hbs
    │   ├── layouts
    │       └── default.hbs
    │   └── pages
    │       └── index.hbs
└── webhook.php


/.bowerrc:
--------------------------------------------------------------------------------
1 | {
2 |   "directory" : "site/bower_components"
3 | }


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # temp dirs
 2 | .sass-cache
 3 | # dotfiles
 4 | *.log
 5 | .publish/
 6 | .DS_Store
 7 | #dirs
 8 | node_modules/
 9 | site/bower_components
10 | lib/*
11 | dist/*
12 | site/client
13 | site/css/**/*.css
14 | #files
15 | site/*.html
16 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Dennis Gaebel
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://s3-us-west-2.amazonaws.com/s.cdpn.io/392/atomic-logo.svg)
  2 | 
  3 | ## Under The Hood
  4 | 
  5 |  - Templates : Assemble
  6 |  - Styles : Sass (LibSass Port)
  7 |  - Task Manager : Gulp
  8 |  - Pkg Mgr: NPM & Bower
  9 | 
 10 | ## Installation
 11 | 
 12 | Installation instructions assume you have gulp and node w/npm installed globally in your system. You could also use `npm start` if you desire as the `package.json` file of this project supports that command.
 13 | 
 14 | ```javascript
 15 | $ npm install && bower install
 16 | ```
 17 | 
 18 | ## Development
 19 | 
 20 | Start Development
 21 | 
 22 | ```javascript
 23 | $ gulp
 24 | ```
 25 | 
 26 | Build
 27 | 
 28 | ```javascript
 29 | $ gulp build
 30 | ```
 31 | 
 32 | Preview Build
 33 | 
 34 | ```javascript
 35 | $ gulp preview
 36 | ```
 37 | 
 38 | Clean Environment
 39 | 
 40 | ```javascript
 41 | $ gulp clean
 42 | ```
 43 | 
 44 | ## Naming Convention
 45 | 
 46 | Everything is name spaced and separated by a hyphen. BEM is the style of choice. We suggest using [Sass Guidelines](http://sass-guidelin.es/) for documenting your Sass code to keep consistency across teams.
 47 | 
 48 | ```css
 49 | ns-component
 50 | ns-component--modifier
 51 | ns-component__child--modifier
 52 | ```
 53 | 
 54 | ## Theming
 55 | 
 56 | If you want to have variations on an input for example and keep things DRY then you can do the following…
 57 | 
 58 | 1. Create a ``modifier.yaml`` file and place it inside your ``data`` directory.
 59 | 2. Add data.
 60 | 
 61 |   ``data/modifier.yaml``
 62 | 
 63 |   ```
 64 |   a:
 65 |     version: a
 66 |     modifierclass: active
 67 |     state: checked
 68 |   b:
 69 |     version: b
 70 |     modifierclass: hidden
 71 |   ```
 72 | 
 73 | 3. Setup your partial
 74 | 
 75 |   ``includes/atoms/radio-input.hbs``
 76 | 
 77 |   ```
 78 |   <label for="radio{{version}}" class="control radio {{modifierclass}}">
 79 |     <input type="radio" id="radio{{version}}" name="radio" value="radio{{version}}" {{state}}>
 80 |     <span class="control__indicator"></span> Radio Input
 81 |   </label>
 82 |   ```
 83 | 
 84 | 4. Make the call from your template file of choice like so…
 85 | 
 86 |   ``templates/pages/index.hbs``
 87 | 
 88 |   ```
 89 |   {{> radio-input radio}}
 90 |   {{> radio-input radio.a}}
 91 |   {{> radio-input radio.b}}
 92 |   ```
 93 | 
 94 | ## Conditions
 95 | 
 96 | Control scripts, styles or anything desired from appearing in your templates. A few examples are:
 97 | 
 98 | ```
 99 | {{#any 'index single case' this.basename}}
100 | {{/any}}
101 | ```
102 | 
103 | ```
104 | {{#is 'index' this.basename}}
105 | {{/is}}
106 | ```
107 | 
108 | ```
109 | {{#if 'single' this.basename}}
110 | {{/if}}
111 | ```
112 | 
113 | For further reading on conditionals see the [Handlebars](http://handlebarsjs.com/block_helpers.html) documentation.
114 | 
115 | ## Environment Control
116 | 
117 | This project takes advantage of the environment flag used by Assemble.
118 | 
119 | ```
120 | var env_flag = false;
121 | assemble.option('production', env_flag);
122 | ```
123 | **`gulpfile.js`**
124 | 
125 | The if statement that follows will produce true if the boolean for the environment variable above is set to true. Great for keeping out things like analytics and such.
126 | 
127 | ```
128 | {{#if production}}
129 | {{/if}}
130 | ```
131 | **`template.hbs`**
132 | 
133 | ## What Else?
134 | 
135 | ### Code Blocks
136 | 
137 | Here's an example from your assemble template to import a partial called headings that's also called within the associated code block. The class name on the `pre` tag tells Prism this is a block we would like [Prism](http://prismjs.com) to style using html grammar.
138 | 
139 | ```markup
140 | {{> headings}}
141 | <pre class="language-html"><code>{{> headings}}</code></pre>
142 | ```
143 | 
144 | Here's an example using a JavaScript snippet.
145 | 
146 | ```markup
147 | {{> button}}
148 | <pre class="language-javascript"><code></code></pre>
149 | ```
150 | 
151 | The partial with the required JavaScript sets up the pre block to accept the JavaScript it will be injected with. The required JavaScript is included in your layout of choice and it's `script` tag is given a class of `atomic-js`.
152 | 
153 | ```javascript
154 | <script class="atomic-js">var button = document.querySelector('button');
155 | button.addEventListener('click', function() {
156 | console.log('hello world');
157 | })</script>
158 | ```
159 | 
160 | In the future we hope to remove the need to write this kind of block within the markup and use something like file reading with Node.
161 | 
162 | ## Credits
163 | 
164 | Logo by [Cole Townsend](http://coletownsend.com). ©2015 and beyond.
165 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "atomic-guide",
 3 |   "version": "1.1.0",
 4 |   "authors": [
 5 |     "grayghostvisuals <grayghost@grayghostvisuals.com>"
 6 |   ],
 7 |   "license": "MIT",
 8 |   "private": false,
 9 |   "ignore": [
10 |     "**/.*",
11 |     "node_modules",
12 |     "bower_components",
13 |     "test",
14 |     "tests"
15 |   ],
16 |   "devDependencies": {
17 |     "normalize-scss": "~3.0.3"
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/data/modifier.yaml:
--------------------------------------------------------------------------------
1 | a:
2 |   version: a
3 |   modifierclass: active
4 |   state: checked
5 | b:
6 |   version: b
7 |   modifierclass: hidden


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
  1 | // ===================================================
  2 | // Settin'
  3 | // ===================================================
  4 | 
  5 | var gulp            = require('gulp'),
  6 |     gulpLoadPlugins = require('gulp-load-plugins'),
  7 |     $               = gulpLoadPlugins({
  8 |                         rename: {
  9 |                           'gulp-minify-css'  : 'mincss',
 10 |                           'gulp-minify-html' : 'minhtml',
 11 |                           'gulp-gh-pages'    : 'ghPages',
 12 |                           'gulp-foreach'     : 'foreach',
 13 |                           'gulp-mocha'       : 'mocha',
 14 |                           'gulp-if'          : 'if'
 15 |                         }
 16 |                       }),
 17 |     assemble        = require('assemble'),
 18 |     del             = require('del'),
 19 |     merge           = require('merge-stream'),
 20 |     basename        = require('path').basename,
 21 |     extname         = require('path').extname;
 22 | 
 23 | $.exec   = require('child_process').exec;
 24 | $.fs     = require('fs');
 25 | 
 26 | 
 27 | // ===================================================
 28 | // Configin'
 29 | // ===================================================
 30 | 
 31 | var env_flag = false;
 32 | 
 33 | var asset_dir = {
 34 |   site: 'site',
 35 |   templates : 'templates',
 36 |   data: 'data',
 37 |   dist: 'dist',
 38 |   js: 'js',
 39 |   css: 'css',
 40 |   sass: 'src'
 41 | };
 42 | 
 43 | var path = {
 44 |   site: asset_dir.site,
 45 |   data: asset_dir.data,
 46 |   templates: asset_dir.site + '/' + asset_dir.templates,
 47 |   dist: asset_dir.dist,
 48 |   js: asset_dir.site + '/' + asset_dir.js,
 49 |   css: asset_dir.site + '/' + asset_dir.css,
 50 |   sass: asset_dir.site + '/' + asset_dir.css + '/' + asset_dir.sass
 51 | };
 52 | 
 53 | var glob = {
 54 |   html: path.site + '/*.html',
 55 |   css: path.css + '/*.css',
 56 |   sass: path.sass + '/**/*.scss',
 57 |   js: path.js + '/src/**/*.js',
 58 |   jslibs : path.js + '/lib/**/*.js',
 59 |   layouts: path.templates + '/layouts/*.{md,hbs}',
 60 |   pages: path.templates + '/pages/**/*.{md,hbs}',
 61 |   includes: path.templates + '/includes/**/*.{md,hbs}',
 62 |   data: path.data + '/**/*.{json,yaml}',
 63 |   rootData: ['site.yaml', 'package.json']
 64 | };
 65 | 
 66 | 
 67 | // ===================================================
 68 | // Developin'
 69 | // ===================================================
 70 | 
 71 | gulp.task('serve', ['assemble'], function() {
 72 |   $.connect.server({
 73 |     root: [path.site],
 74 |     port: 5000,
 75 |     livereload: true,
 76 |     middleware: function(connect) {
 77 |       return [
 78 |         connect().use(connect.query())
 79 |       ];
 80 |     }
 81 |   });
 82 | 
 83 |   $.exec('open http://localhost:5000');
 84 | });
 85 | 
 86 | 
 87 | // ===================================================
 88 | // Previewin'
 89 | // ===================================================
 90 | 
 91 | gulp.task('preview', function() {
 92 |   $.connect.server({
 93 |     root: [path.dist],
 94 |     port: 5001
 95 |   });
 96 | 
 97 |   $.exec('open http://localhost:5001');
 98 | });
 99 | 
100 | 
101 | // ===================================================
102 | // Testin'
103 | // ===================================================
104 | 
105 | gulp.task('mocha', function () {
106 |   return gulp.src('test/*.js', {read: false})
107 |     .pipe($.mocha({ reporter: 'nyan' }));
108 | });
109 | 
110 | 
111 | // ===================================================
112 | // Stylin'
113 | // ===================================================
114 | 
115 | gulp.task('sass', function() {
116 |   var stream = gulp.src(glob.sass)
117 |     .pipe($.sass())
118 |     .pipe($.autoprefixer({
119 |       browsers: ['last 2 versions'],
120 |       cascade: false
121 |     }))
122 |     .pipe(gulp.dest(path.css))
123 |     .pipe($.connect.reload());
124 | 
125 |   return stream;
126 | });
127 | 
128 | 
129 | // ===================================================
130 | // Templatin'
131 | // ===================================================
132 | 
133 | // Pull #3. Also see https://github.com/assemble/assemble/issues/715
134 | // create a `categories` object to keep categories in (e.g. 'clients')
135 | // categories: {
136 | //  clients: {
137 | //    "polyon": { ... }
138 | //  }
139 | // };
140 | assemble.set('categories', {});
141 | 
142 | /**
143 |  Populate categories with pages that specify the categories they belong to.
144 |  When the onLoad middleware runs for a single file, it looks at the file's front-matter (file.data) to see if it contains a categories property. This property can be a string or an array of strings. If it exists, then the middleware updates the categories object for each category in the array. In the case of polyon.hbs, there is only 1 category called client, so the categories object becomes:
145 | 
146 | categories: {
147 |  clients: {
148 |    "polyon": { ... }
149 |  }
150 | };
151 |  */
152 | 
153 | assemble.onLoad(/\.hbs/, function(file, next) {
154 |   // if the file doesn't have a data object or
155 |   // doesn't contain `categories` in it's
156 |   // front-matter, move on.
157 |   if (!file.data || !file.data.categories) {
158 |     return next();
159 |   }
160 | 
161 |   // use the default `renameKey` function to store
162 |   // pages on the `categories` object
163 |   var renameKey = assemble.option('renameKey');
164 | 
165 |   // get the categories object
166 |   var categories = assemble.get('categories');
167 | 
168 |   // figure out which categories this file belongs to
169 |   var cats = file.data.categories;
170 |   cats = Array.isArray(cats) ? cats : [cats];
171 | 
172 |   // add this file's data (file object) to each of
173 |   // it's catogories
174 |   cats.forEach(function(cat) {
175 |     categories[cat] = categories[cat] || [];
176 |     categories[cat][renameKey(file.path)] = file;
177 |   });
178 | 
179 |   // done
180 |   next();
181 | });
182 | 
183 | 
184 | /**
185 |  * Handlebars helper to iterate over an object of pages for a specific category
186 |  *
187 |  * ```
188 |  * {{#category "clients"}}
189 |  *   <li>{{data.summary}}</li>
190 |  * {{/category}}
191 |  * ```
192 |  */
193 | 
194 | assemble.helper('category', function(category, options) {
195 |   var pages = this.app.get('categories.' + category);
196 |   if (!pages) {
197 |     return '';
198 |   }
199 |   return Object.keys(pages).map(function(page) {
200 |     // this renders the block between `{{#category}}` and `{{category}}` passing the
201 |     // entire page object as the context.
202 |     // If you only want to use the page's front-matter, then change this to something like
203 |     // return options.fn(pages[page].data);
204 |     return options.fn(pages[page]).toLowerCase();
205 |   }).join('\n');
206 | });
207 | 
208 | /**
209 |  * Load data onto assemble cache.
210 |  * This loads data from `glob.data` and `glob.rootData`.
211 |  * When loading `glob.rootData`, use a custom namespace function
212 |  * to return `pkg` for `package.json`.
213 |  *
214 |  * After all data is loaded, process the data to resolve templates
215 |  * in values.
216 |  * @doowb PR: https://github.com/grayghostvisuals/grayghostvisuals/pull/5
217 |  */
218 | 
219 | function loadData() {
220 |   assemble.data(glob.data);
221 |   assemble.data(assemble.plasma(glob.rootData, {namespace: function (fp) {
222 |     var name = basename(fp, extname(fp));
223 |     if (name === 'package') return 'pkg';
224 |     return name;
225 |   }}));
226 |   assemble.data(assemble.process(assemble.data()));
227 | }
228 | 
229 | // Placing assemble setups inside the task allows
230 | // live reloading/monitoring for files changes.
231 | gulp.task('assemble', function() {
232 |   assemble.option('production', env_flag);
233 |   assemble.option('layout', 'default');
234 |   assemble.layouts(glob.layouts);
235 |   assemble.partials(glob.includes);
236 |   loadData();
237 | 
238 |   var stream = assemble.src(glob.pages)
239 |     .pipe($.extname())
240 |     .pipe(assemble.dest(path.site))
241 |     .pipe($.connect.reload());
242 | 
243 |   return stream;
244 | });
245 | 
246 | 
247 | // ===================================================
248 | // Optimizin'
249 | // ===================================================
250 | 
251 | gulp.task('svgstore', function() {
252 |   return gulp
253 |     .src(path.site + '/img/icons/linear/*.svg')
254 |     .pipe($.svgmin({
255 |       plugins: [{
256 |         removeDoctype: true
257 |       }]
258 |     }))
259 |     .pipe($.svgstore())
260 |     .pipe($.cheerio(function($) {
261 |       $('svg').attr('style', 'display:none');
262 |     }))
263 |     .pipe(gulp.dest(path.templates + '/includes/atoms/svg-sprite.svg'));
264 | });
265 | 
266 | 
267 | // ===================================================
268 | // Minifyin'
269 | // ===================================================
270 | 
271 | gulp.task('cssmin', ['sass'], function() {
272 |   var stream = gulp.src(glob.css)
273 |     .pipe($.mincss({ keepBreaks:true }))
274 |     .pipe(gulp.dest(path.css));
275 | 
276 |   return stream;
277 | });
278 | 
279 | 
280 | // ===================================================
281 | // Buildin'
282 | // ===================================================
283 | 
284 | /*
285 |  * foreach is because usemin 0.3.11 won't manipulate
286 |  * multiple files as an array.
287 |  */
288 | 
289 | gulp.task('usemin', ['assemble', 'cssmin'], function() {
290 |   return gulp.src(glob.html)
291 |     .pipe($.foreach(function(stream, file) {
292 |       return stream
293 |         .pipe($.usemin({
294 |           assetsDir: path.site,
295 |           css: [ $.rev() ],
296 |           html: [ $.minhtml({ empty: true }) ],
297 |           js: [ $.uglify(), $.rev() ]
298 |         }))
299 |         .pipe(gulp.dest(path.dist));
300 |     }));
301 | });
302 | 
303 | 
304 | // ===================================================
305 | // Duplicatin'
306 | // ===================================================
307 | 0
308 | gulp.task('copy', ['usemin'], function() {
309 |   return merge(
310 |     gulp.src([path.site + '/{img,bower_components,js/lib}/**/*'])
311 |         .pipe(gulp.dest(path.dist)),
312 | 
313 |     gulp.src([
314 |         'webhook.php',
315 |         path.site + '/*.{ico,png,txt}',
316 |         path.site + '/.htaccess',
317 |       ]).pipe(gulp.dest(path.dist))
318 |   );
319 | });
320 | 
321 | 
322 | // ===================================================
323 | // Releasin'
324 | // ===================================================
325 | 
326 | gulp.task('deploy', function() {
327 |   return gulp.src([path.dist + '/**/*', path.dist + '/.htaccess' ])
328 |              .pipe($.ghPages(
329 |                 $.if(env_flag === false,
330 |                 { branch: 'staging' },
331 |                 { branch: 'production'  })
332 |              ));
333 | });
334 | 
335 | 
336 | // ===================================================
337 | // Cleanin'
338 | // ===================================================
339 | 
340 | gulp.task('clean', function(cb) {
341 |   del([
342 |     'dist',
343 |     glob.css,
344 |     path.site + '/client',
345 |     glob.html
346 |   ], cb);
347 | });
348 | 
349 | 
350 | // ===================================================
351 | // Monitorin'
352 | // ===================================================
353 | 
354 | gulp.task('watch', function() {
355 |   gulp.watch([
356 |     glob.sass
357 |   ], ['sass']);
358 | 
359 |   gulp.watch([
360 |     glob.includes,
361 |     glob.pages,
362 |     glob.layouts
363 |   ], ['assemble']);
364 | });
365 | 
366 | 
367 | // ===================================================
368 | // Taskin'
369 | // ===================================================
370 | 
371 | gulp.task('build', [ 'copy','usemin' ]);
372 | gulp.task('default', [ 'sass','assemble','serve','watch' ]);
373 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "AtomicGuide",
 3 |   "description": "Creating atomic patterns using Assemble.io and Gulp",
 4 |   "version": "1.1.0",
 5 |   "authors": "@gryghostvisuals",
 6 |   "contributors": [],
 7 |   "homepage": "https://github.com/grayghostvisuals/atomic-guide",
 8 |   "main": "https://github.com/grayghostvisuals/atomic-guide",
 9 |   "license": "MIT",
10 |   "bugs": {
11 |     "url": "https://github.com/grayghostvisuals/atomic-guide/issues"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "https://github.com/grayghostvisuals/atomic-guide"
16 |   },
17 |   "scripts": {
18 |     "start": "node node_modules/gulp/bin/gulp"
19 |   },
20 |   "dependencies": {
21 |     "assemble": "assemble/assemble#v0.6.0",
22 |     "gulp": "3.8.11",
23 |     "gulp-autoprefixer": "2.1.0",
24 |     "gulp-concat": "2.4.3",
25 |     "gulp-extname": "0.2.0",
26 |     "gulp-foreach": "^0.1.0",
27 |     "gulp-load-plugins": "0.8.0",
28 |     "gulp-minify-css": "0.4.4",
29 |     "gulp-minify-html": "0.1.8",
30 |     "gulp-rev": "3.0.0",
31 |     "gulp-sass": "1.3.3",
32 |     "gulp-uglify": "1.1.0",
33 |     "gulp-usemin": "0.3.11",
34 |     "gulp-util": "3.0.3",
35 |     "gulp-if": "1.2.5",
36 |     "merge-stream": "0.1.7"
37 |   },
38 |   "devDependencies": {
39 |     "gulp-connect": "2.2.0",
40 |     "cheerio": "0.18.0",
41 |     "del": "1.1.1",
42 |     "gulp-cheerio": "0.6.2",
43 |     "gulp-gh-pages": "0.5.1",
44 |     "gulp-livereload": "3.7.0",
45 |     "gulp-mocha": "2.1.2",
46 |     "gulp-svgmin": "1.1.1",
47 |     "gulp-svgstore": "5.0.0"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/site.yaml:
--------------------------------------------------------------------------------
 1 | # =============================================
 2 | # CONFIG
 3 | # =============================================
 4 | 
 5 | # Templates
 6 | templates:         site/templates
 7 | layouts:           <%= site.templates %>/layouts
 8 | layout:            default
 9 | pages:             <%= site.templates %>/pages
10 | includes:          <%= site.templates %>/{includes, pages}
11 | 
12 | 
13 | # =============================================
14 | # METADATA
15 | # =============================================
16 | 
17 | # Site
18 | title:              Atomic Guide


--------------------------------------------------------------------------------
/site/css/src/assembler/_atomic-globals.scss:
--------------------------------------------------------------------------------
 1 | * {
 2 |   &:before,
 3 |   &:after {
 4 |     box-sizing: inherit;
 5 |   }
 6 | }
 7 | 
 8 | html {
 9 |   box-sizing: border-box;
10 | }
11 | 
12 | html,
13 | body {
14 |   margin: 0;
15 |   padding: 0;
16 |   min-height: 100%;
17 | }
18 | 
19 | img,
20 | embed,
21 | object,
22 | video {
23 |   max-width: 100%;
24 |   height: auto;
25 | }
26 | 
27 | a[href*="top"] {
28 |   position: fixed;
29 |   right: 20px;
30 |   bottom: 20px;
31 |   transition: opacity 400ms cubic-bezier(0.43, 0.01, 0.39, 0.99);
32 | }
33 | 


--------------------------------------------------------------------------------
/site/css/src/assembler/_atomic-swatch.scss:
--------------------------------------------------------------------------------
 1 | #colors svg {
 2 |   max-width: 100%;
 3 |   width: 72px;
 4 |   height: 72px;
 5 |   transition: 200ms fill ease-in-out;
 6 | 
 7 |   &:hover {
 8 |     cursor: pointer;
 9 |   }
10 | 
11 |   // https://twitter.com/gryghostvisuals/status/572611473333043201
12 |   // http://sassmeister.com/gist/89f3c3cc30a3e70713d3
13 |   // http://www.codeshare.io/UIbrU
14 |   @for $i from 1 through length($atomic-colors) {
15 |     &:nth-of-type(#{$i}) {
16 |       fill: nth(nth($atomic-colors, $i), 2);
17 |       // &:hover {
18 |       //   fill: lighten(nth(nth($atomic-colors, $i), 2), 10%);
19 |       // }
20 |     }
21 |   }
22 | }


--------------------------------------------------------------------------------
/site/css/src/assembler/_index.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   margin: 0 auto;
 3 |   max-width: 960px;
 4 |   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue Regular", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
 5 |   line-height: 1.5;
 6 |   background: #F4F5F6;
 7 | }
 8 | 
 9 | 
10 | body.atomic {
11 |   margin: 20px;
12 | 
13 |   > main[role="main"] .row {
14 |     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
15 |     background: white;
16 |     margin: 20px 0;
17 |     padding: 20px;
18 |   }
19 | 
20 |   > main[role="main"] .row .typl8-delta {
21 |     font-size: 1.25em;
22 |   }
23 | 
24 |   > main[role="main"] .row header + h2 {
25 |     font-size: 1em;
26 |   }
27 | }
28 | 
29 | 
30 | body.atomic > header {
31 |   display: flex;
32 |   flex-direction: row-reverse;
33 |   align-items: center;
34 |   flex-flow: inherit;
35 |   justify-content: space-between;
36 | }
37 | 
38 | 
39 | #atomic-logo {
40 |   height: auto;
41 |   display: inline-block;
42 |   vertical-align: middle;
43 |   margin-right: 20px;
44 | 
45 |   path {
46 |     fill: none;
47 |     stroke: #012265;
48 |   }
49 | 
50 |   circle {
51 |     fill: #F4F5F6;
52 |     stroke: #09A3CA;
53 |   }
54 | }
55 | 
56 | 
57 | .atomic-hexoverlay._active {
58 |   transform: translateX(0) translateZ(0);
59 |   opacity: 1;
60 | }
61 | 
62 | 
63 | .atomic-hexoverlay {
64 |   display: flex;
65 |   align-items: center;
66 |   justify-content: center;
67 |   flex-direction: column;
68 |   transform: translateX(-100%) translateZ(0);
69 |   transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);;
70 |   height: 100%;
71 |   position: fixed;
72 |   top: 0;
73 |   left: 0;
74 |   right: 0;
75 |   bottom: 0;
76 |   width: 100%;
77 |   z-index: 500;
78 |   opacity: 0;
79 | 
80 |   p {
81 |     margin: 0;
82 |     font-size: 3.25rem;
83 |   }
84 | 
85 |   b {
86 |     display: inline-block;
87 |     padding: 10px 0;
88 |     width: 100%;
89 |     text-align: center;
90 |     text-transform: lowercase;
91 |   }
92 | }


--------------------------------------------------------------------------------
/site/css/src/assembler/_prism.scss:
--------------------------------------------------------------------------------
  1 | // http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript+scss+bash+ruby&plugins=show-language
  2 | code[class*="language-"],
  3 | pre[class*="language-"] {
  4 |   color: #8B7F9E;
  5 |   direction: ltr;
  6 |   font-family: Consolas, Monaco, 'Andale Mono', monospace;
  7 |   text-align: left;
  8 |   white-space: pre;
  9 |   word-spacing: normal;
 10 |   word-break: normal;
 11 |   line-height: 1.5;
 12 |   tab-size: 2;
 13 |   hyphens: none;
 14 | }
 15 | 
 16 | pre[class*="language-"],
 17 | :not(pre) > code[class*="language-"] {
 18 |   background: #F7F7F8;
 19 | }
 20 | 
 21 | pre[class*="language-"] {
 22 |   margin: 1em 0;
 23 |   overflow: auto;
 24 |   padding: 1em;
 25 | }
 26 | 
 27 | pre[class*="language-"]::selection {
 28 |   // Safari
 29 |   background: hsl(200, 4%, 16%);
 30 | }
 31 | 
 32 | pre[class*="language-"]::selection {
 33 |   // Firefox
 34 |   background: hsl(200, 4%, 16%);
 35 | }
 36 | 
 37 | // Text Selection colour
 38 | pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
 39 | code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
 40 |   text-shadow: none;
 41 |   background: rgba(#5B5F7C, 0.15);
 42 | }
 43 | 
 44 | pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
 45 | code[class*="language-"]::selection, code[class*="language-"] ::selection {
 46 |   text-shadow: none;
 47 |   background: rgba(#5B5F7C, 0.15);
 48 | }
 49 | 
 50 | // Inline code
 51 | // :not(pre) > code[class*="language-"] {}
 52 | 
 53 | .token.comment,
 54 | .token.prolog,
 55 | .token.doctype,
 56 | .token.cdata {
 57 |   color: hsl(230, 20%, 44%);
 58 | }
 59 | 
 60 | .token.punctuation {
 61 |   opacity: .7;
 62 | }
 63 | 
 64 | .namespace {
 65 |   opacity: .7;
 66 | }
 67 | 
 68 | .token.tag,
 69 | .token.boolean,
 70 | .token.number,
 71 | .token.deleted {
 72 |   color: #E87878;
 73 | }
 74 | 
 75 | .token.keyword,
 76 | .token.property,
 77 | .token.selector,
 78 | .token.constant,
 79 | .token.symbol,
 80 | .token.builtin {
 81 |   color: #EF3738;
 82 | }
 83 | 
 84 | .token.attr-name,
 85 | .token.attr-value,
 86 | .token.string,
 87 | .token.char,
 88 | .token.operator,
 89 | .token.entity,
 90 | .token.url,
 91 | .language-css .token.string,
 92 | .style .token.string,
 93 | .token.variable,
 94 | .token.inserted {
 95 |   color: #92A6FF;
 96 | }
 97 | 
 98 | .token.punctuation {
 99 |   color: #839496;
100 | }
101 | 
102 | .token.attr-value > .token.punctuation:first-child {
103 |   color: #EF7379;
104 | }
105 | 
106 | .token.atrule {
107 |   color: hsl(218, 22%, 55%); /* #7587A6 */
108 | }
109 | 
110 | .token.regex,
111 | .token.important {
112 |   color: hsl(42, 75%, 65%); /* #E9C062 */
113 | }
114 | 
115 | .token.important {
116 |   font-weight: bold;
117 | }
118 | 
119 | .token.entity {
120 |   cursor: help;
121 | }
122 | 
123 | pre[data-line] {
124 |   padding: 1em 0 1em 3em;
125 |   position: relative;
126 | }
127 | 
128 | // Markup
129 | .language-markup .token.tag,
130 | .language-markup .token.attr-name,
131 | .language-markup .token.punctuation {
132 |   color: #278BD2;
133 | }
134 | 
135 | // Make the tokens sit above the line highlight so the colours don't look faded.
136 | .token {
137 |   position: relative;
138 |   z-index: 1;
139 | }
140 | 
141 | .line-highlight {
142 |   background: -moz-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
143 |   background: -o-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
144 |   background: -webkit-linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
145 |   background: hsla(0, 0%, 33%, 0.25); /* #545454 */
146 |   background: linear-gradient(left, hsla(0, 0%, 33%, .1) 70%, hsla(0, 0%, 33%, 0)); /* #545454 */
147 |   border-bottom: 1px dashed hsl(0, 0%, 33%); /* #545454 */
148 |   border-top: 1px dashed hsl(0, 0%, 33%); /* #545454 */
149 |   left: 0;
150 |   line-height: inherit;
151 |   margin-top: 0.75em; /* Same as .prism’s padding-top */
152 |   padding: inherit 0;
153 |   pointer-events: none;
154 |   position: absolute;
155 |   right: 0;
156 |   white-space: pre;
157 |   z-index: 0;
158 | }
159 | 
160 | .line-highlight:before,
161 | .line-highlight[data-end]:after {
162 |   background-color: hsl(215, 15%, 59%); /* #8794A6 */
163 |   border-radius: 999px;
164 |   box-shadow: 0 1px white;
165 |   color: hsl(24, 20%, 95%); /* #F5F2F0 */
166 |   content: attr(data-start);
167 |   font: bold 65%/1.5 sans-serif;
168 |   left: .6em;
169 |   min-width: 1em;
170 |   padding: 0 .5em;
171 |   position: absolute;
172 |   text-align: center;
173 |   text-shadow: none;
174 |   top: .4em;
175 |   vertical-align: .3em;
176 | }
177 | 
178 | .line-highlight[data-end]:after {
179 |   bottom: .4em;
180 |   content: attr(data-end);
181 |   top: auto;
182 | }
183 | 
184 | pre[class*='language-'] {
185 |   position: relative;
186 |   clear: both;
187 |   margin: 20px 0;
188 |   z-index: 0;
189 | }
190 | pre[class*='language-'] > code[data-language] {
191 |   overflow: scroll;
192 |   max-height: 28em;
193 |   display: block;
194 | }
195 | 
196 | .usertype--feature {
197 |   padding: 1em;
198 |   min-height: 200px;
199 |   background-color: #DDD;
200 |   position: absolute;
201 |   width: 100%;
202 |   background-size: contain;
203 |   background-repeat: no-repeat;
204 |   background-position: center center;
205 | }
206 | pre[class*='language-'] > code[data-language]::before {
207 |   content: attr(data-language);
208 |   color: black;
209 |   background-color: #CFCFCF;
210 |   display: inline-block;
211 |   position: absolute;
212 |   top: 0;
213 |   right: 0;
214 |   font-size: 0.9em;
215 |   padding: 0 0.5em;
216 |   text-shadow: none;
217 | }


--------------------------------------------------------------------------------
/site/css/src/style.scss:
--------------------------------------------------------------------------------
 1 | // Atomic Guide
 2 | // ===============================================
 3 | 
 4 | $atomic-colors: (
 5 |   white: #FFFFFF,
 6 |   athens-gray: #F4F5F6,
 7 |   gallery: #EEEEEE,
 8 | 
 9 |   indigo: #09A3CA,
10 |   chambray: #006EA0,
11 |   big-stone: #002A64
12 | );
13 | 
14 | @import "../../bower_components/normalize-scss/normalize";
15 | @import "assembler/atomic-globals";
16 | @import "assembler/atomic-swatch";
17 | @import "assembler/prism";
18 | @import "assembler/index";
19 | 
20 | 
21 | // App Utilities
22 | // ===============================================
23 | // App Atoms
24 | // ===============================================
25 | // App Molecules
26 | // ===============================================
27 | // App Organisms
28 | // ===============================================
29 | // App Views
30 | // ===============================================
31 | // App Helpers
32 | // ===============================================
33 | 


--------------------------------------------------------------------------------
/site/js/lib/prism.js:
--------------------------------------------------------------------------------
 1 | /* http://prismjs.com/download.html?themes=prism-dark&languages=markup+css+clike+javascript+scss+bash+ruby&plugins=show-language */
 2 | self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var Prism=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]},clone:function(e){var n=t.util.type(e);switch(n){case"Object":var a={};for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));return a;case"Array":return e.slice()}return e}},languages:{extend:function(e,n){var a=t.util.clone(t.languages[e]);for(var r in n)a[r]=n[r];return a},insertBefore:function(e,n,a,r){r=r||t.languages;var i=r[e],l={};for(var o in i)if(i.hasOwnProperty(o)){if(o==n)for(var s in a)a.hasOwnProperty(s)&&(l[s]=a[s]);l[o]=i[o]}return r[e]=l},DFS:function(e,n,a){for(var r in e)e.hasOwnProperty(r)&&(n.call(e,r,e[r],a||r),"Object"===t.util.type(e[r])?t.languages.DFS(e[r],n):"Array"===t.util.type(e[r])&&t.languages.DFS(e[r],n,r))}},highlightAll:function(e,n){for(var a,r=document.querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'),i=0;a=r[i++];)t.highlightElement(a,e===!0,n)},highlightElement:function(a,r,i){for(var l,o,s=a;s&&!e.test(s.className);)s=s.parentNode;if(s&&(l=(s.className.match(e)||[,""])[1],o=t.languages[l]),o){a.className=a.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,s=a.parentNode,/pre/i.test(s.nodeName)&&(s.className=s.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);var c=a.textContent;if(c){var g={element:a,language:l,grammar:o,code:c};if(t.hooks.run("before-highlight",g),r&&self.Worker){var u=new Worker(t.filename);u.onmessage=function(e){g.highlightedCode=n.stringify(JSON.parse(e.data),l),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(g.element),t.hooks.run("after-highlight",g)},u.postMessage(JSON.stringify({language:g.language,code:g.code}))}else g.highlightedCode=t.highlight(g.code,g.grammar,g.language),t.hooks.run("before-insert",g),g.element.innerHTML=g.highlightedCode,i&&i.call(a),t.hooks.run("after-highlight",g)}}},highlight:function(e,a,r){var i=t.tokenize(e,a);return n.stringify(t.util.encode(i),r)},tokenize:function(e,n){var a=t.Token,r=[e],i=n.rest;if(i){for(var l in i)n[l]=i[l];delete n.rest}e:for(var l in n)if(n.hasOwnProperty(l)&&n[l]){var o=n[l];o="Array"===t.util.type(o)?o:[o];for(var s=0;s<o.length;++s){var c=o[s],g=c.inside,u=!!c.lookbehind,f=0,h=c.alias;c=c.pattern||c;for(var p=0;p<r.length;p++){var d=r[p];if(r.length>e.length)break e;if(!(d instanceof a)){c.lastIndex=0;var m=c.exec(d);if(m){u&&(f=m[1].length);var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),N=[p,1];b&&N.push(b);var O=new a(l,g?t.tokenize(m,g):m,h);N.push(O),w&&N.push(w),Array.prototype.splice.apply(r,N)}}}}}return r},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("[object Array]"==Object.prototype.toString.call(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var l="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,l)}t.hooks.run("wrap",i);var o="";for(var s in i.attributes)o+=s+'="'+(i.attributes[s]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+o+">"+i.content+"</"+i.tag+">"},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof module&&module.exports&&(module.exports=Prism);;
 3 | Prism.languages.html={comment:/<!--[\w\W]*?-->/g,prolog:/<\?.+?\?>/,doctype:/<!DOCTYPE.+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/gi,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/gi,inside:{punctuation:/=|>|"/g}},punctuation:/\/?>/g,"attr-name":{pattern:/[\w:-]+/g,inside:{namespace:/^[\w-]+?:/}}}},entity:/\&#?[\da-z]{1,8};/gi},Prism.hooks.add("wrap",function(t){"entity"===t.type&&(t.attributes.title=t.content.replace(/&amp;/,"&"))});;
 4 | Prism.languages.css={comment:/\/\*[\w\W]*?\*\//g,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*{))/gi,inside:{punctuation:/[;:]/g}},url:/url\((["']?).*?\1\)/gi,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/g,property:/(\b|\B)[\w-]+(?=\s*:)/gi,string:/("|')(\\?.)*?\1/g,important:/\B!important\b/gi,punctuation:/[\{\};:]/g,"function":/[-a-z0-9]+(?=\()/gi},Prism.languages.html&&Prism.languages.insertBefore("html","tag",{style:{pattern:/<style[\w\W]*?>[\w\W]*?<\/style>/gi,inside:{tag:{pattern:/<style[\w\W]*?>|<\/style>/gi,inside:Prism.languages.html.tag.inside},rest:Prism.languages.css}}});;
 5 | Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//g,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*?(\r?\n|$)/g,lookbehind:!0}],string:/("|')(\\?.)*?\1/g,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/gi,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/g,"boolean":/\b(true|false)\b/g,"function":{pattern:/[a-z0-9_]+\(/gi,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/g,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|\~|\^|\%/g,ignore:/&(lt|gt|amp);/gi,punctuation:/[{}[\];(),.:]/g};;
 6 | Prism.languages.javascript=Prism.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/g,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?|NaN|-?Infinity)\b/g}),Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0}}),Prism.languages.html&&Prism.languages.insertBefore("html","tag",{script:{pattern:/<script[\w\W]*?>[\w\W]*?<\/script>/gi,inside:{tag:{pattern:/<script[\w\W]*?>|<\/script>/gi,inside:Prism.languages.html.tag.inside},rest:Prism.languages.javascript}}});;
 7 | Prism.languages.scss=Prism.languages.extend("css",{comment:{pattern:/(^|[^\\])(\/\*[\w\W]*?\*\/|\/\/.*?(\r?\n|$))/g,lookbehind:!0},atrule:/@[\w-]+(?=\s+(\(|\{|;))/gi,url:/([-a-z]+-)*url(?=\()/gi,selector:/([^@;\{\}\(\)]?([^@;\{\}\(\)]|&|\#\{\$[-_\w]+\})+)(?=\s*\{(\}|\s|[^\}]+(:|\{)[^\}]+))/gm}),Prism.languages.insertBefore("scss","atrule",{keyword:/@(if|else if|else|for|each|while|import|extend|debug|warn|mixin|include|function|return|content)|(?=@for\s+\$[-_\w]+\s)+from/i}),Prism.languages.insertBefore("scss","property",{variable:/((\$[-_\w]+)|(#\{\$[-_\w]+\}))/i}),Prism.languages.insertBefore("scss","ignore",{placeholder:/%[-_\w]+/i,statement:/\B!(default|optional)\b/gi,"boolean":/\b(true|false)\b/g,"null":/\b(null)\b/g,operator:/\s+([-+]{1,2}|={1,2}|!=|\|?\||\?|\*|\/|\%)\s+/g});;
 8 | Prism.languages.bash=Prism.languages.extend("clike",{comment:{pattern:/(^|[^"{\\])(#.*?(\r?\n|$))/g,lookbehind:!0},string:{pattern:/("|')(\\?[\s\S])*?\1/g,inside:{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^\}]+\})/g}},keyword:/\b(if|then|else|elif|fi|for|break|continue|while|in|case|function|select|do|done|until|echo|exit|return|set|declare)\b/g}),Prism.languages.insertBefore("bash","keyword",{property:/\$([a-zA-Z0-9_#\?\-\*!@]+|\{[^}]+\})/g}),Prism.languages.insertBefore("bash","comment",{important:/(^#!\s*\/bin\/bash)|(^#!\s*\/bin\/sh)/g});;
 9 | Prism.languages.ruby=Prism.languages.extend("clike",{comment:/#[^\r\n]*(\r?\n|$)/g,keyword:/\b(alias|and|BEGIN|begin|break|case|class|def|define_method|defined|do|each|else|elsif|END|end|ensure|false|for|if|in|module|new|next|nil|not|or|raise|redo|require|rescue|retry|return|self|super|then|throw|true|undef|unless|until|when|while|yield)\b/g,builtin:/\b(Array|Bignum|Binding|Class|Continuation|Dir|Exception|FalseClass|File|Stat|File|Fixnum|Fload|Hash|Integer|IO|MatchData|Method|Module|NilClass|Numeric|Object|Proc|Range|Regexp|String|Struct|TMS|Symbol|ThreadGroup|Thread|Time|TrueClass)\b/,constant:/\b[A-Z][a-zA-Z_0-9]*[?!]?\b/g}),Prism.languages.insertBefore("ruby","keyword",{regex:{pattern:/(^|[^/])\/(?!\/)(\[.+?]|\\.|[^/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/g,lookbehind:!0},variable:/[@$]+\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g,symbol:/:\b[a-zA-Z_][a-zA-Z_0-9]*[?!]?\b/g});;
10 | !function(){if(self.Prism){var a={csharp:"C#",cpp:"C++"};Prism.hooks.add("before-highlight",function(e){var t=a[e.language]||e.language;e.element.setAttribute("data-language",t)})}}();;
11 | 


--------------------------------------------------------------------------------
/site/js/src/atomic-generator.js:
--------------------------------------------------------------------------------
 1 | // Config
 2 | // ============================================================
 3 | 
 4 | var $atomic_html       = document.querySelectorAll('pre.language-html code')
 5 |     $atomic_js         = document.querySelectorAll('script.atomic-js'),
 6 |     $atomic_jscode     = document.querySelectorAll('pre.language-javascript > code')
 7 |     atomic_htmlsnippet = [],
 8 |     atomic_jsnippet    = [];
 9 | 
10 | 
11 | // Markup
12 | // order matters!
13 | // ============================================================
14 | 
15 | for(var i = 0, l = $atomic_html.length; i < l; i++) {
16 | 
17 |   atomic_htmlsnippet.push(
18 |     $atomic_html[i].innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
19 |   );
20 | 
21 |   $atomic_html[i].innerHTML = atomic_htmlsnippet[i];
22 | }
23 | 
24 | 
25 | // JavaScript
26 | // order matters!
27 | // ============================================================
28 | 
29 | for(var i = 0, l = $atomic_js.length; i < l; i++) {
30 | 
31 |   atomic_jsnippet.push(
32 |     $atomic_js[i].innerHTML.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
33 |   );
34 | 
35 | }
36 | 
37 | for(var i = 0, l = $atomic_jscode.length; i < l; i++) {
38 | 
39 |   $atomic_jscode[i].innerHTML = atomic_jsnippet[i];
40 | 
41 | }
42 | 


--------------------------------------------------------------------------------
/site/js/src/atomic-swatch.js:
--------------------------------------------------------------------------------
  1 | // References
  2 | // ======================================================
  3 | 
  4 | var atomic_hex_div      = document.createElement('div'),
  5 |     $atomic_hex_overlay = document.querySelectorAll('atomic-hexoverlay'),
  6 |     $atomic_swatch      = document.getElementById('colors');
  7 | 
  8 | 
  9 | // DOM Insertion
 10 | // ======================================================
 11 | 
 12 | document.body.appendChild(atomic_hex_div).classList.add('atomic-hexoverlay');
 13 | 
 14 | 
 15 | // Color Converters
 16 | // ======================================================
 17 | 
 18 | function atomicRgb2Hex(rgb) {
 19 |   rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
 20 | 
 21 |   return (rgb && rgb.length === 4) ? "#" +
 22 |     ('0' + parseInt(rgb[1], 10).toString(16)).slice(-2) +
 23 |     ('0' + parseInt(rgb[2], 10).toString(16)).slice(-2) +
 24 |     ('0' + parseInt(rgb[3], 10).toString(16)).slice(-2) : '';
 25 | }
 26 | 
 27 | function hexToRgb(hex) {
 28 |   var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
 29 | 
 30 |   return result ? {
 31 |       r: parseInt(result[1], 16),
 32 |       g: parseInt(result[2], 16),
 33 |       b: parseInt(result[3], 16)
 34 |   } : null;
 35 | }
 36 | 
 37 | 
 38 | // Event
 39 | // ======================================================
 40 | 
 41 | $atomic_swatch.addEventListener('click', function(e) {
 42 | 
 43 |   var atomic_target     = e.target.parentNode,
 44 |       atomic_fill       = window.getComputedStyle(atomic_target).getPropertyValue('fill'),
 45 |       atomic_hexvalue   = atomicRgb2Hex( atomic_fill ),
 46 |       atomic_rgbchannel = atomic_fill,
 47 |       atomic_rgb        = atomic_rgbchannel;
 48 | 
 49 |   atomic_rgbchannel = atomic_rgb.substring(4, atomic_rgb.length-1)
 50 |                                 .replace(/ /g, '')
 51 |                                 .split(',');
 52 | 
 53 |   if(atomic_target.nodeName === 'svg') {
 54 | 
 55 |     atomic_hex_div.classList.add('_active');
 56 | 
 57 |     // http://www.w3.org/TR/cssom/#dom-window-getcomputedstyle
 58 |     // https://twitter.com/gryghostvisuals/status/578524169719123969
 59 |     if(atomic_rgbchannel.length === 3) {
 60 | 
 61 |       atomic_hex_div.style.background = 'rgba('+ atomic_rgbchannel[0] + ',' + atomic_rgbchannel[1] + ',' + atomic_rgbchannel[2] + ', 0.95)';
 62 |       atomic_hex_div.innerHTML = '<p>' + atomic_hexvalue + '</p><b>Click Hex Code to Copy</b>';
 63 | 
 64 |       var atomic_contrast = atomic_rgbchannel[0] * 0.299 + atomic_rgbchannel[1] * 0.587 + atomic_rgbchannel[2] * 0.114 > 186 ? atomic_hex_div.style.color = 'black' : atomic_hex_div.style.color = 'white';
 65 | 
 66 |     } else {
 67 | 
 68 |       var atomic_hex = window.getComputedStyle(atomic_target).getPropertyValue('fill'),
 69 |           atomic_rgb = hexToRgb(atomic_hex);
 70 | 
 71 |       atomic_hex_div.style.background = 'rgba('+ atomic_rgb.r + ',' + atomic_rgb.g + ',' + atomic_rgb.b +', 0.95)';
 72 | 
 73 |       var atomic_contrast = atomic_rgb.r * 0.299 + atomic_rgb.g * 0.587 + atomic_rgb.b * 0.114 > 186 ? atomic_hex_div.style.color = 'black' : atomic_hex_div.style.color = 'white';
 74 | 
 75 |       atomic_hex_div.innerHTML = '<p>' + atomic_hex + '</p><b>Click Hex Code to Copy</b>';
 76 | 
 77 |     }
 78 | 
 79 |   }
 80 | 
 81 | });
 82 | 
 83 | 
 84 | // Clipboard Event
 85 | // ======================================================
 86 | 
 87 | atomic_hex_div.addEventListener('click', function(e) {
 88 | 
 89 |   if(e.target.nodeName !== 'P') {
 90 | 
 91 |     this.classList.remove('_active');
 92 | 
 93 |   }
 94 | 
 95 |   if(e.target.nodeName === 'P') {
 96 | 
 97 |     var atomic_hexprompt = window.prompt("Copy to clipboard: CTRL+C (CMD+C on macs)", e.target.innerHTML);
 98 | 
 99 |     if(atomic_hexprompt !== null) {
100 | 
101 |       this.classList.remove('_active');
102 | 
103 |     }
104 | 
105 |   }
106 | 
107 | });
108 | 


--------------------------------------------------------------------------------
/site/js/src/scrollmation.js:
--------------------------------------------------------------------------------
  1 | // Primary Navigation
  2 | // =======================================
  3 | 
  4 | var controller        = new ScrollMagic.Controller(),
  5 |     atomic_nav        = document.getElementById('nav'),
  6 |     atomic_links      = atomic_nav.children,
  7 |     atomic_scrollinks = {};
  8 | 
  9 | for (var i = 0, l = atomic_links.length; i < l; i++) {
 10 |   if(atomic_links[i].hash !== '') {
 11 |     var href = atomic_links[i].hash.replace('#', ''),
 12 |         id   = atomic_links[i].id,
 13 |         key  = href;
 14 | 
 15 |     atomic_scrollinks[key] = id;
 16 |   }
 17 | }
 18 | 
 19 | for (var key in atomic_scrollinks) {
 20 |   new ScrollMagic.Scene({
 21 |       duration: document.getElementById(key).scrollHeight,
 22 |       triggerElement: '#' + key
 23 |     })
 24 |     .setClassToggle('#' + atomic_scrollinks[key], 'active')
 25 |     .addTo(controller);
 26 | }
 27 | 
 28 | function scrollToTween(target) {
 29 |   TweenMax.to(window, 0.675, {
 30 |     scrollTo : {
 31 |       y: target,
 32 |       autoKill: true
 33 |     },
 34 | 
 35 |     ease : Cubic.easeInOut
 36 |   });
 37 | }
 38 | 
 39 | function scrollToTrigger(e) {
 40 |   if(e.target && e.target.nodeName == 'A') {
 41 |     var id = e.target.hash;
 42 | 
 43 |     if(id.length > 0) {
 44 |       e.preventDefault();
 45 |       controller.scrollTo(id);
 46 | 
 47 |       if (window.history && window.history.pushState) {
 48 |         history.pushState('', document.title, id);
 49 |       }
 50 |     }
 51 |   }
 52 | }
 53 | 
 54 | controller.scrollTo(function(target) {
 55 |   scrollToTween(target);
 56 | });
 57 | 
 58 | atomic_nav.addEventListener('click', function(e) {
 59 |   scrollToTrigger(e);
 60 | });
 61 | 
 62 | 
 63 | // Back To Top Button
 64 | // =======================================
 65 | 
 66 | var button_id = 'scroll-top';
 67 | var button_scene = new ScrollMagic.Scene({
 68 |   offset: document.getElementsByTagName('header')[0].offsetHeight,
 69 |   reverse: true
 70 | }).addTo(controller);
 71 | 
 72 | function hideTopButton(event, id) {
 73 |   var el = document.getElementById(id);
 74 |   el.style.opacity = 0;
 75 | }
 76 | 
 77 | function makeTopButton(event, id) {
 78 |   var top_hash = document.body.getAttribute('id');
 79 | 
 80 |   if(document.getElementById(id) === null) {
 81 |     var el = document.createElement('a');
 82 | 
 83 |     el.innerHTML = 'topside';
 84 | 
 85 |     document.body.appendChild(el);
 86 | 
 87 |     el.setAttribute('id', id);
 88 |     el.setAttribute('href', '#' + top_hash);
 89 | 
 90 |     el.addEventListener('click', function(e) {
 91 |       scrollToTrigger(e);
 92 |     });
 93 |   } else {
 94 |     document.getElementById(id).style.opacity = 1;
 95 |   }
 96 | }
 97 | 
 98 | button_scene.on('enter', function(event) {
 99 |   makeTopButton(event, button_id);
100 | }).on('leave', function(event) {
101 |   hideTopButton(event, button_id);
102 | });
103 | 


--------------------------------------------------------------------------------
/site/templates/includes/assembler/footer.hbs:
--------------------------------------------------------------------------------
1 | <footer role="contentinfo">
2 |   <small>©2015 Atomic Guide</small>
3 | </footer>


--------------------------------------------------------------------------------
/site/templates/includes/assembler/logo.hbs:
--------------------------------------------------------------------------------
 1 | <a href="https://github.com/grayghostvisuals/atomic-guide">
 2 |   <svg xmlns="http://www.w3.org/2000/svg" id="atomic-logo" viewBox="0 0 800 700">
 3 |     <g stroke-width="44.0574" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10">
 4 |       <path fill="none" stroke="#012265" d="M186.4 652l176.9-501.8c.9-2.7 4.8-3 5.7-.3l162 500.9S442.8 381 171.3 381c-81 0-89.9 50.9-89.9 59.9 0 108.8 261.9 116.5 371.3 116.5 162.1 0 265.1-40.3 265.1-117.4 0-120.4-182.5-119.6-182.5 0"/>
 5 |       <circle fill="#F4F5F6" stroke="#00A4CE" cx="572.3" cy="436.1" r="37.8"/>
 6 |       <circle fill="#F4F5F6" stroke="#00A4CE" cx="179.1" cy="236.9" r="37.8"/>
 7 |       <circle fill="#F4F5F6" stroke="#00A4CE" cx="128.8" cy="501.2" r="37.8"/>
 8 |     </g>
 9 |   </svg>
10 |   Atomic Guide on GitHub
11 | </a>
12 | 


--------------------------------------------------------------------------------
/site/templates/includes/assembler/nav.hbs:
--------------------------------------------------------------------------------
 1 | <nav role="navigation" id="nav">
 2 |   <a href="#colors" id="atomic-colors">Colors</a>
 3 |   <a href="#icons" id="atomic-icons">Icons</a>
 4 |   <a href="#helpers" id="atomic-helpers">Helpers</a>
 5 |   <a href="#utilities" id="atomic-utilities">Utilities</a>
 6 |   <a href="#typography" id="atomic-typography">Typography</a>
 7 |   <a href="#buttons" id="atomic-buttons">Buttons</a>
 8 |   <a href="#forms" id="atomic-forms">Forms</a>
 9 |   <a href="#navigation" id="atomic-nav">Navigation</a>
10 |   <a href="#patterns" id="atomic-patterns">Patterns</a>
11 | </nav>


--------------------------------------------------------------------------------
/site/templates/includes/assembler/swatches.hbs:
--------------------------------------------------------------------------------
1 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
2 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
3 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
4 | <br>
5 | 
6 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
7 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
8 | <svg xmlns=http://www.w3.org/2000/svg viewBox="0 0 100 100"><rect width="100" height="100"/></svg>
9 | <br>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/anchors.hbs:
--------------------------------------------------------------------------------
1 | <a href="#">Anchor Link</a>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/default-button.hbs:
--------------------------------------------------------------------------------
1 | <button type="button" role="button">Default</button>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/email-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="">New email</label>
2 | <input type="email" id="" name="" placeholder="e.g. back@tothefuture.com">


--------------------------------------------------------------------------------
/site/templates/includes/atoms/headings.hbs:
--------------------------------------------------------------------------------
1 | <h1>Heading Level 1</h1>
2 | <h2>Heading Level 2</h2>
3 | <h3>Heading Level 3</h3>
4 | <h4>Heading Level 4</h4>
5 | <h5>Heading Level 5</h5>
6 | <h6>Heading Level 6</h6>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/paragraphs.hbs:
--------------------------------------------------------------------------------
1 | <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
2 | tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
3 | quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4 | consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
5 | cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
6 | proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/password-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="">Password</label>
2 | <input type="password" id="" name="">


--------------------------------------------------------------------------------
/site/templates/includes/atoms/radio-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="radio{{version}}" class="control radio {{modifierclass}}">
2 |   <input type="radio" id="radio{{version}}" name="radio" value="radio-value{{version}}" {{state}}>
3 |   <span class="control__indicator"></span> Radio Input
4 | </label>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/search.hbs:
--------------------------------------------------------------------------------
1 | <form role="form">
2 |   <label for="">Search</label>
3 |   <input type="search" placeholder="Search" required>
4 | </form>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/select-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="">Categories</label>
2 | <select name="select">
3 |   <option value="value1" selected>Good Fit</option> 
4 |   <option value="value2">Renewal</option>
5 |   <option value="value3">Slam dunk</option>
6 |   <option value="value3">Speculative</option>
7 |   <option value="value3">Strategic</option>
8 | </select>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/submit-button.hbs:
--------------------------------------------------------------------------------
1 | <input type="submit" value="submit">


--------------------------------------------------------------------------------
/site/templates/includes/atoms/tel-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="">Phone</label>
2 | <input type="tel" id="" name="">


--------------------------------------------------------------------------------
/site/templates/includes/atoms/text-input.hbs:
--------------------------------------------------------------------------------
1 | <label for="">Name</label>
2 | <input type="text" name="" class="" id="" placeholder="placeholder text">


--------------------------------------------------------------------------------
/site/templates/includes/atoms/type.hbs:
--------------------------------------------------------------------------------
1 | The quick brown fox jumps over a lazy dog.<br>
2 | ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
3 | abcdefghijklmnopqrstuvwxyz<br>
4 | 0123456789 !§%&/()=?# @©®™ $€£¢ •°-_—<br>
5 | äöüß æÆ œŒ åÅ øØ çÇ ñÑ<br>


--------------------------------------------------------------------------------
/site/templates/includes/atoms/unordered-list.hbs:
--------------------------------------------------------------------------------
1 | <ul>
2 |   <li>Item 1</li>
3 |   <li>Item 2</li>
4 |   <li>Item 3</li>
5 |   <li>Item 4</li>
6 |   <li>Item 5</li>
7 | </ul>


--------------------------------------------------------------------------------
/site/templates/layouts/default.hbs:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 
 7 |     <title>{{title}}</title>
 8 |     <meta name="description" content="{{description}}">
 9 | 
10 |     <meta name="viewport" content="width=device-width, user-scalable=1, initial-scale=1">
11 |     <meta name="msapplication-tap-highlight" content="no">
12 | 
13 |     <!-- build:css css/style.min.css -->
14 |     <link rel="stylesheet" href="css/style.css">
15 |     <!-- endbuild -->
16 | 
17 |     <link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
18 |   </head>
19 |   <body class="atomic" id="top">
20 |     <header role="banner">
21 |       {{> logo}}
22 |       {{> nav}}
23 |     </header>
24 | 
25 |     <main role="main">
26 |       {% body %}
27 |     </main>
28 | 
29 |     {{#is 'index' this.basename}}
30 |       {{> footer}}
31 |     {{/is}}
32 | 
33 |     {{#any 'index' this.basename}}
34 |     <script class="atomic-js">var button = document.querySelector('button');
35 | button.addEventListener('click', function() {
36 |   console.log('hello world');
37 | })</script>
38 |     {{/any}}
39 | 
40 |     {{#any 'index' this.basename}}
41 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script>
42 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
43 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>
44 |     <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/plugins/ScrollToPlugin.min.js"></script>
45 |     {{/any}}
46 | 
47 |     <!-- build:js js/dist/builder.min.js -->
48 |     {{#any 'index' this.basename}}
49 |     <script src="js/src/scrollmation.js"></script>
50 |     <script src="js/lib/prism.js"></script>
51 |     <script src="js/src/atomic-swatch.js"></script>
52 |     <script src="js/src/atomic-generator.js"></script>
53 |     {{/any}}
54 |     <!-- endbuild -->
55 |   </body>
56 | </html>
57 | 


--------------------------------------------------------------------------------
/site/templates/pages/index.hbs:
--------------------------------------------------------------------------------
  1 | ---
  2 | basename: index
  3 | title: Atomic Guide
  4 | description:
  5 | ---
  6 | <section class="row" id="intro">
  7 |   <h1 class="typl8-delta">The Atomic Guide</h1>
  8 |   <p>This guide is intended to help analyze a system's interface from a molecular level and builds upon the thoughts and writings of <a href="//bradfrost.com/blog/post/atomic-web-design/">Brad Frost</a>. Use this styleguide as a reference in order to help build out and structure a system of highly reusable components.</p>
  9 | </section>
 10 | 
 11 | <!-- #Colors -->
 12 | <section class="row" id="colors">
 13 |   <header>
 14 |     <h1 class="typl8-delta">Colors</h1>
 15 |   </header>
 16 | 
 17 |   <p>Click on any color swatch to retrieve it's hex value.</p>
 18 |   {{> swatches}}
 19 | 
 20 | </section>
 21 | 
 22 | <!-- #Icons -->
 23 | <section class="row" id="icons">
 24 |   <header>
 25 |     <h1 class="typl8-delta">Icons</h1>
 26 |   </header>
 27 | </section>
 28 | 
 29 | <!-- #Helpers -->
 30 | <section class="row" id="helpers">
 31 |   <header>
 32 |     <h1 class="typl8-delta">Helper Classes</h1>
 33 |   </header>
 34 | </section>
 35 | 
 36 | <!-- #Utilities -->
 37 | <section class="row" id="utilities">
 38 |   <header>
 39 |     <h1 class="typl8-delta">Utility Classes</h1>
 40 |   </header>
 41 | </section>
 42 | 
 43 | <!-- #Typography -->
 44 | <section class="row" id="typography">
 45 |   <header>
 46 |     <h1 class="typl8-delta">Typography</h1>
 47 |   </header>
 48 | 
 49 |   <h2 class="typl8-zeta">Typescale (<a href="http://www.modularscale.com">modularscale</a>)</h2>
 50 | 
 51 |   <h2 class="typl8-zeta">Fonts</h2>
 52 |   <div class="atomic-type">{{> type}}</div>
 53 | 
 54 |   <h2 class="typl8-zeta">Headings</h2>
 55 |   {{> headings}}
 56 |   <pre class="language-html"><code>{{> headings}}</code></pre>
 57 | 
 58 |   <h2 class="typl8-zeta">Paragraphs</h2>
 59 |   {{> paragraphs}}
 60 |   {{> paragraphs}}
 61 |   <pre class="language-html"><code>{{> paragraphs}}</code></pre>
 62 | 
 63 |   <h2 class="typl8-zeta">Anchors</h2>
 64 |   {{> anchors}}
 65 |   <pre class="language-html"><code>{{> anchors}}</code></pre>
 66 | 
 67 |   <h2 class="typl8-zeta">Unordered List</h2>
 68 |   {{> unordered-list}}
 69 |   <pre class="language-html"><code>{{> unordered-list}}</code></pre>
 70 | </section>
 71 | 
 72 | <!-- #Buttons -->
 73 | <section class="row" id="buttons">
 74 |   <header>
 75 |     <h1 class="typl8-delta">Buttons</h1>
 76 |   </header>
 77 | 
 78 |   <h2 class="typl8-zeta">Default</h2>
 79 |   {{> default-button}}
 80 |   <pre class="language-html"><code>{{> default-button}}</code></pre>
 81 |   <pre class="language-javascript"><code></code></pre>
 82 | </section>
 83 | 
 84 | <!-- #Forms -->
 85 | <section class="row" id="forms">
 86 |   <header>
 87 |     <h1 class="typl8-delta">Forms</h1>
 88 |   </header>
 89 | 
 90 |   <h2 class="typl8-zeta">Text Field Input w/label</h2>
 91 |   {{> text-input}}
 92 |   <pre class="language-html"><code>{{> text-input}}</code></pre>
 93 | 
 94 |   <h2 class="typl8-zeta">Search</h2>
 95 |   {{> search}}
 96 |   <pre class="language-html"><code>{{> search}}</code></pre>
 97 | 
 98 |   <h2 class="typl8-zeta">Phone</h2>
 99 |   {{> tel-input}}
100 |   <pre class="language-html"><code>{{> tel-input}}</code></pre>
101 | 
102 |   <h2 class="typl8-zeta">Email</h2>
103 |   {{> email-input}}
104 |   <pre class="language-html"><code>{{> email-input}}</code></pre>
105 | 
106 |   <h2 class="typl8-zeta">Password</h2>
107 |   {{> password-input}}
108 |   <pre class="language-html"><code>{{> password-input}}</code></pre>
109 | 
110 |   <h2 class="typl8-zeta">Radio</h2>
111 |   {{> radio-input modifier}}
112 |   {{> radio-input modifier.a}}
113 |   {{> radio-input modifier.b}}
114 |   <pre class="language-html"><code>{{> radio-input modifier}}</code></pre>
115 | 
116 | <!-- #Navigation -->
117 | <section class="row" id="navigation">
118 |   <header>
119 |     <h1 class="typl8-delta">Navigation</h1>
120 |   </header>
121 | </section>
122 | 
123 | <!-- #Patterns -->
124 | <section class="row" id="patterns">
125 |   <header>
126 |     <h1 class="typl8-delta">Patterns</h1>
127 |   </header>
128 | </section>


--------------------------------------------------------------------------------
/webhook.php:
--------------------------------------------------------------------------------
1 | <?php `git pull`; // webhook yo
2 | 


--------------------------------------------------------------------------------