Skip to content

Commit 16d9c66

Browse files
author
Erik Jung
committed
Add initial setup WIP
1 parent 15f48d3 commit 16d9c66

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1075
-32
lines changed

‎.babelrc

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["es2015"]
3+
}

‎.editorconfig

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
root = true
2+
3+
[*]
4+
indent_style = space
5+
indent_size = 2
6+
charset = utf-8
7+
trim_trailing_whitespace = true
8+
insert_final_newline = true
9+
10+
[*.md]
11+
trim_trailing_whitespace = false

‎.eslintrc

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
extends: "xo-space/esnext"
2+
env:
3+
browser: true
4+
rules:
5+
space-before-function-paren: [2, "always"]
6+
no-warning-comments: 0

‎.gitignore

+2-32
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,3 @@
1-
# Logs
2-
logs
3-
*.log
4-
npm-debug.log*
5-
6-
# Runtime data
7-
pids
8-
*.pid
9-
*.seed
10-
11-
# Directory for instrumented libs generated by jscoverage/JSCover
12-
lib-cov
13-
14-
# Coverage directory used by tools like istanbul
15-
coverage
16-
17-
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18-
.grunt
19-
20-
# node-waf configuration
21-
.lock-wscript
22-
23-
# Compiled binary addons (http://nodejs.org/api/addons.html)
24-
build/Release
25-
26-
# Dependency directory
1+
dist
272
node_modules
28-
29-
# Optional npm cache directory
30-
.npm
31-
32-
# Optional REPL history
33-
.node_repl_history
3+
npm-debug.log

‎.nvmrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
4.2.6

‎.travis.yml

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
language: node_js
2+
node_js:
3+
- v5
4+
- v4

‎browserslist

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
# Update as needed once browser support is determined.
2+
# See: https://github.com/ai/browserslist#config-file
3+
4+
Last 1 version

‎config.js

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
'use strict';
2+
3+
module.exports = {
4+
'css:toolkit': {
5+
src: './src/assets/**/toolkit.css',
6+
dest: './dist/assets',
7+
name: 'css:toolkit'
8+
},
9+
10+
'css:drizzle': {
11+
src: './src/assets/**/drizzle.css',
12+
dest: './dist/assets',
13+
prefix: 'drizzle-',
14+
name: 'css:drizzle'
15+
},
16+
17+
'js': {
18+
plugins: {
19+
webpack: {
20+
entry: {
21+
// Drizzle UI scripts
22+
'drizzle/scripts/drizzle':
23+
'./src/assets/drizzle/scripts/drizzle.js',
24+
// Common toolkit scripts
25+
'toolkit/scripts/toolkit':
26+
'./src/assets/toolkit/scripts/toolkit.js'
27+
},
28+
output: {
29+
path: './dist/assets',
30+
filename: '[name].js'
31+
},
32+
module: {
33+
loaders: [
34+
{
35+
test: /\.js$/,
36+
loaders: ['babel-loader']
37+
}
38+
]
39+
},
40+
externals: {}
41+
}
42+
}
43+
},
44+
45+
'serve': {
46+
plugins: {
47+
browserSync: {
48+
open: false,
49+
notify: false,
50+
files: ['./dist/**/*'],
51+
server: {baseDir: './dist'}
52+
}
53+
}
54+
},
55+
56+
'watch': {
57+
watchers: [
58+
{
59+
match: ['./src/assets/**/*.css'],
60+
tasks: ['css']
61+
},
62+
{
63+
match: ['./src/assets/**/*.js'],
64+
tasks: ['js']
65+
},
66+
{
67+
match: [
68+
'./src/**/*.hbs',
69+
'./src/data/**/*'
70+
],
71+
tasks: ['drizzle']
72+
}
73+
]
74+
},
75+
76+
'drizzle': {
77+
src: {
78+
patterns: {
79+
basedir: './src/patterns',
80+
glob: './src/patterns/**/*.hbs'
81+
},
82+
templates: {
83+
basedir: './src/templates',
84+
glob: './src/templates/**/*.hbs'
85+
}
86+
},
87+
dest: {
88+
pages: './dist',
89+
patterns: './dist/patterns'
90+
},
91+
fieldParsers: {
92+
notes: 'markdown'
93+
}
94+
}
95+
};

‎gulpfile.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
'use strict';
2+
3+
const drizzle = require('drizzle-builder');
4+
const gulp = require('gulp');
5+
const helpers = require('core-hbs-helpers');
6+
const tasks = require('core-gulp-tasks');
7+
const env = require('gulp-util').env;
8+
const config = require('./config');
9+
10+
// Append config
11+
Object.assign(config.drizzle, {helpers});
12+
13+
// Register core tasks
14+
[
15+
'clean',
16+
'js',
17+
'serve',
18+
'watch'
19+
].forEach(name => tasks[name](gulp, config[name]));
20+
21+
// Register special CSS tasks
22+
tasks.css(gulp, config['css:toolkit']);
23+
tasks.css(gulp, config['css:drizzle']);
24+
gulp.task('css', ['css:drizzle', 'css:toolkit']);
25+
26+
// Register Drizzle builder task
27+
gulp.task('drizzle', () => {
28+
const result = drizzle(config.drizzle);
29+
return result;
30+
});
31+
32+
// Register frontend composite task
33+
gulp.task('frontend', [
34+
'drizzle',
35+
'css',
36+
'js'
37+
]);
38+
39+
// Register build task (for continuous deployment via Netflify)
40+
gulp.task('build', ['clean'], done => {
41+
gulp.start('frontend');
42+
done();
43+
});
44+
45+
// Register default task
46+
gulp.task('default', ['frontend'], done => {
47+
gulp.start('serve');
48+
if (env.dev) {
49+
gulp.start('watch');
50+
}
51+
done();
52+
});

‎package.json

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
{
2+
"name": "drizzle",
3+
"version": "0.0.1",
4+
"repository": "[email protected]:cloudfour/drizzle.git",
5+
"description": "A pattern library authoring environment",
6+
"homepage": "https://github.com/cloudfour/drizzle",
7+
"license": "MIT",
8+
"keywords": [
9+
"component",
10+
"html",
11+
"pattern",
12+
"styleguide",
13+
"ui"
14+
],
15+
"engines": {
16+
"node": ">=4.0.0"
17+
},
18+
"devDependencies": {
19+
"babel-core": "^6.7.6",
20+
"babel-eslint": "^6.0.2",
21+
"babel-loader": "^6.2.4",
22+
"babel-preset-es2015": "^6.6.0",
23+
"core-gulp-tasks": "github:cloudfour/core-gulp-tasks#v0.1.2",
24+
"core-hbs-helpers": "github:cloudfour/core-hbs-helpers#v0.1",
25+
"drizzle-builder": "github:cloudfour/drizzle-builder#0.0.1",
26+
"eslint": "^2.7.0",
27+
"eslint-config-xo-space": "^0.12.0",
28+
"eslint-plugin-babel": "^3.2.0",
29+
"gulp": "^3.9.1"
30+
},
31+
"dependencies": {
32+
"prismjs": "^1.4.1",
33+
"suitcss-base": "^2.0.0",
34+
"suitcss-components-arrange": "^1.1.1",
35+
"suitcss-components-button": "^5.0.0",
36+
"suitcss-components-grid": "^3.0.2",
37+
"suitcss-utils": "^1.0.0"
38+
},
39+
"scripts": {
40+
"prestart": "npm install",
41+
"start": "gulp --dev",
42+
"build": "npm prestart && gulp"
43+
}
44+
}

‎src/assets/drizzle/scripts/drizzle.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
'use strict';
2+
3+
import 'prismjs';
4+
5+
const dom = {};
6+
7+
dom.nav = document.getElementById('nav');
8+
dom.navMenu = document.getElementById('nav-menu');
9+
dom.navToggle = dom.nav.querySelector('a[href="#nav"]');
10+
dom.navLinks = dom.navMenu.querySelectorAll('a');
11+
12+
function setActiveNavItem (pathname) {
13+
const isMatch = a => new URL(a.href).pathname === pathname;
14+
const active = Array.from(dom.navLinks).find(isMatch);
15+
if (active) {
16+
console.log(active);
17+
active.classList.add('is-active');
18+
}
19+
}
20+
21+
dom.navToggle.addEventListener('click', event => {
22+
event.preventDefault();
23+
dom.nav.classList.toggle('is-active');
24+
});
25+
26+
setActiveNavItem(window.location.pathname);

‎src/assets/drizzle/styles/base.css

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
:root {
2+
/* Common properties */
3+
--color-aqua: #7fdbff;
4+
--color-blue: #0074d9;
5+
--color-lime: #01ff70;
6+
--color-navy: #001f3f;
7+
--color-teal: #39cccc;
8+
--color-olive: #3d9970;
9+
--color-green: #2ecc40;
10+
--color-red: #ff4136;
11+
--color-maroon: #85144b;
12+
--color-orange: #ff851b;
13+
--color-purple: #b10dc9;
14+
--color-yellow: #ffdc00;
15+
--color-fuchsia: #f012be;
16+
--color-gray: #aaa;
17+
--color-white: #fff;
18+
--color-black: #111;
19+
--color-silver: #f0f0f0;
20+
--monospace: "Source Code Pro";
21+
--space: 1rem;
22+
23+
/* SUIT component properties */
24+
--Arrange-gutter-size: calc(var(--space) / 2);
25+
}
26+
27+
@custom-media --sm-viewport (max-width: 30em);
28+
@custom-media --md-viewport (min-width: 40em);
29+
@custom-media --lg-viewport (min-width: 60em);
30+
31+
@custom-selector :--enter :matches(:hover, :focus, :active);
32+
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
33+
34+
body {
35+
background-color: #fff !important;
36+
}
37+
38+
code,
39+
pre {
40+
font-family: var(--monospace), monospace !important;
41+
}

‎src/assets/drizzle/styles/components/index.css

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "./item.css";
2+
@import "./label.css";
3+
@import "./layout.css";
4+
@import "./nav.css";

‎src/assets/drizzle/styles/components/item.css

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
:root {
2+
--Item-border: 1px solid var(--color-silver);
3+
}
4+
5+
.Item {
6+
border-bottom: var(--Item-border);
7+
padding-bottom: calc(var(--space) * 3);
8+
padding-top: calc(var(--space) * 2);
9+
10+
&:last-child {
11+
border-bottom: none;
12+
}
13+
}
14+
15+
.Item-notes > :matches(:--heading) {
16+
margin-bottom: calc(var(--space) / 2);
17+
margin-top: calc(var(--space) * 1.5);
18+
}
19+
20+
.Item-control {
21+
background-color: transparent;
22+
border: 0;
23+
cursor: pointer;
24+
font-size: 0.75rem;
25+
line-height: 1;
26+
padding: calc(var(--space) / 2) 0;
27+
text-decoration: none;
28+
vertical-align: baseline;
29+
30+
& svg {
31+
fill: currentColor;
32+
height: 1em;
33+
margin-top: -0.375em;
34+
position: relative;
35+
vertical-align: middle;
36+
width: 1.5em;
37+
}
38+
}
39+
40+
.Item-preview {
41+
padding: calc(var(--space) * 2);
42+
}

0 commit comments

Comments
 (0)