diff --git a/.gitignore b/.gitignore
index 08b9a2f83..f9d11769c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,3 +18,5 @@ public/styleguide/css/static.css.map
public/styleguide/css/styleguide-specific.css.map
public/styleguide/css/styleguide.css.map
source/css/style.css.map
+.idea/
+public/styleguide/
diff --git a/CHANGELOG b/CHANGELOG
index c01f4e782..5cc039b63 100644
--- a/CHANGELOG
+++ b/CHANGELOG
@@ -1,5 +1,29 @@
THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT.
+PL-node-v1.1.0
+- FIX: Fixed issue where partials containing styleModifiers with integers were not found correctly under all circumstances
+- FIX: Fixed issue where excluded patterns were still rendered on the Pattern Lab site. Now they do not directly get rendered via the menu, view all links, or the styleguide, but are accessible for inclusion as pattern partials, and can be accessed via lineage.
+- THX: Thanks @theorise for reporting these issues.
+- THX: Thanks @dmolsen for input on desired behavior.
+- FIX: Fixed issue where style modifier partials within list item blocks where not uniquely being applied. this seems like a regression. added a unit test with fix
+- ADD: Added fuzzy pattern matching support based on patternType-substring(patternName) to align with PL PHP
+- FIX: Fixed issue with gulpfile not copying style.css and watching the wrong directory
+- THX: Thanks @robinsonaaron for the issue and pull request!
+- FIX: Prefer exact pattern key match over fuzzy matches inside getpatternbykey()
+- THX: Thanks @EvanLovely for the suggestion
+- ADD: Make all paths configurable
+- THX: HUGE Thanks to @geoffp and @EvanLovely for their thoughts, time, and talent to make this a reality!
+- FIX: Fix issue where absolute paths in the config path object would not resolve
+- THX: Thanks to @geoffp and @EvanLovely for reporting, fixing and testing the issue in the dev branch.
+- FIX: Typo in gulp instructions in README.
+- THX: Thanks @simonknittel for the watchful eyes
+- CHG: Changed locations of ./public/styleguide to ./core/styleguide to make ./public/ a cleaner distribution directory
+- CHG: Removed scss files and config from project. This is in preparation for including the default asset repo in the future
+- FIX: Fix issue where partials were not being sent to Mustache during pattern parameter parsing.
+- THX: Thanks to @e2tha-e for reporting this issue.
+- ADD: Now patterns and pseudopatterns can be linked from global or file data.json
+- THX: Thanks @kylewelsby for the thoughtful enhancement
+
PL-node-v1.0.0
- FIX: Resolve issue with not hiding underscored patterns.
- THX: Thanks @ivancamilov for reporting this regression.
diff --git a/Gruntfile.js b/Gruntfile.js
index 3d9485121..7b57f6385 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -1,5 +1,7 @@
module.exports = function(grunt) {
+ var path = require('path');
+
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
@@ -60,71 +62,50 @@ module.exports = function(grunt) {
copy: {
main: {
files: [
- { expand: true, cwd: './source/js/', src: '*', dest: './public/js/'},
- { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' },
- { expand: true, cwd: './source/images/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/' },
- { expand: true, cwd: './source/images/sample/', src: ['*.png', '*.jpg', '*.gif', '*.jpeg'], dest: './public/images/sample/'},
- { expand: true, cwd: './source/fonts/', src: '*', dest: './public/fonts/'},
- { expand: true, cwd: './source/_data/', src: 'annotations.js', dest: './public/data/' }
+ { expand: true, cwd: path.resolve(paths().source.js), src: '*.js', dest: path.resolve(paths().public.js) },
+ { expand: true, cwd: path.resolve(paths().source.css), src: '*.css', dest: path.resolve(paths().public.css) },
+ { expand: true, cwd: path.resolve(paths().source.images), src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: path.resolve(paths().public.images) },
+ { expand: true, cwd: path.resolve(paths().source.fonts), src: '*', dest: path.resolve(paths().public.fonts) },
+ { expand: true, cwd: path.resolve(paths().source.data), src: 'annotations.js', dest: path.resolve(paths().public.data) }
]
},
- css: {
+ styleguide: {
files: [
- { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' }
+ { expand: true, cwd: path.resolve(paths().source.styleguide), src: ['*.*', '**/*.*'], dest: path.resolve(paths().public.styleguide) }
]
}
},
watch: {
all: {
files: [
- 'source/css/**/*.css',
- 'public/styleguide/css/*.css',
- 'source/_patterns/**/*.mustache',
- 'source/_patterns/**/*.json',
- 'source/_data/*.json'
+ path.resolve(paths().source.css + '**/*.css'),
+ path.resolve(paths().source.styleguide + 'css/*.css'),
+ path.resolve(paths().source.patterns + '**/*.mustache'),
+ path.resolve(paths().source.patterns + '**/*.json'),
+ path.resolve(paths().source.fonts + '/*'),
+ path.resolve(paths().source.images + '/*'),
+ path.resolve(paths().source.data + '*.json')
],
- tasks: ['default']
- },
- // scss: {
- // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'],
- // tasks: ['sass', 'copy:css','bsReload:css']
- // },
- patterns: {
- files: [
- 'source/_patterns/**/*.mustache',
- 'source/_patterns/**/*.json',
- 'source/_data/*.json'
- ],
- tasks: ['default']
+ tasks: ['default', 'bsReload:css']
}
},
- // sass: {
- // build: {
- // options: {
- // style: 'expanded',
- // precision: 8
- // },
- // files: {
- // './source/css/style.css': './source/css/style.scss',
- // './public/styleguide/css/static.css': './public/styleguide/css/static.scss',
- // './public/styleguide/css/styleguide.css': './public/styleguide/css/styleguide.scss',
- // './public/styleguide/css/styleguide-specific.css': './public/styleguide/css/styleguide-specific.scss'
- // }
- // }
- // },
nodeunit: {
all: ['test/*_tests.js']
},
browserSync: {
dev: {
options: {
- server: './public',
+ server: path.resolve(paths().public.root),
watchTask: true,
+ watchOptions: {
+ ignoreInitial: true,
+ ignored: '*.html'
+ },
plugins: [
{
module: 'bs-html-injector',
options: {
- files: './public/index.html'
+ files: [path.resolve(paths().public.root + '/index.html'), path.resolve(paths().public.styleguide + '/styleguide.html')]
}
}
]
@@ -132,25 +113,26 @@ module.exports = function(grunt) {
}
},
bsReload: {
- css: './public/**/*.css'
+ css: path.resolve(paths().public.root + '**/*.css')
}
});
+ function paths () {
+ return require('./config.json').paths;
+ }
+
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
//load the patternlab task
grunt.task.loadTasks('./builder/');
- //if you choose to use scss, or any preprocessor, you can add it here
- grunt.registerTask('default', ['patternlab', /*'sass',*/ 'copy:main']);
+ grunt.registerTask('default', ['patternlab', 'copy:main', 'copy:styleguide']);
//travis CI task
grunt.registerTask('travis', ['nodeunit', 'patternlab']);
- //TODO: this line is more efficient, but you cannot run concurrent watch tasks without another dependency.
- //grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:patterns', 'watch:scss']);
- grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'browserSync', 'watch:all']);
+ grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']);
grunt.registerTask('build', ['nodeunit', 'concat']);
diff --git a/README.md b/README.md
index b2353e58b..97b7fed55 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ To run patternlab-node using gulp, you need to swap out the default grunt config
3. Run `npm install` from the command line
4. Run `gulp` or `gulp serve` from the command line
-This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `grunt serve` to see have BrowserSync spin up and serve the files to you.
+This creates all patterns, the styleguide, and the pattern lab site. It's strongly recommended to run `gulp serve` to have BrowserSync spin up and serve the files to you.
### There and Back Again, or Switching Between Grunt and Gulp
@@ -80,10 +80,36 @@ Get more information about patternlab-node, pattern lab in general, and where to
##### Watching Changes
To have patternlab-node watch for changes to either a mustache template, data, or stylesheets, run `grunt|gulp watch` or `grunt|gulp serve`. The `Gruntfile|Gulpfile` governs what is watched. It should be easy to add scss or whatever preprocessor you fancy.
-##### Preprocessor Support
-The patternlab-node release package ships with some `.scss` files utilized in the creation of the style guide and sample templates, but these are not required. The compilation tasks are commented out in the `Gruntfiles|Gulpfiles` but can be uncommented or changed to meet your needs. Sass modules are not included in `package.json` files - the prevailing thought being if you are familiar enough with preprocessors, you can use the instructions for [grunt-contrib-sass](https://github.com/gruntjs/grunt-contrib-sass) / [gulp-sass](https://github.com/dlmanning/gulp-sass) / _preprocessor of choice_ to install them. Uncomment the preprocessor configuration to fully utilize the example templates, css and style guide.
+##### Configurable Paths
+Pattern Lab Node ships with a particular source and public workflow intended to separate the code you work on with the code generated for consumption elsewhere. If you wish to change any paths, you may do so within `config.json`. The contents are here:
-**NOTE:** You may run into issues installing gulp-sass if you don't have the latest Visual Studio on Windows. See [here](https://github.com/sass/node-sass/issues/469) for more information and [this query](https://github.com/sass/node-sass/issues?utf8=%E2%9C%93&q=is%3Aissue+install) for a slew of installation problems related to gulp-sass.
+```
+"paths" : {
+ "source" : {
+ "root": "./source/",
+ "patterns" : "./source/_patterns/",
+ "data" : "./source/_data/",
+ "styleguide" : "./core/styleguide/",
+ "patternlabFiles" : "./source/_patternlab-files/",
+ "js" : "./source/js",
+ "images" : "./source/images",
+ "fonts" : "./source/fonts",
+ "css" : "./source/css/"
+ },
+ "public" : {
+ "root" : "./public/",
+ "patterns" : "./public/patterns/",
+ "data" : "./public/data/",
+ "styleguide" : "./public/styleguide/",
+ "js" : "./public/js",
+ "images" : "./public/images",
+ "fonts" : "./public/fonts",
+ "css" : "./public/css"
+ }
+}
+```
+
+Note the intentional repitition of the nested structure, made this way for maximum flexibility. Relative paths are default but absolute paths should work too. You may also use these paths within Grunt or Gulp files by referring to the paths() object.
##### Nav Bar Controls
If you don't have a need for some of the nav-bar tools in the Pattern Lab frontend, you can turn them off in `config.json`.
diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js
index 916eddb93..5c7c51df6 100644
--- a/builder/lineage_hunter.js
+++ b/builder/lineage_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -23,47 +23,41 @@
if(matches !== null){
matches.forEach(function(match, index, matches){
//strip out the template cruft
- var foundPattern = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");
+ var foundPatternKey = match.replace("{{> ", "").replace(" }}", "").replace("{{>", "").replace("}}", "");
// remove any potential pattern parameters. this and the above are rather brutish but I didn't want to do a regex at the time
- if(foundPattern.indexOf('(') > 0){
- foundPattern = foundPattern.substring(0, foundPattern.indexOf('('));
+ if(foundPatternKey.indexOf('(') > 0){
+ foundPatternKey = foundPatternKey.substring(0, foundPatternKey.indexOf('('));
}
- //add if it doesnt exist
- if (pattern.lineageIndex.indexOf(foundPattern) === -1){
+ //remove any potential stylemodifiers.
+ foundPatternKey = foundPatternKey.split(':')[0];
- pattern.lineageIndex.push(foundPattern);
+ //get the ancestorPattern
+ var ancestorPattern = pattern_assembler.get_pattern_by_key(foundPatternKey, patternlab);
- patternlab.patterns.forEach(function(ancestorPattern, index, patterns){
+ if (ancestorPattern && pattern.lineageIndex.indexOf(ancestorPattern.key) === -1){
- //find the pattern in question
- var searchPattern = ancestorPattern.patternGroup + "-" + ancestorPattern.patternName;
+ //add it since it didnt exist
+ pattern.lineageIndex.push(ancestorPattern.key);
+ //create the more complex patternLineage object too
+ var l = {
+ "lineagePattern": ancestorPattern.key,
+ "lineagePath": "../../patterns/" + ancestorPattern.patternLink
+ };
+ pattern.lineage.push(JSON.stringify(l));
- if(searchPattern === foundPattern){
- //create the more complex patternLineage object too
- var l = {
- "lineagePattern": foundPattern,
- "lineagePath": "../../patterns/" + ancestorPattern.patternLink
+ //also, add the lineageR entry if it doesn't exist
+ if (ancestorPattern.lineageRIndex.indexOf(pattern.key) === -1){
+ ancestorPattern.lineageRIndex.push(pattern.key);
+
+ //create the more complex patternLineage object in reverse
+ var lr = {
+ "lineagePattern": pattern.key,
+ "lineagePath": "../../patterns/" + pattern.patternLink
};
- pattern.lineage.push(JSON.stringify(l));
-
- //also, add the lineageR entry if it doesn't exist
- var patternLabel = pattern.patternGroup + "-" + pattern.patternName;
- if (ancestorPattern.lineageRIndex.indexOf(patternLabel) === -1){
- ancestorPattern.lineageRIndex.push(patternLabel);
-
- //create the more complex patternLineage object in reverse
- var lr = {
- "lineagePattern": patternLabel,
- "lineagePath": "../../patterns/" + pattern.patternLink
- };
- ancestorPattern.lineageR.push(JSON.stringify(lr));
- }
+ ancestorPattern.lineageR.push(JSON.stringify(lr));
}
-
- });
-
}
});
}
diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js
index f553f32c2..bd025d7b5 100644
--- a/builder/list_item_hunter.js
+++ b/builder/list_item_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -72,13 +72,16 @@
var partialName = foundPartials[j].match(/([\w\-\.\/~]+)/g)[0];
var partialPattern = pattern_assembler.get_pattern_by_key(partialName, patternlab);
+ //create a copy of the partial so as to not pollute it after the get_pattern_by_key call.
+ var cleanPartialPattern = JSON.parse(JSON.stringify(partialPattern));
+
//if partial has style modifier data, replace the styleModifier value
- if(pattern.stylePartials && pattern.stylePartials.length > 0){
- style_modifier_hunter.consume_style_modifier(partialPattern, foundPartials[j], patternlab);
+ if(foundPartials[j].indexOf(':') > -1){
+ style_modifier_hunter.consume_style_modifier(cleanPartialPattern, foundPartials[j], patternlab);
}
//replace its reference within the block with the extended template
- thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], partialPattern.extendedTemplate);
+ thisBlockTemplate = thisBlockTemplate.replace(foundPartials[j], cleanPartialPattern.extendedTemplate);
}
//render with data
@@ -97,6 +100,9 @@
var repeatingBlock = pattern.extendedTemplate.substring(pattern.extendedTemplate.indexOf(liMatch), pattern.extendedTemplate.indexOf(end) + end.length);
pattern.extendedTemplate = pattern.extendedTemplate.replace(repeatingBlock, repeatedBlockHtml);
+ //update the extendedTemplate in the partials object in case this pattern is consumed later
+ patternlab.partials[pattern.key] = pattern.extendedTemplate;
+
});
}
}
diff --git a/builder/media_hunter.js b/builder/media_hunter.js
index e7eb70a15..61583cc91 100644
--- a/builder/media_hunter.js
+++ b/builder/media_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
diff --git a/builder/object_factory.js b/builder/object_factory.js
index 6823d94a7..e667ab8df 100644
--- a/builder/object_factory.js
+++ b/builder/object_factory.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
diff --git a/builder/parameter_hunter.js b/builder/parameter_hunter.js
index e38481beb..8da66335b 100644
--- a/builder/parameter_hunter.js
+++ b/builder/parameter_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -61,6 +61,9 @@
//remove the parameter from the partial and replace it with the rendered partial + paramData
pattern.extendedTemplate = pattern.extendedTemplate.replace(pMatch, renderedPartial);
+
+ //update the extendedTemplate in the partials object in case this pattern is consumed later
+ patternlab.partials[pattern.key] = pattern.extendedTemplate;
});
}
}
diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js
index f175dc115..c3c110885 100644
--- a/builder/pattern_assembler.js
+++ b/builder/pattern_assembler.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -64,6 +64,7 @@
if(pattern.abspath === patternlab.patterns[i].abspath){
//if abspath already exists, overwrite that element
patternlab.patterns[i] = pattern;
+ patternlab.partials[pattern.key] = pattern.extendedTemplate || pattern.template;
isNew = false;
break;
}
@@ -71,6 +72,7 @@
//if the pattern is new, just push to the array
if(isNew){
patternlab.patterns.push(pattern);
+ patternlab.partials[pattern.key] = pattern.extendedTemplate || pattern.template;
}
}
@@ -91,12 +93,12 @@
path = require('path');
//extract some information
- var subdir = path.dirname(path.relative(patternlab.config.patterns.source, file)).replace('\\', '/');
+ var subdir = path.dirname(path.relative(patternlab.config.paths.source.patterns, file)).replace('\\', '/');
var filename = path.basename(file);
var ext = path.extname(filename);
//ignore dotfiles, underscored files, and non-variant .json files
- if(filename.charAt(0) === '.' || filename.charAt(0) === '_' || (ext === '.json' && filename.indexOf('~') === -1)){
+ if(filename.charAt(0) === '.' || (ext === '.json' && filename.indexOf('~') === -1)){
return;
}
@@ -119,8 +121,8 @@
//look for a json file for this template
try {
- var jsonFilename = patternlab.config.patterns.source + currentPattern.subdir + '/' + currentPattern.fileName + ".json";
- currentPattern.jsonFileData = fs.readJSONSync(jsonFilename.substring(2));
+ var jsonFilename = path.resolve(patternlab.config.paths.source.patterns, currentPattern.subdir, currentPattern.fileName + ".json");
+ currentPattern.jsonFileData = fs.readJSONSync(jsonFilename);
if(patternlab.config.debug){
console.log('found pattern-specific data.json for ' + currentPattern.key);
}
@@ -130,8 +132,8 @@
//look for a listitems.json file for this template
try {
- var listJsonFileName = patternlab.config.patterns.source + currentPattern.subdir + '/' + currentPattern.fileName + ".listitems.json";
- currentPattern.listitems = fs.readJSONSync(listJsonFileName.substring(2));
+ var listJsonFileName = path.resolve(patternlab.config.paths.source.patterns, currentPattern.subdir,currentPattern.fileName + ".listitems.json");
+ currentPattern.listitems = fs.readJSONSync(listJsonFileName);
buildListItems(currentPattern);
if(patternlab.config.debug){
console.log('found pattern-specific listitems.json for ' + currentPattern.key);
@@ -177,6 +179,7 @@
for(i = 0; i < patternlab.patterns.length; i++){
if(patternlab.patterns[i].abspath === file){
currentPattern = patternlab.patterns[i];
+ break;
}
}
@@ -204,7 +207,7 @@
//do something with the regular old partials
for(i = 0; i < foundPatternPartials.length; i++){
- var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(:[A-z-_|]+)?(?:\:[A-Za-z0-9-_]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
+ var partialKey = foundPatternPartials[i].replace(/{{>([ ])?([\w\-\.\/~]+)(:[A-z0-9-_|]+)?(?:\:[A-Za-z0-9-_]+)?(?:(| )\(.*)?([ ])?}}/g, '$2');
var partialPath;
@@ -230,6 +233,8 @@
currentPattern.extendedTemplate = currentPattern.extendedTemplate.replace(foundPatternPartials[i], partialPattern.extendedTemplate);
+ //update the extendedTemplate in the partials object in case this pattern is consumed later
+ patternlab.partials[currentPattern.key] = currentPattern.extendedTemplate;
}
} else{
@@ -248,18 +253,35 @@
}
function getpatternbykey(key, patternlab){
+
+ //look for exact key matches
+ for(var i = 0; i < patternlab.patterns.length; i++){
+ if(patternlab.patterns[i].key === key){
+ return patternlab.patterns[i];
+ }
+ }
+
+ //else look by verbose syntax
for(var i = 0; i < patternlab.patterns.length; i++){
switch(key){
- case patternlab.patterns[i].key:
case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName:
case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache':
return patternlab.patterns[i];
}
}
+
+ //return the fuzzy match if all else fails
+ for(var i = 0; i < patternlab.patterns.length; i++){
+ var keyParts = key.split('-'),
+ keyType = keyParts[0],
+ keyName = keyParts.slice(1).join('-');
+ if(patternlab.patterns[i].key.split('-')[0] === keyType && patternlab.patterns[i].key.indexOf(keyName) > -1){
+ return patternlab.patterns[i];
+ }
+ }
throw 'Could not find pattern with key ' + key;
}
-
function mergeData(obj1, obj2){
if(typeof obj2 === 'undefined'){
obj2 = {};
@@ -318,33 +340,36 @@
return o;
}
+ function parseDataLinksHelper (patternlab, obj, key) {
+ var linkRE, dataObjAsString, linkMatches, expandedLink;
+
+ linkRE = /link\.[A-z0-9-_]+/g
+ dataObjAsString = JSON.stringify(obj);
+ linkMatches = dataObjAsString.match(linkRE)
+
+ if(linkMatches) {
+ for (var i = 0; i < linkMatches.length; i++) {
+ expandedLink = patternlab.data.link[linkMatches[i].split('.')[1]];
+ if (expandedLink) {
+ if(patternlab.config.debug){
+ console.log('expanded data link from ' + linkMatches[i] + ' to ' + expandedLink + ' inside ' + key);
+ }
+ dataObjAsString = dataObjAsString.replace(linkMatches[i], expandedLink);
+ }
+ }
+ }
+ return JSON.parse(dataObjAsString)
+ }
//look for pattern links included in data files.
//these will be in the form of link.* WITHOUT {{}}, which would still be there from direct pattern inclusion
- function parseDataLinks(patternlab){
+ function parseDataLinks(patternlab) {
+ //look for link.* such as link.pages-blog as a value
+
+ patternlab.data = parseDataLinksHelper(patternlab, patternlab.data, 'data.json')
//loop through all patterns
- for (var i = 0; i < patternlab.patterns.length; i++){
- var pattern = patternlab.patterns[i];
- //look for link.* such as link.pages-blog as a value
- var linkRE = /link.[A-z0-9-_]+/g;
- //convert to string for easier searching
- var dataObjAsString = JSON.stringify(pattern.jsonFileData);
- var linkMatches = dataObjAsString.match(linkRE);
-
- //if no matches found, escape current loop iteration
- if(linkMatches === null) { continue; }
-
- for(var i = 0; i < linkMatches.length; i++){
- //for each match, find the expanded link within the already constructed patternlab.data.link object
- var expandedLink = patternlab.data.link[linkMatches[i].split('.')[1]];
- if(patternlab.config.debug){
- console.log('expanded data link from ' + linkMatches[i] + ' to ' + expandedLink + ' inside ' + pattern.key);
- }
- //replace value with expandedLink on the pattern
- dataObjAsString = dataObjAsString.replace(linkMatches[i], expandedLink);
- }
- //write back to data on the pattern
- pattern.jsonFileData = JSON.parse(dataObjAsString);
+ for (var i = 0; i < patternlab.patterns.length; i++) {
+ patternlab.patterns[i].jsonFileData = parseDataLinksHelper(patternlab, patternlab.patterns[i].jsonFileData, patternlab.patterns[i].key)
}
}
diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js
index ddbf74023..6c46eb223 100644
--- a/builder/pattern_exporter.js
+++ b/builder/pattern_exporter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
diff --git a/builder/patternlab.js b/builder/patternlab.js
index 01850e29c..19fe34324 100644
--- a/builder/patternlab.js
+++ b/builder/patternlab.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -8,7 +8,7 @@
*
*/
-var patternlab_engine = function () {
+var patternlab_engine = function (config) {
'use strict';
var path = require('path'),
@@ -25,7 +25,10 @@ var patternlab_engine = function () {
patternlab = {};
patternlab.package = fs.readJSONSync('./package.json');
- patternlab.config = fs.readJSONSync('./config.json');
+ patternlab.config = config || fs.readJSONSync(path.resolve(__dirname, '../config.json'));
+
+ var paths = patternlab.config.paths;
+
function getVersion() {
console.log(patternlab.package.version);
@@ -55,10 +58,10 @@ var patternlab_engine = function () {
}
function buildPatterns(deletePatternDir){
- patternlab.data = fs.readJSONSync('./source/_data/data.json');
- patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
- patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
- patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8');
+ patternlab.data = fs.readJSONSync(path.resolve(paths.source.data, 'data.json'));
+ patternlab.listitems = fs.readJSONSync(path.resolve(paths.source.data, 'listitems.json'));
+ patternlab.header = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'pattern-header-footer/header.html'), 'utf8');
+ patternlab.footer = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'pattern-header-footer/footer.html'), 'utf8');
patternlab.patterns = [];
patternlab.partials = {};
patternlab.data.link = {};
@@ -66,7 +69,7 @@ var patternlab_engine = function () {
var pattern_assembler = new pa(),
entity_encoder = new he(),
pattern_exporter = new pe(),
- patterns_dir = './source/_patterns';
+ patterns_dir = paths.source.patterns;
pattern_assembler.combine_listItems(patternlab);
@@ -87,14 +90,9 @@ var patternlab_engine = function () {
console.log(err);
return;
}
-
- pattern_assembler.process_pattern_iterative(file.substring(2), patternlab);
+ pattern_assembler.process_pattern_iterative(path.resolve(file), patternlab);
});
- //now that all the main patterns are known, look for any links that might be within data and expand them
- //we need to do this before expanding patterns & partials into extendedTemplates, otherwise we could lose the data -> partial reference
- pattern_assembler.parse_data_links(patternlab);
-
//diveSync again to recursively include partials, filling out the
//extendedTemplate property of the patternlab.patterns elements
diveSync(patterns_dir, {
@@ -113,17 +111,22 @@ var patternlab_engine = function () {
console.log(err);
return;
}
+ pattern_assembler.process_pattern_recursive(path.resolve(file), patternlab);
+ });
- pattern_assembler.process_pattern_recursive(file.substring(2), patternlab);
- });
+
+ //now that all the main patterns are known, look for any links that might be within data and expand them
+ //we need to do this before expanding patterns & partials into extendedTemplates, otherwise we could lose the data -> partial reference
+ pattern_assembler.parse_data_links(patternlab);
//delete the contents of config.patterns.public before writing
if(deletePatternDir){
- fs.emptyDirSync(patternlab.config.patterns.public);
+ fs.emptyDirSync(paths.public.patterns);
}
//render all patterns last, so lineageR works
patternlab.patterns.forEach(function(pattern, index, patterns){
+
//render the pattern, but first consolidate any data we may have
var allData = JSON.parse(JSON.stringify(patternlab.data));
allData = pattern_assembler.merge_data(allData, pattern.jsonFileData);
@@ -135,13 +138,13 @@ var patternlab_engine = function () {
var patternFooter = pattern_assembler.renderPattern(patternlab.footer, pattern);
//write the compiled template to the public patterns directory
- fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter);
+ fs.outputFileSync(paths.public.patterns + pattern.patternLink, patternlab.header + pattern.patternPartial + patternFooter);
//write the mustache file too
- fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template));
+ fs.outputFileSync(paths.public.patterns + pattern.patternLink.replace('.html', '.mustache'), entity_encoder.encode(pattern.template));
//write the encoded version too
- fs.outputFileSync(patternlab.config.patterns.public + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial));
+ fs.outputFileSync(paths.public.patterns + pattern.patternLink.replace('.html', '.escaped.html'), entity_encoder.encode(pattern.patternPartial));
});
//export patterns if necessary
@@ -163,23 +166,32 @@ var patternlab_engine = function () {
media_hunter.find_media_queries('./source/css', patternlab);
// check if patterns are excluded, if not add them to styleguidePatterns
- if (styleGuideExcludes.length) {
+ if (styleGuideExcludes && styleGuideExcludes.length) {
for (i = 0; i < patternlab.patterns.length; i++) {
- var key = patternlab.patterns[i].key;
- var typeKey = key.substring(0, key.indexOf('-'));
- var isExcluded = (styleGuideExcludes.indexOf(typeKey) > -1);
- if (!isExcluded) {
- styleguidePatterns.push(patternlab.patterns[i]);
+
+ // skip underscore-prefixed files
+ if(isPatternExcluded(patternlab.patterns[i])){
+ if(patternlab.config.debug){
+ console.log('Omitting ' + patternlab.patterns[i].key + " from styleguide pattern exclusion.");
}
+ continue;
+ }
+
+ var key = patternlab.patterns[i].key;
+ var typeKey = key.substring(0, key.indexOf('-'));
+ var isExcluded = (styleGuideExcludes.indexOf(typeKey) > -1);
+ if (!isExcluded) {
+ styleguidePatterns.push(patternlab.patterns[i]);
+ }
}
} else {
- styleguidePatterns = patternlab.patterns;
+ styleguidePatterns = patternlab.patterns;
}
//build the styleguide
- var styleguideTemplate = fs.readFileSync('./source/_patternlab-files/styleguide.mustache', 'utf8'),
+ var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'styleguide.mustache'), 'utf8'),
styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns});
- fs.outputFileSync('./public/styleguide/html/styleguide.html', styleguideHtml);
+ fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), styleguideHtml);
//build the viewall pages
var prevSubdir = '',
@@ -187,7 +199,10 @@ var patternlab_engine = function () {
for (i = 0; i < patternlab.patterns.length; i++) {
// skip underscore-prefixed files
- if (path.basename(patternlab.patterns[i].abspath).charAt(0) === '_') {
+ if(isPatternExcluded(patternlab.patterns[i])){
+ if(patternlab.config.debug){
+ console.log('Omitting ' + patternlab.patterns[i].key + " from view all rendering.");
+ }
continue;
}
@@ -203,18 +218,26 @@ var patternlab_engine = function () {
for (j = 0; j < patternlab.patterns.length; j++) {
if (patternlab.patterns[j].subdir === pattern.subdir) {
+ //again, skip any sibling patterns to the current one that may have underscores
+ if(isPatternExcluded(patternlab.patterns[j])){
+ if(patternlab.config.debug){
+ console.log('Omitting ' + patternlab.patterns[j].key + " from view all sibling rendering.");
+ }
+ continue;
+ }
+
viewAllPatterns.push(patternlab.patterns[j]);
}
}
- var viewAllTemplate = fs.readFileSync('./source/_patternlab-files/viewall.mustache', 'utf8');
+ var viewAllTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'viewall.mustache'), 'utf8');
var viewAllHtml = pattern_assembler.renderPattern(viewAllTemplate, {partials: viewAllPatterns, patternPartial: patternPartial});
- fs.outputFileSync(patternlab.config.patterns.public + pattern.flatPatternPath + '/index.html', viewAllHtml);
+ fs.outputFileSync(paths.public.patterns + pattern.flatPatternPath + '/index.html', viewAllHtml);
}
}
//build the patternlab website
- var patternlabSiteTemplate = fs.readFileSync('./source/_patternlab-files/index.mustache', 'utf8');
+ var patternlabSiteTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'index.mustache'), 'utf8');
//sort all patterns explicitly.
patternlab.patterns = patternlab.patterns.sort(function(a,b){
@@ -231,10 +254,6 @@ var patternlab_engine = function () {
//loop through all patterns.to build the navigation
//todo: refactor this someday
for(var i = 0; i < patternlab.patterns.length; i++){
- // skip underscore-prefixed files
- if (path.basename(patternlab.patterns[i].abspath).charAt(0) === '_') {
- continue;
- }
var pattern = patternlab.patterns[i];
var bucketName = pattern.name.replace(/\\/g, '-').split('-')[1];
@@ -242,6 +261,12 @@ var patternlab_engine = function () {
//check if the bucket already exists
var bucketIndex = patternlab.bucketIndex.indexOf(bucketName);
if(bucketIndex === -1){
+
+ // skip underscore-prefixed files. don't create a bucket on account of an underscored pattern
+ if(isPatternExcluded(pattern)){
+ continue;
+ }
+
//add the bucket
var bucket = new of.oBucket(bucketName);
@@ -333,6 +358,11 @@ var patternlab_engine = function () {
//if it is flat - we should not add the pattern to patternPaths
if(flatPatternItem){
+ // skip underscore-prefixed files
+ if(isPatternExcluded(pattern)){
+ continue;
+ }
+
//add the navItem to patternItems
bucket.patternItems.push(navSubItem);
@@ -340,23 +370,27 @@ var patternlab_engine = function () {
addToPatternPaths(bucketName, pattern);
} else{
- //check to see if navItem exists
- var navItemIndex = bucket.navItemsIndex.indexOf(navItemName);
- if(navItemIndex === -1){
-
- var navItem = new of.oNavItem(navItemName);
-
- //add the navItem and navSubItem
- navItem.navSubItems.push(navSubItem);
- navItem.navSubItemsIndex.push(navSubItemName);
- bucket.navItems.push(navItem);
- bucket.navItemsIndex.push(navItemName);
-
- } else{
- //add the navSubItem
- var navItem = bucket.navItems[navItemIndex];
- navItem.navSubItems.push(navSubItem);
- navItem.navSubItemsIndex.push(navSubItemName);
+
+ // only do this if pattern is included
+ if(!isPatternExcluded(pattern)){
+ //check to see if navItem exists
+ var navItemIndex = bucket.navItemsIndex.indexOf(navItemName);
+ if(navItemIndex === -1){
+
+ var navItem = new of.oNavItem(navItemName);
+
+ //add the navItem and navSubItem
+ navItem.navSubItems.push(navSubItem);
+ navItem.navSubItemsIndex.push(navSubItemName);
+ bucket.navItems.push(navItem);
+ bucket.navItemsIndex.push(navItemName);
+
+ } else{
+ //add the navSubItem
+ var navItem = bucket.navItems[navItemIndex];
+ navItem.navSubItems.push(navSubItem);
+ navItem.navSubItemsIndex.push(navSubItemName);
+ }
}
//add the navViewAllSubItem
@@ -383,20 +417,20 @@ var patternlab_engine = function () {
//the patternlab site requires a lot of partials to be rendered.
//patternNav
- var patternNavTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternNav.mustache', 'utf8');
+ var patternNavTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'partials/patternNav.mustache'), 'utf8');
var patternNavPartialHtml = pattern_assembler.renderPattern(patternNavTemplate, patternlab);
//ishControls
- var ishControlsTemplate = fs.readFileSync('./source/_patternlab-files/partials/ishControls.mustache', 'utf8');
+ var ishControlsTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'partials/ishControls.mustache'), 'utf8');
patternlab.config.mqs = patternlab.mediaQueries;
var ishControlsPartialHtml = pattern_assembler.renderPattern(ishControlsTemplate, patternlab.config);
//patternPaths
- var patternPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/patternPaths.mustache', 'utf8');
+ var patternPathsTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'partials/patternPaths.mustache'), 'utf8');
var patternPathsPartialHtml = pattern_assembler.renderPattern(patternPathsTemplate, {'patternPaths': JSON.stringify(patternlab.patternPaths)});
//viewAllPaths
- var viewAllPathsTemplate = fs.readFileSync('./source/_patternlab-files/partials/viewAllPaths.mustache', 'utf8');
+ var viewAllPathsTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'partials/viewAllPaths.mustache'), 'utf8');
var viewAllPathsPartialHtml = pattern_assembler.renderPattern(viewAllPathsTemplate, {'viewallpaths': JSON.stringify(patternlab.viewAllPaths)});
//render the patternlab template, with all partials
@@ -406,7 +440,7 @@ var patternlab_engine = function () {
'patternPaths': patternPathsPartialHtml,
'viewAllPaths': viewAllPathsPartialHtml
});
- fs.outputFileSync('./public/index.html', patternlabSiteHtml);
+ fs.outputFileSync(path.resolve(paths.public.root, 'index.html'), patternlabSiteHtml);
}
function addToPatternPaths(bucketName, pattern){
@@ -414,6 +448,12 @@ var patternlab_engine = function () {
patternlab.patternPaths[bucketName][pattern.patternName] = pattern.subdir.replace(/\\/g, '/') + "/" + pattern.fileName;
}
+ //todo: refactor this as a method on the pattern object itself once we merge dev with pattern-engines branch
+ function isPatternExcluded(pattern){
+ // returns whether or not the first character of the pattern filename is an underscore, or excluded
+ return pattern.fileName.charAt(0) === '_';
+ }
+
return {
version: function(){
return getVersion();
diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js
index f56e58074..5d1f1c6bb 100644
--- a/builder/patternlab_grunt.js
+++ b/builder/patternlab_grunt.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
diff --git a/builder/patternlab_gulp.js b/builder/patternlab_gulp.js
index e20e1e1a7..71789185f 100644
--- a/builder/patternlab_gulp.js
+++ b/builder/patternlab_gulp.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -21,16 +21,16 @@ module.exports = function(gulp) {
gulp.task('patternlab:version', function(){
var patternlab = patternlab_engine();
patternlab.version();
- })
+ });
gulp.task('patternlab:only_patterns', ['clean'], function(){
var patternlab = patternlab_engine();
patternlab.build_patterns_only(false);
- })
+ });
gulp.task('patternlab:help', function(){
var patternlab = patternlab_engine();
patternlab.help();
- })
+ });
-}
+};
diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js
index 0969c7ac1..80465eef4 100644
--- a/builder/pseudopattern_hunter.js
+++ b/builder/pseudopattern_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -20,15 +20,16 @@
pa = require('./pattern_assembler'),
lh = require('./lineage_hunter'),
of = require('./object_factory'),
- mustache = require('mustache');
+ path = require('path');
var pattern_assembler = new pa();
var lineage_hunter = new lh();
+ var paths = patternlab.config.paths;
//look for a pseudo pattern by checking if there is a file containing same name, with ~ in it, ending in .json
var needle = currentPattern.subdir + '/' + currentPattern.fileName + '~*.json';
var pseudoPatterns = glob.sync(needle, {
- cwd: patternlab.config.patterns.source + '/',
+ cwd: paths.source.patterns,
debug: false,
nodir: true,
});
@@ -42,13 +43,13 @@
}
//we want to do everything we normally would here, except instead read the pseudoPattern data
- var variantFileData = fs.readJSONSync(patternlab.config.patterns.source + '/' + pseudoPatterns[i]);
+ var variantFileData = fs.readJSONSync(path.resolve(paths.source.patterns, pseudoPatterns[i]));
//extend any existing data with variant data
variantFileData = pattern_assembler.merge_data(currentPattern.jsonFileData, variantFileData);
var variantName = pseudoPatterns[i].substring(pseudoPatterns[i].indexOf('~') + 1).split('.')[0];
- var variantFilePath = patternlab.config.patterns.source + '/' + currentPattern.subdir + '/' + currentPattern.fileName + '~' + variantName + '.json';
+ var variantFilePath = path.resolve(paths.source.patterns, currentPattern.subdir, currentPattern.fileName + '~' + variantName + '.json');
var variantFileName = currentPattern.fileName + '-' + variantName + '.';
var patternVariant = new of.oPattern(variantFilePath, currentPattern.subdir, variantFileName, variantFileData);
diff --git a/builder/style_modifier_hunter.js b/builder/style_modifier_hunter.js
index 8a42889bd..12ed0c79f 100644
--- a/builder/style_modifier_hunter.js
+++ b/builder/style_modifier_hunter.js
@@ -1,5 +1,5 @@
/*
- * patternlab-node - v1.0.0 - 2015
+ * patternlab-node - v1.1.0 - 2016
*
* Brian Muenzenmeyer, and the web community.
* Licensed under the MIT license.
@@ -28,6 +28,9 @@
//replace the stylemodifier placeholder with the class name
pattern.extendedTemplate = pattern.extendedTemplate.replace(/{{[ ]?styleModifier[ ]?}}/i, styleModifier);
+
+ //update the extendedTemplate in the partials object in case this pattern is consumed later
+ patternlab.partials[pattern.key] = pattern.extendedTemplate;
}
}
diff --git a/config.json b/config.json
index 9ba9f591e..0ca6ef1f0 100644
--- a/config.json
+++ b/config.json
@@ -1,8 +1,27 @@
- {
- "patterns" : {
- "source" : "./source/_patterns/",
- "public" : "./public/patterns/"
- },
+{
+ "paths" : {
+ "source" : {
+ "root": "./source/",
+ "patterns" : "./source/_patterns/",
+ "data" : "./source/_data/",
+ "styleguide" : "./core/styleguide/",
+ "patternlabFiles" : "./source/_patternlab-files/",
+ "js" : "./source/js",
+ "images" : "./source/images",
+ "fonts" : "./source/fonts",
+ "css" : "./source/css/"
+ },
+ "public" : {
+ "root" : "./public/",
+ "patterns" : "./public/patterns/",
+ "data" : "./public/data/",
+ "styleguide" : "./public/styleguide/",
+ "js" : "./public/js",
+ "images" : "./public/images",
+ "fonts" : "./public/fonts",
+ "css" : "./public/css"
+ }
+ },
"styleGuideExcludes": [
"templates",
"pages"
@@ -30,7 +49,7 @@
"tools-docs": true
},
"patternStates": {
- "homepage-emergency" : "inprogress"
+ "homepage-emergency" : "inprogress"
},
"patternExportKeys": [],
"patternExportDirectory": "./pattern_exports/",
diff --git a/core/styleguide/css/static.css b/core/styleguide/css/static.css
new file mode 100644
index 000000000..e23eaf41e
--- /dev/null
+++ b/core/styleguide/css/static.css
@@ -0,0 +1,459 @@
+@charset "UTF-8";
+/*
+colors
+red: $orange; rgb(229,24,55)
+gray: #808080;
+*/
+/************Reset**************/
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html, body, div, object, iframe, fieldset {
+ margin: 0;
+ padding: 0;
+ border: 0;
+}
+
+ol, ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+header, footer, nav, section, article, hgroup, figure {
+ display: block;
+}
+
+legend {
+ display: none;
+}
+
+/************End Reset**************/
+/************Global**************/
+body {
+ background: #fff;
+ color: #000;
+ font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
+ padding: 0;
+ -webkit-text-size-adjust: 100%;
+ border-top: 20px solid #000;
+ border-bottom: 20px solid #000;
+}
+
+a {
+ color: #808080;
+ text-decoration: none;
+}
+
+a:hover, a:focus {
+ color: #bededf;
+}
+
+p {
+ margin: 0 0 1em;
+}
+
+img, object, video {
+ max-width: 100%;
+ border: 0;
+}
+
+a img {
+ border: 0;
+ outline: 0;
+}
+
+h1 {
+ font-size: 3em;
+ line-height: 1;
+ letter-spacing: -0.02em;
+ margin-bottom: 0.2em;
+}
+
+h2 {
+ font-size: 2em;
+ line-height: 1.1;
+ margin-bottom: 0.2em;
+}
+
+h3 {
+ font-weight: normal;
+ line-height: 1.1;
+ padding-bottom: 0.4em;
+ border-bottom: 1px solid #ccc;
+}
+
+h1 a, h2 a, h3 a {
+ display: block;
+ color: #000;
+}
+
+h1 a:hover, h2 a:hover, h3 a:hover {
+ color: #bededf;
+}
+
+blockquote {
+ border-left: 0.5em solid #ddd;
+ padding-left: 1em;
+ margin-left: 1em;
+}
+
+small {
+ color: #bededf;
+}
+
+input[type=search] {
+ -webkit-appearance: none;
+ border-radius: 0;
+}
+
+::-webkit-input-placeholder {
+ color: #808080;
+}
+
+:-moz-placeholder {
+ color: #808080;
+}
+
+/************End Global**************/
+/************Classes**************/
+.inactive {
+ color: #ddd;
+}
+
+/************End Classes**************/
+/************Structure**************/
+.container {
+ max-width: 60em;
+ margin: 0 auto;
+ padding: 0 1em;
+ overflow: hidden;
+}
+
+[role=main] {
+ padding-bottom: 1em;
+}
+
+/*Footer*/
+[role=contentinfo] {
+ color: #fff;
+ background: #000;
+ margin: 0 -1em;
+ position: relative;
+ z-index: 2;
+}
+[role=contentinfo] > div {
+ max-width: 60em;
+ padding: 0 1em;
+ margin: 0 auto;
+ overflow: hidden;
+}
+
+/*End Footer*/
+/*Grid*/
+.grid {
+ margin: 0 -1em;
+ overflow: hidden;
+}
+
+.grid:target {
+ -webkit-animation: fadeout 5s 1 ease-out;
+ -moz-animation: fadeout 5s 1 ease-out;
+ -o-animation: fadeout 5s 1 ease-out;
+ animation: fadeout 5s 1 ease-out;
+}
+
+.grid > h2 {
+ margin-left: 0.45em;
+}
+
+.grid > section {
+ padding: 1em 1em 0.5em;
+}
+
+.grid > section:target {
+ -webkit-animation: fadeout 5s 1 ease-out;
+ -moz-animation: fadeout 5s 1 ease-out;
+ -o-animation: fadeout 5s 1 ease-out;
+ animation: fadeout 5s 1 ease-out;
+}
+
+.grid ul {
+ overflow: hidden;
+}
+
+.grid ul li {
+ margin-bottom: 0.3em;
+}
+
+.featured:after {
+ content: "*";
+ color: #bededf;
+}
+
+/*Fluid*/
+.fluid {
+ display: block;
+ margin: 0 auto;
+ max-width: 40em;
+}
+
+/*Homepage*/
+.home h1 {
+ margin-bottom: 0.2em;
+}
+
+.intro {
+ font-size: 1.8em;
+ line-height: 1.2;
+ margin: 0 auto;
+}
+
+.intro a:hover, .intro a:focus {
+ color: #000;
+ border-bottom-color: #000;
+}
+
+.ani {
+ position: relative;
+ height: 15em;
+ margin: 1em 0 0;
+ width: 100%;
+ z-index: 0;
+}
+
+.ani div {
+ width: 100%;
+}
+
+.ani div b {
+ display: block;
+ position: absolute;
+ top: 5%;
+ right: 5%;
+ bottom: 5%;
+ left: 5%;
+ background: rgba(229, 24, 55, 0.22);
+}
+
+/*Patterns*/
+.mod {
+ padding: 1em;
+}
+
+.pattern {
+ background: #f7f7f7;
+ border-bottom: 1px solid #808080;
+ margin-bottom: 1em;
+ overflow: hidden;
+}
+
+.pattern-description h1 {
+ font-size: 3.4em;
+ margin-bottom: 0.5em;
+}
+
+.pattern-description {
+ max-width: 40em;
+ margin: 0 auto;
+}
+
+.pattern-description ul, .pattern-description ol {
+ margin-bottom: 2em;
+}
+
+.pattern-description li {
+ margin-bottom: 1em;
+}
+
+/*Blog*/
+/*Blog Header*/
+.blog .container {
+ max-width: 62em;
+}
+
+.blog header[role=banner] {
+ overflow: hidden;
+ margin-bottom: 2em;
+ padding: 2em 0 1em;
+ border-bottom: 1px solid #000;
+}
+
+.blog-logo {
+ font-weight: normal;
+ font-size: 1.2em;
+ margin: 0 0 1em;
+}
+
+.blog-logo img {
+ width: 3.3em;
+}
+
+.blog-logo a {
+ color: #000;
+}
+
+.search-form {
+ width: 100%;
+ margin-bottom: 1em;
+}
+
+.search-field {
+ width: 100%;
+ padding: 0.5em 0;
+ border: 0;
+ border-bottom: 1px solid #808080;
+ outline: none;
+}
+
+.search-field:focus {
+ background: #bededf;
+ color: #fff;
+}
+
+.search-field:focus::-webkit-input-placeholder {
+ color: #fff;
+}
+
+.search-field:focus :-moz-placeholder {
+ color: #fff;
+}
+
+.blog .nav {
+ clear: both;
+}
+
+.blog .nav a {
+ display: block;
+ font-weight: bold;
+ color: #000;
+}
+
+.blog .nav a:hover {
+ color: #bededf;
+}
+
+/*Posts*/
+.posts ol > li {
+ padding-bottom: 1em;
+ border-bottom: 1px solid #ccc;
+ margin-bottom: 1em;
+ overflow: hidden;
+}
+
+.posts h2 {
+ font-size: 1.4em;
+ margin: 0.28em 0 0.1em;
+ font-weight: normal;
+}
+
+.posts h2 a {
+ color: #000;
+}
+
+.posts h2 a:hover, .posts h2 a:focus {
+ color: #bededf;
+}
+
+.permalink {
+ display: block;
+ font-size: 0.8em;
+ margin-bottom: 1.2em;
+}
+
+.post-body a {
+ border-bottom: 1px solid #ccc;
+}
+
+.posts blockquote {
+ margin: 0 0 1em;
+ color: #666;
+ border-left: 0.25em solid #ccc;
+ padding-left: 1em;
+}
+
+.tags {
+ float: left;
+}
+
+.tags li {
+ display: inline-block;
+ font-size: 0.8em;
+ margin-right: 0.5em;
+}
+
+.posts ol > li .tags a, .permalink {
+ color: #ccc;
+ -webkit-transition: color 0.3s ease-out;
+ -moz-transition: color 0.3s ease-out;
+ -ms-transition: color 0.3s ease-out;
+ -o-transition: color 0.3s ease-out;
+ transition: color 0.3s ease-out;
+}
+
+.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
+ color: #808080;
+}
+
+.blog-nav {
+ text-align: center;
+ overflow: hidden;
+ padding: 1em 0;
+}
+
+.posts .blog-nav a {
+ border: 0;
+}
+
+.nav-next {
+ float: right;
+}
+
+.nav-prev {
+ float: left;
+}
+
+/* Sidebar */
+.sidebar {
+ font-size: 0.8em;
+ padding-bottom: 1.4em;
+}
+
+.sidebar div {
+ margin-bottom: 2em;
+}
+
+.sidebar h3 {
+ font-weight: bold;
+ font-size: 0.9em;
+ line-height: 1;
+ border-bottom: 1px solid #000;
+}
+
+.sidebar a {
+ color: #808080;
+}
+
+.sidebar a:hover, .sidebar a:focus {
+ color: #bededf;
+}
+
+.top {
+ clear: both;
+ display: block;
+ padding: 1em 0;
+}
+
+.top:before {
+ content: 'Γû▓';
+}
+
+/*# sourceMappingURL=static.css.map */
diff --git a/core/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css
new file mode 100644
index 000000000..3be158e1a
--- /dev/null
+++ b/core/styleguide/css/styleguide-specific.css
@@ -0,0 +1,101 @@
+/*------------------------------------*\
+ $PATTERN LAB-SPECIFIC STYLES
+\*------------------------------------*/
+/**
+ * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
+ * This is helpful for displaying demo styles for grids, animations, color swatches, etc
+ * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
+ * These styles will not be your production CSS.
+ */
+/* Style Guide Interface Colors */
+/* Typography */
+/* Defaults */
+/* Dimensions */
+/* Breakpoints */
+.demo {
+ overflow: hidden;
+ margin-bottom: 1rem;
+}
+
+.demo .gi, .demo .demo-block {
+ background: #ddd;
+ color: #808080;
+ text-align: center;
+ margin-bottom: 0.5em;
+ padding: 1em !important;
+}
+.demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
+ color: #ddd;
+ background: #808080;
+}
+.demo .gi .gi, .demo .demo-block .gi {
+ background: rgba(0, 0, 0, 0.1);
+ color: #ddd;
+}
+.demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
+ background: rgba(0, 0, 0, 0.3);
+}
+
+.demo-animate {
+ background: #ddd;
+ padding: 1em;
+ margin-bottom: 1em;
+ text-align: center;
+}
+
+.animate-move {
+ position: relative;
+}
+.animate-move .demo-shape {
+ position: absolute;
+ top: 0;
+ left: 0;
+ bottom: 0;
+ width: 20px;
+ background: #808080;
+}
+.animate-move:hover > .demo-shape {
+ left: 100%;
+ margin-left: -20px;
+}
+
+.sg-colors {
+ overflow: hidden;
+}
+.sg-colors li {
+ overflow: hidden;
+ border: 1px solid #ddd;
+ padding: 0.3em;
+ margin: 0 0.2em 0.2em 0;
+}
+@media all and (min-width: 30em) {
+ .sg-colors li {
+ float: left;
+ width: 5em;
+ }
+}
+
+.sg-swatch {
+ display: block;
+ height: 1.5em;
+ width: 50%;
+}
+@media all and (max-width: 30em) {
+ .sg-swatch {
+ float: left;
+ margin-right: 0.3em;
+ }
+}
+@media all and (min-width: 30em) {
+ .sg-swatch {
+ width: 100%;
+ height: 4em;
+ margin-bottom: 0.2em;
+ }
+}
+
+.sg-label {
+ line-height: 1;
+}
+
+/*# sourceMappingURL=styleguide-specific.css.map */
diff --git a/public/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css
similarity index 54%
rename from public/styleguide/css/styleguide.css
rename to core/styleguide/css/styleguide.css
index 459a602d7..c7c2b48ae 100644
--- a/public/styleguide/css/styleguide.css
+++ b/core/styleguide/css/styleguide.css
@@ -52,12 +52,14 @@
#patternlab-html, #patternlab-body {
margin: 0;
padding: 0;
- background: #dddddd;
- -webkit-text-size-adjust: 100%; }
+ background: #ddd;
+ -webkit-text-size-adjust: 100%;
+}
.sg-nav-wrapper {
overflow: hidden;
- background: #dddddd; }
+ background: #ddd;
+}
.is-vishidden {
position: absolute !important;
@@ -66,78 +68,93 @@
height: 1px;
padding: 0;
border: 0;
- clip: rect(1px, 1px, 1px, 1px); }
+ clip: rect(1px, 1px, 1px, 1px);
+}
.sg-cf, .sg-pattern {
- /**zoom: 1;*/ }
- .sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
- content: " ";
- display: table; }
- .sg-cf:after, .sg-pattern:after {
- clear: both; }
+ /**zoom: 1;*/
+}
+.sg-cf:before, .sg-pattern:before, .sg-cf:after, .sg-pattern:after {
+ content: " ";
+ display: table;
+}
+.sg-cf:after, .sg-pattern:after {
+ clear: both;
+}
/*------------------------------------*\
$PATTERN LAB HEADER
\*------------------------------------*/
/* Header */
.sg-header {
- background: #222222;
- color: white;
+ background: #222;
+ color: #fff;
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
text-transform: uppercase;
position: fixed;
top: 0;
left: 0;
z-index: 2;
- width: 100%; }
- .sg-header * {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box; }
- .sg-header ul, .sg-header ol {
- padding: 0;
- margin: 0; }
- .sg-header li {
- list-style: none;
- border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
- .sg-header a {
- font-size: 70%;
- color: gray;
- text-decoration: none;
- display: block;
- line-height: 1;
- padding: 1em;
- -webkit-transition: background 0.15s ease-out;
- -moz-transition: background 0.15s ease-out;
- -ms-transition: background 0.15s ease-out;
- -o-transition: background 0.15s ease-out;
- transition: background 0.15s ease-out;
- -webkit-transition: color 0.15s ease-out;
- -moz-transition: color 0.15s ease-out;
- -ms-transition: color 0.15s ease-out;
- -o-transition: color 0.15s ease-out;
- transition: color 0.15s ease-out; }
- .sg-header a:hover, .sg-header a:focus, .sg-header a.active {
- color: white;
- background: rgba(255, 255, 255, 0.05); }
- .sg-header ol ol ol a {
- padding-left: 2em;
- text-transform: none; }
+ width: 100%;
+}
+.sg-header * {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+}
+.sg-header ul, .sg-header ol {
+ padding: 0;
+ margin: 0;
+}
+.sg-header li {
+ list-style: none;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+.sg-header a {
+ font-size: 70%;
+ color: #808080;
+ text-decoration: none;
+ display: block;
+ line-height: 1;
+ padding: 1em;
+ -webkit-transition: background 0.15s ease-out;
+ -moz-transition: background 0.15s ease-out;
+ -ms-transition: background 0.15s ease-out;
+ -o-transition: background 0.15s ease-out;
+ transition: background 0.15s ease-out;
+ -webkit-transition: color 0.15s ease-out;
+ -moz-transition: color 0.15s ease-out;
+ -ms-transition: color 0.15s ease-out;
+ -o-transition: color 0.15s ease-out;
+ transition: color 0.15s ease-out;
+}
+.sg-header a:hover, .sg-header a:focus, .sg-header a.active {
+ color: #fff;
+ background: rgba(255, 255, 255, 0.05);
+}
+.sg-header ol ol ol a {
+ padding-left: 2em;
+ text-transform: none;
+}
/* Navigation */
.sg-header .sg-nav-toggle {
display: inline-block;
padding: 0.9em 1em;
- border-bottom: 1px solid rgba(0, 0, 0, 0);
+ border-bottom: 1px solid transparent;
position: relative;
text-transform: uppercase;
- z-index: 2; }
- .sg-header .sg-nav-toggle span {
- display: inline-block;
- padding-right: 0.2em; }
- @media all and (min-width: 48em) {
- .sg-header .sg-nav-toggle {
- display: none; } }
+ z-index: 2;
+}
+.sg-header .sg-nav-toggle span {
+ display: inline-block;
+ padding-right: 0.2em;
+}
+@media all and (min-width: 48em) {
+ .sg-header .sg-nav-toggle {
+ display: none;
+ }
+}
@media all and (max-width: 48em) {
.sg-nav-container {
@@ -147,48 +164,63 @@
-moz-transition: max-height 0.1s ease-out;
-ms-transition: max-height 0.1s ease-out;
-o-transition: max-height 0.1s ease-out;
- transition: max-height 0.1s ease-out; }
- .sg-nav-container.active {
- max-height: 50em; } }
+ transition: max-height 0.1s ease-out;
+ }
+ .sg-nav-container.active {
+ max-height: 50em;
+ }
+}
.sg-nav {
z-index: 1;
margin: 0;
padding: 0;
- list-style: none; }
+ list-style: none;
+}
+.sg-nav > li {
+ cursor: pointer;
+}
+@media all and (min-width: 48em) {
.sg-nav > li {
- cursor: pointer; }
- @media all and (min-width: 48em) {
- .sg-nav > li {
- border-bottom: 0;
- border-right: 1px solid rgba(255, 255, 255, 0.05);
- float: left;
- position: relative; }
- .sg-nav > li > ol {
- position: absolute;
- top: 2em;
- left: 0; } }
+ border-bottom: 0;
+ border-right: 1px solid rgba(255, 255, 255, 0.05);
+ float: left;
+ position: relative;
+ }
+ .sg-nav > li > ol {
+ position: absolute;
+ top: 2em;
+ left: 0;
+ }
+}
/* Accordion */
.sg-acc-handle:after {
content: ' +';
float: right;
- font-size: 70%; }
- @media all and (min-width: 48em) {
- .sg-acc-handle:after {
- float: none; } }
+ font-size: 70%;
+}
+@media all and (min-width: 48em) {
+ .sg-acc-handle:after {
+ float: none;
+ }
+}
.sg-acc-handle.active {
- color: white;
- background: rgba(255, 255, 255, 0.05); }
- .sg-acc-handle.active:after {
- content: ' -'; }
+ color: #fff;
+ background: rgba(255, 255, 255, 0.05);
+}
+.sg-acc-handle.active:after {
+ content: ' -';
+}
.sg-acc-handle.sg-icon:after {
- content: ""; }
+ content: "";
+}
.sg-header .sg-icon {
width: auto;
font-size: 1rem;
- padding: 0.5rem 1rem; }
+ padding: 0.5rem 1rem;
+}
.sg-acc-panel {
overflow: hidden;
@@ -198,22 +230,28 @@
-moz-transition: max-height 0.1s ease-out;
-ms-transition: max-height 0.1s ease-out;
-o-transition: max-height 0.1s ease-out;
- transition: max-height 0.1s ease-out; }
- .sg-acc-panel li {
- background: #222222; }
- .sg-acc-panel.active {
- max-height: 120em;
- overflow: auto; }
- .sg-acc-panel.sg-right {
- position: absolute;
- left: auto;
- right: 0; }
- .sg-acc-panel.sg-left {
- position: absolute;
- left: auto; }
- .sg-acc-panel [class^="sg-icon-"]:before {
- display: inline-block;
- margin-right: 0.4em; }
+ transition: max-height 0.1s ease-out;
+}
+.sg-acc-panel li {
+ background: #222;
+}
+.sg-acc-panel.active {
+ max-height: 120em;
+ overflow: auto;
+}
+.sg-acc-panel.sg-right {
+ position: absolute;
+ left: auto;
+ right: 0;
+}
+.sg-acc-panel.sg-left {
+ position: absolute;
+ left: auto;
+}
+.sg-acc-panel [class^="sg-icon-"]:before {
+ display: inline-block;
+ margin-right: 0.4em;
+}
/* Controls (sizing, view mode) */
.sg-controls {
@@ -221,74 +259,99 @@
position: absolute;
top: 0;
right: 0;
- z-index: 2; }
+ z-index: 2;
+}
.sg-control-trigger {
- border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
- @media all and (min-width: 48em) {
- .sg-control-trigger {
- border: 0; } }
- @media all and (min-width: 72em) {
- .sg-control-trigger {
- float: left;
- width: 6em; } }
+ border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+}
+@media all and (min-width: 48em) {
+ .sg-control-trigger {
+ border: 0;
+ }
+}
+@media all and (min-width: 72em) {
+ .sg-control-trigger {
+ float: left;
+ width: 6em;
+ }
+}
.sg-control > li {
- float: left; }
- @media all and (min-width: 48em) {
- .sg-control > li {
- border-bottom: 0;
- border-left: 1px solid rgba(255, 255, 255, 0.05); } }
+ float: left;
+}
+@media all and (min-width: 48em) {
+ .sg-control > li {
+ border-bottom: 0;
+ border-left: 1px solid rgba(255, 255, 255, 0.05);
+ }
+}
.sg-control .sg-input {
padding: 0.1em;
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out; }
- .sg-control .sg-input:active, .sg-control .sg-input:focus {
- outline: 0;
- background: #999999;
- color: #000; }
+ transition: all 0.2s ease-out;
+}
+.sg-control .sg-input:active, .sg-control .sg-input:focus {
+ outline: 0;
+ background: #999;
+ color: #000;
+}
.sg-current-size {
font-size: 70%;
- color: gray;
- padding: 0.85em 0.7em; }
- .sg-current-size:hover .sg-input {
- background: #999999;
- color: #000; }
- @media all and (min-width: 72em) {
- .sg-current-size {
- float: left; } }
+ color: #808080;
+ padding: 0.85em 0.7em;
+}
+.sg-current-size:hover .sg-input {
+ background: #999;
+ color: #000;
+}
+@media all and (min-width: 72em) {
+ .sg-current-size {
+ float: left;
+ }
+}
.sg-size {
- width: 135px; }
- @media all and (min-width: 48em) {
- .sg-size {
- width: auto; } }
+ width: 135px;
+}
+@media all and (min-width: 48em) {
+ .sg-size {
+ width: auto;
+ }
+}
@media all and (min-width: 72em) {
.sg-size-options {
float: left;
position: static;
max-height: none;
- max-width: none; }
- .sg-size-options > li {
- float: left;
- border: 0;
- border-left: 1px solid rgba(255, 255, 255, 0.05); } }
+ max-width: none;
+ }
+ .sg-size-options > li {
+ float: left;
+ border: 0;
+ border-left: 1px solid rgba(255, 255, 255, 0.05);
+ }
+}
#sg-size-mq {
- display: none; }
- @media all and (min-width: 72em) {
- #sg-size-mq {
- display: block; } }
+ display: none;
+}
+@media all and (min-width: 72em) {
+ #sg-size-mq {
+ display: block;
+ }
+}
#sg-form {
margin: 0;
border: 0;
- padding: 0; }
+ padding: 0;
+}
.sg-input {
margin: -2px 0 0 0;
@@ -297,25 +360,32 @@
background-color: #222;
color: gray;
width: 25px;
- text-align: right; }
- @media all and (min-width: 48em) {
- .sg-input {
- width: 35px; } }
+ text-align: right;
+}
+@media all and (min-width: 48em) {
+ .sg-input {
+ width: 35px;
+ }
+}
.sg-input-active {
background-color: #fff;
- color: #000; }
+ color: #000;
+}
.sg-view {
- position: relative; }
- .sg-view > ul {
- position: absolute;
- top: 2em;
- left: 0; }
+ position: relative;
+}
+.sg-view > ul {
+ position: absolute;
+ top: 2em;
+ left: 0;
+}
.sg-checkbox:before {
display: inline-block;
- margin-right: 0.4em; }
+ margin-right: 0.4em;
+}
/* basic styling */
.sg-pattern-state:before {
@@ -324,7 +394,8 @@
display: inline-block;
margin-bottom: -4px;
font-size: 18px;
- vertical-align: bottom; }
+ vertical-align: bottom;
+}
/* nav styling */
.sg-nav .sg-pattern-state:before {
@@ -333,29 +404,36 @@
margin-left: -4px;
height: 20px;
display: block;
- float: left; }
+ float: left;
+}
.sg-sub-nav .sg-pattern-state:before {
margin-left: -11px;
- margin-right: 4px; }
+ margin-right: 4px;
+}
/* call out for pattern's pattern state */
span.sg-pattern-state {
- color: #999; }
+ color: #999;
+}
span.sg-pattern-state:before {
margin-bottom: -3px;
- margin-left: 4px; }
+ margin-left: 4px;
+}
/* pattern states */
.inprogress:before {
- color: #FF4136 !important; }
+ color: #FF4136 !important;
+}
.inreview:before {
- color: #FFCC00 !important; }
+ color: #FFCC00 !important;
+}
.complete:before {
- color: #2ECC40 !important; }
+ color: #2ECC40 !important;
+}
/*------------------------------------*\
$PATTERN LAB VIEWPORT
@@ -369,13 +447,15 @@ span.sg-pattern-state:before {
bottom: 0;
left: 0;
right: 0;
- z-index: 0; }
- #sg-vp-wrap.wrap-animate {
- -webkit-transition: left 0.3s ease-out;
- -moz-transition: left 0.3s ease-out;
- -ms-transition: left 0.3s ease-out;
- -o-transition: left 0.3s ease-out;
- transition: left 0.3s ease-out; }
+ z-index: 0;
+}
+#sg-vp-wrap.wrap-animate {
+ -webkit-transition: left 0.3s ease-out;
+ -moz-transition: left 0.3s ease-out;
+ -ms-transition: left 0.3s ease-out;
+ -o-transition: left 0.3s ease-out;
+ transition: left 0.3s ease-out;
+}
#sg-viewport {
position: absolute;
@@ -388,18 +468,22 @@ span.sg-pattern-state:before {
bottom: 0;
left: 0;
right: 0;
- background-color: white; }
- #sg-viewport.hay-mode {
- -webkit-transition: all 40s linear;
- -moz-transition: all 40s linear;
- -ms-transition: all 40s linear;
- -o-transition: all 40s linear;
- transition: all 40s linear; }
+ background-color: white;
+}
+#sg-viewport.hay-mode {
+ -webkit-transition: all 40s linear;
+ -moz-transition: all 40s linear;
+ -ms-transition: all 40s linear;
+ -o-transition: all 40s linear;
+ transition: all 40s linear;
+}
.no-resize #sg-cover, .no-resize #sg-rightpull-container {
- display: none; }
+ display: none;
+}
.no-resize #sg-viewport {
- overflow: hidden !important; }
+ overflow: hidden !important;
+}
#sg-cover {
width: 100%;
@@ -407,7 +491,8 @@ span.sg-pattern-state:before {
display: none;
position: absolute;
z-index: 20;
- cursor: col-resize; }
+ cursor: col-resize;
+}
#sg-gen-container {
height: 100%;
@@ -416,20 +501,23 @@ span.sg-pattern-state:before {
margin: 0 auto;
-webkit-overflow-scrolling: touch;
overflow-y: auto;
- overflow-x: hidden; }
- #sg-gen-container.hay-mode {
- -webkit-transition: all 40s linear;
- -moz-transition: all 40s linear;
- -ms-transition: all 40s linear;
- -o-transition: all 40s linear;
- transition: all 40s linear; }
+ overflow-x: hidden;
+}
+#sg-gen-container.hay-mode {
+ -webkit-transition: all 40s linear;
+ -moz-transition: all 40s linear;
+ -ms-transition: all 40s linear;
+ -o-transition: all 40s linear;
+ transition: all 40s linear;
+}
#sg-rightpull-container {
width: 14px;
float: right;
margin: 0;
height: 100%;
- cursor: col-resize; }
+ cursor: col-resize;
+}
#sg-rightpull {
margin: 0;
@@ -440,19 +528,23 @@ span.sg-pattern-state:before {
-moz-transition: background 0.2s ease-out;
-ms-transition: background 0.2s ease-out;
-o-transition: background 0.2s ease-out;
- transition: background 0.2s ease-out; }
- #sg-rightpull:hover {
- background: #666; }
- #sg-rightpull:active {
- cursor: col-resize;
- background: #444; }
+ transition: background 0.2s ease-out;
+}
+#sg-rightpull:hover {
+ background: #666;
+}
+#sg-rightpull:active {
+ cursor: col-resize;
+ background: #444;
+}
.vp-animate {
-webkit-transition: width 0.8s ease-out;
-moz-transition: width 0.8s ease-out;
-ms-transition: width 0.8s ease-out;
-o-transition: width 0.8s ease-out;
- transition: width 0.8s ease-out; }
+ transition: width 0.8s ease-out;
+}
/*------------------------------------*\
$PATTERN LAB CONTENT
@@ -460,7 +552,8 @@ span.sg-pattern-state:before {
/* Section Pattern */
.sg-pattern {
margin-bottom: 2em;
- position: relative; }
+ position: relative;
+}
/* Section Head */
.sg-pattern-head {
@@ -469,14 +562,17 @@ span.sg-pattern-state:before {
font-size: 70%;
font-weight: normal;
padding: 1em 0;
- border-bottom: 1px solid gray; }
- .sg-pattern-head a {
- display: block;
- color: gray;
- text-decoration: none;
- cursor: pointer; }
- .sg-pattern-head a:hover {
- color: #222222; }
+ border-bottom: 1px solid #808080;
+}
+.sg-pattern-head a {
+ display: block;
+ color: #808080;
+ text-decoration: none;
+ cursor: pointer;
+}
+.sg-pattern-head a:hover {
+ color: #222;
+}
.sg-view-container {
-moz-box-sizing: border-box;
@@ -485,8 +581,8 @@ span.sg-pattern-state:before {
font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
line-height: 1.4;
font-size: 90%;
- background: #222222;
- color: gray;
+ background: #222;
+ color: #808080;
position: fixed;
top: auto;
padding: 1em;
@@ -496,39 +592,49 @@ span.sg-pattern-state:before {
width: 100%;
height: 50%;
overflow-y: auto;
- overflow-x: hidden; }
- .sg-view-container a {
- color: #999999; }
- .sg-view-container pre {
- padding: 0 1em; }
- .sg-view-container.anim-ready {
- -webkit-transition: bottom 0.3s ease-out;
- -moz-transition: bottom 0.3s ease-out;
- -webkit-transition: bottom 0.3s ease-out;
- -ms-transition: bottom 0.3s ease-out;
- -o-transition: bottom 0.3s ease-out;
- transition: bottom 0.3s ease-out; }
+ overflow-x: hidden;
+}
+.sg-view-container a {
+ color: #999;
+}
+.sg-view-container pre {
+ padding: 0 1em;
+}
+.sg-view-container.anim-ready {
+ -webkit-transition: bottom 0.3s ease-out;
+ -moz-transition: bottom 0.3s ease-out;
+ -webkit-transition: bottom 0.3s ease-out;
+ -ms-transition: bottom 0.3s ease-out;
+ -o-transition: bottom 0.3s ease-out;
+ transition: bottom 0.3s ease-out;
+}
.sg-view-close {
width: 100%;
- margin-bottom: -10px; }
+ margin-bottom: -10px;
+}
.sg-view-close-btn {
color: #fff;
text-transform: uppercase;
text-decoration: none;
text-align: right;
- display: block; }
+ display: block;
+}
.has-annotation {
cursor: help !important;
- box-shadow: 0 0 10px gray; }
- .has-annotation a, .has-annotation input {
- cursor: help !important; }
- .has-annotation:hover {
- box-shadow: 0 0 10px #222222; }
- .has-annotation.active {
- box-shadow: inset 0 0 20px gray; }
+ box-shadow: 0 0 10px #808080;
+}
+.has-annotation a, .has-annotation input {
+ cursor: help !important;
+}
+.has-annotation:hover {
+ box-shadow: 0 0 10px #222;
+}
+.has-annotation.active {
+ box-shadow: inset 0 0 20px #808080;
+}
.annotation-tip {
display: block;
@@ -543,29 +649,36 @@ span.sg-pattern-state:before {
color: #fff !important;
font-weight: bold !important;
font-size: 16px !important;
- z-index: 100; }
+ z-index: 100;
+}
#sg-comments-container {
max-width: 60em;
- margin: 0 auto; }
+ margin: 0 auto;
+}
.sg-comment-container {
padding-bottom: 2em;
margin-bottom: 1em;
- border-bottom: 1px solid rgba(255, 255, 255, 0.25); }
- .sg-comment-container p:last-child {
- margin-bottom: 0; }
- .sg-comment-container h2 {
- margin-bottom: 0.25em; }
+ border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+}
+.sg-comment-container p:last-child {
+ margin-bottom: 0;
+}
+.sg-comment-container h2 {
+ margin-bottom: 0.25em;
+}
.sg-code, .sg-annotations {
clear: both;
- background: #dddddd;
- color: #222222;
+ background: #ddd;
+ color: #222;
padding: 1em 0.5em;
- margin: 1em 0; }
- .sg-code a, .sg-annotations a {
- text-decoration: underline; }
+ margin: 1em 0;
+}
+.sg-code a, .sg-annotations a {
+ text-decoration: underline;
+}
.sg-code pre {
white-space: -moz-pre-line;
@@ -574,30 +687,36 @@ span.sg-pattern-state:before {
word-wrap: break-word;
white-space: pre-line;
border: 1px solid rgba(0, 0, 0, 0.1);
- padding: 0.5em; }
+ padding: 0.5em;
+}
.sg-code-contains {
margin-bottom: 1rem;
font-size: 85%;
- color: gray; }
- .sg-code-contains code {
- padding: 0.2em;
- background: rgba(0, 0, 0, 0.3);
- color: #999999;
- position: relative;
- top: -2px; }
+ color: #808080;
+}
+.sg-code-contains code {
+ padding: 0.2em;
+ background: rgba(0, 0, 0, 0.3);
+ color: #999;
+ position: relative;
+ top: -2px;
+}
.sg-code-head {
- color: gray;
- font-size: 1em; }
+ color: #808080;
+ font-size: 1em;
+}
#sg-code-markup {
- padding-top: 10px; }
+ padding-top: 10px;
+}
#sg-code-tabs {
list-style: none;
margin: 0;
- padding: 0; }
+ padding: 0;
+}
#sg-code-tabs li {
float: left;
@@ -607,17 +726,21 @@ span.sg-pattern-state:before {
padding: 5px 15px;
border-top: 2px solid #666;
margin-right: 2px;
- cursor: pointer; }
+ cursor: pointer;
+}
.sg-code-title-active {
color: #bbb;
- background-color: #272822 !important; }
+ background-color: #272822 !important;
+}
div.clear {
- clear: both; }
+ clear: both;
+}
.sg-code-patternname {
- color: #aaa; }
+ color: #aaa;
+}
#sg-code-loader {
display: none;
@@ -629,7 +752,8 @@ div.clear {
text-align: center;
border-radius: 10px;
background-color: #000;
- z-index: 100; }
+ z-index: 100;
+}
.spinner {
height: 30px;
@@ -640,16 +764,17 @@ div.clear {
background-repeat: no-repeat;
background: url("../images/spinner.gif");
border-radius: 50%;
- opacity: .7; }
+ opacity: .7;
+}
/* Pattern Lab icon fonts */
@font-face {
font-family: 'icomoon';
- src: url("../fonts/icomoon.eot");
- src: url("../fonts/icomoon.eot") format("embedded-opentype"), url("../fonts/icomoon.woff") format("woff"), url("../fonts/icomoon.ttf") format("truetype"), url("../fonts/icomoon.svg") format("svg");
+ src: url("../fonts/icomoon.eot?srsv7g");
+ src: url("../fonts/icomoon.eot?#iefixsrsv7g") format("embedded-opentype"), url("../fonts/icomoon.woff?srsv7g") format("woff"), url("../fonts/icomoon.ttf?srsv7g") format("truetype"), url("../fonts/icomoon.svg?srsv7g#icomoon") format("svg");
font-weight: normal;
- font-style: normal; }
-
+ font-style: normal;
+}
.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-checkbox.active, .sg-icon-radio-unchecked, .sg-checkbox, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
font-family: 'icomoon';
speak: none;
@@ -660,44 +785,59 @@ div.clear {
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale; }
+ -moz-osx-font-smoothing: grayscale;
+}
.sg-icon-search:before {
content: "\e600";
- font-size: 85%; }
+ font-size: 85%;
+}
.sg-icon-cog:before {
- content: "\e601"; }
+ content: "\e601";
+}
.sg-icon-minus:before {
- content: "\e602"; }
+ content: "\e602";
+}
.sg-icon-plus:before {
- content: "\e603"; }
+ content: "\e603";
+}
.sg-icon-menu:before {
- content: "\e604"; }
+ content: "\e604";
+}
.sg-icon-radio-checked:before, .sg-checkbox.active:before, .sg-checkbox.active:before {
- content: "\e605"; }
+ content: "\e605";
+}
.sg-icon-radio-unchecked:before, .sg-checkbox:before, .sg-checkbox:before {
- content: "\e606"; }
+ content: "\e606";
+}
.sg-icon-file:before {
- content: "\e607"; }
+ content: "\e607";
+}
.sg-icon-link:before {
- content: "\e608"; }
+ content: "\e608";
+}
.sg-icon-keyboard:before {
- content: "\e609"; }
+ content: "\e609";
+}
.sg-icon-qrcode:before {
- content: "\e60a"; }
+ content: "\e60a";
+}
.sg-icon-eye:before {
- content: "\e60b"; }
+ content: "\e60b";
+}
/******************************************************************/
-/* End Pattern Lab Interface code */
\ No newline at end of file
+/* End Pattern Lab Interface code */
+
+/*# sourceMappingURL=styleguide.css.map */
diff --git a/public/styleguide/css/vendor/prism.css b/core/styleguide/css/vendor/prism.css
similarity index 100%
rename from public/styleguide/css/vendor/prism.css
rename to core/styleguide/css/vendor/prism.css
diff --git a/public/styleguide/css/vendor/typeahead.css b/core/styleguide/css/vendor/typeahead.css
similarity index 100%
rename from public/styleguide/css/vendor/typeahead.css
rename to core/styleguide/css/vendor/typeahead.css
diff --git a/public/styleguide/fonts/icomoon.eot b/core/styleguide/fonts/icomoon.eot
similarity index 100%
rename from public/styleguide/fonts/icomoon.eot
rename to core/styleguide/fonts/icomoon.eot
diff --git a/public/styleguide/fonts/icomoon.svg b/core/styleguide/fonts/icomoon.svg
similarity index 100%
rename from public/styleguide/fonts/icomoon.svg
rename to core/styleguide/fonts/icomoon.svg
diff --git a/public/styleguide/fonts/icomoon.ttf b/core/styleguide/fonts/icomoon.ttf
similarity index 100%
rename from public/styleguide/fonts/icomoon.ttf
rename to core/styleguide/fonts/icomoon.ttf
diff --git a/public/styleguide/fonts/icomoon.woff b/core/styleguide/fonts/icomoon.woff
similarity index 100%
rename from public/styleguide/fonts/icomoon.woff
rename to core/styleguide/fonts/icomoon.woff
diff --git a/public/styleguide/html/README b/core/styleguide/html/README
similarity index 100%
rename from public/styleguide/html/README
rename to core/styleguide/html/README
diff --git a/public/styleguide/images/spinner.gif b/core/styleguide/images/spinner.gif
similarity index 100%
rename from public/styleguide/images/spinner.gif
rename to core/styleguide/images/spinner.gif
diff --git a/public/styleguide/js/annotations-pattern.js b/core/styleguide/js/annotations-pattern.js
similarity index 100%
rename from public/styleguide/js/annotations-pattern.js
rename to core/styleguide/js/annotations-pattern.js
diff --git a/public/styleguide/js/annotations-viewer.js b/core/styleguide/js/annotations-viewer.js
similarity index 100%
rename from public/styleguide/js/annotations-viewer.js
rename to core/styleguide/js/annotations-viewer.js
diff --git a/public/styleguide/js/code-pattern.js b/core/styleguide/js/code-pattern.js
similarity index 100%
rename from public/styleguide/js/code-pattern.js
rename to core/styleguide/js/code-pattern.js
diff --git a/public/styleguide/js/code-viewer.js b/core/styleguide/js/code-viewer.js
similarity index 100%
rename from public/styleguide/js/code-viewer.js
rename to core/styleguide/js/code-viewer.js
diff --git a/public/styleguide/js/data-saver.js b/core/styleguide/js/data-saver.js
similarity index 100%
rename from public/styleguide/js/data-saver.js
rename to core/styleguide/js/data-saver.js
diff --git a/public/styleguide/js/pattern-finder.js b/core/styleguide/js/pattern-finder.js
similarity index 100%
rename from public/styleguide/js/pattern-finder.js
rename to core/styleguide/js/pattern-finder.js
diff --git a/public/styleguide/js/postmessage.js b/core/styleguide/js/postmessage.js
similarity index 100%
rename from public/styleguide/js/postmessage.js
rename to core/styleguide/js/postmessage.js
diff --git a/public/styleguide/js/styleguide.js b/core/styleguide/js/styleguide.js
similarity index 100%
rename from public/styleguide/js/styleguide.js
rename to core/styleguide/js/styleguide.js
diff --git a/public/styleguide/js/url-handler.js b/core/styleguide/js/url-handler.js
similarity index 100%
rename from public/styleguide/js/url-handler.js
rename to core/styleguide/js/url-handler.js
diff --git a/public/styleguide/js/vendor/classlist-polyfill.js b/core/styleguide/js/vendor/classlist-polyfill.js
similarity index 100%
rename from public/styleguide/js/vendor/classlist-polyfill.js
rename to core/styleguide/js/vendor/classlist-polyfill.js
diff --git a/public/styleguide/js/vendor/jquery.js b/core/styleguide/js/vendor/jquery.js
similarity index 100%
rename from public/styleguide/js/vendor/jquery.js
rename to core/styleguide/js/vendor/jquery.js
diff --git a/public/styleguide/js/vendor/jwerty.js b/core/styleguide/js/vendor/jwerty.js
similarity index 100%
rename from public/styleguide/js/vendor/jwerty.js
rename to core/styleguide/js/vendor/jwerty.js
diff --git a/public/styleguide/js/vendor/prism.js b/core/styleguide/js/vendor/prism.js
similarity index 100%
rename from public/styleguide/js/vendor/prism.js
rename to core/styleguide/js/vendor/prism.js
diff --git a/public/styleguide/js/vendor/typeahead.bundle.min.js b/core/styleguide/js/vendor/typeahead.bundle.min.js
similarity index 100%
rename from public/styleguide/js/vendor/typeahead.bundle.min.js
rename to core/styleguide/js/vendor/typeahead.bundle.min.js
diff --git a/gulpfile.js b/gulpfile.js
index f0b66d3d7..f8ad52f35 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,12 +2,12 @@
var pkg = require('./package.json'),
gulp = require('gulp'),
+ path = require('path'),
eol = require('os').EOL,
del = require('del'),
strip_banner = require('gulp-strip-banner'),
header = require('gulp-header'),
nodeunit = require('gulp-nodeunit'),
- //sass = require('gulp-sass'),
browserSync = require('browser-sync').create();
require('gulp-load')(gulp);
@@ -20,14 +20,18 @@ var banner = [ '/** ',
' * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice.',
' * ', ' **/'].join(eol);
+function paths () {
+ return require('./config.json').paths;
+}
+
//load patternlab-node tasks
gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js');
//clean patterns dir
gulp.task('clean', function(cb){
- del.sync(['./public/patterns/*'], {force: true});
+ del.sync([path.resolve(paths().public.patterns, '*')], {force: true});
cb();
-})
+});
//build the banner
gulp.task('banner', function(){
@@ -51,91 +55,95 @@ gulp.task('banner', function(){
today : new Date().getFullYear() }
))
.pipe(gulp.dest('./builder'));
-})
+});
+
+
+// COPY TASKS
-//copy tasks
+// JS copy
gulp.task('cp:js', function(){
- return gulp.src('**/*.js', {cwd:'./source/js'})
- .pipe(gulp.dest('./public/js'))
+ return gulp.src('**/*.js', {cwd: path.resolve(paths().source.js)} )
+ .pipe(gulp.dest(path.resolve(paths().public.js)));
});
+
+// Images copy
gulp.task('cp:img', function(){
return gulp.src(
[ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ],
- {cwd:'./source/images'} )
- .pipe(gulp.dest('./public/images'))
+ {cwd: path.resolve(paths().source.images)} )
+ .pipe(gulp.dest(path.resolve(paths().public.images)));
});
+
+// Fonts copy
gulp.task('cp:font', function(){
- return gulp.src('*', {cwd:'./source/fonts'})
- .pipe(gulp.dest('./public/fonts'))
+ return gulp.src('*', {cwd: path.resolve(paths().source.fonts)})
+ .pipe(gulp.dest(path.resolve(paths().public.images)));
});
+
+// Data copy
gulp.task('cp:data', function(){
- return gulp.src('annotations.js', {cwd:'./source/_data'})
- .pipe(gulp.dest('./public/data'))
-})
+ return gulp.src('annotations.js', {cwd: path.resolve(paths().source.data)})
+ .pipe(gulp.dest(path.resolve(paths().public.data)));
+});
+
+// CSS Copy
gulp.task('cp:css', function(){
- return gulp.src('./source/css/style.css')
- .pipe(gulp.dest('./public/css'))
+ return gulp.src(path.resolve(paths().source.css, 'style.css'))
+ .pipe(gulp.dest(path.resolve(paths().public.css)))
.pipe(browserSync.stream());
-})
+});
+
+// Styleguide Copy
+gulp.task('cp:styleguide', function(){
+ return gulp.src(
+ [ '**/*'],
+ {cwd: path.resolve(paths().source.styleguide)} )
+ .pipe(gulp.dest(path.resolve(paths().public.styleguide)))
+ .pipe(browserSync.stream());;
+});
//server and watch tasks
gulp.task('connect', ['lab'], function(){
browserSync.init({
server: {
- baseDir: './public/'
+ baseDir: path.resolve(paths().public.root)
}
});
- gulp.watch('./source/css/style.css', ['cp:css']);
-
- //suggested watches if you use scss
- // gulp.watch('./source/css/**/*.scss', ['sass:style']);
- // gulp.watch('./public/styleguide/*.scss', ['sass:styleguide']);
+ gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']);
+
+ gulp.watch(path.resolve(paths().source.styleguide, '**/*.*'), ['cp:styleguide']);
+
+ gulp.watch(
+ [
+ path.resolve(paths().source.patterns, '**/*.mustache'),
+ path.resolve(paths().source.patterns, '**/*.json'),
+ path.resolve(paths().source.data, '*.json'),
+ path.resolve(paths().source.fonts + '/*'),
+ path.resolve(paths().source.images + '/*'),
+ path.resolve(paths().source.data + '*.json'),
+ ],
+ ['lab-pipe'],
+ function () { browserSync.reload(); }
+ );
- gulp.watch([
- './source/_patterns/**/*.mustache',
- './source/_patterns/**/*.json',
- './source/_data/*.json' ],
- ['lab-pipe'], function(){
- browserSync.reload();
- });
-
-})
+});
//unit test
gulp.task('nodeunit', function(){
return gulp.src('./test/**/*_tests.js')
.pipe(nodeunit());
-})
-
-//sass tasks, turn on if you want to use
-// gulp.task('sass:style', function(){
-// return gulp.src('./source/css/*.scss')
-// .pipe(sass({
-// outputStyle: 'expanded',
-// precision: 8
-// }))
-// .pipe(gulp.dest('./public/css'))
-// .pipe(browserSync.stream());
-// })
-// gulp.task('sass:styleguide', function(){
-// return gulp.src('./public/styleguide/css/*.scss')
-// .pipe(sass({
-// outputStyle: 'expanded',
-// precision: 8
-// }))
-// .pipe(gulp.dest('./public/styleguide/css'))
-// .pipe(browserSync.stream());
-// })
+});
+
gulp.task('lab-pipe', ['lab'], function(cb){
cb();
browserSync.reload();
-})
+});
gulp.task('default', ['lab']);
-gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', /*'sass:style', 'sass:styleguide'*/]);
-gulp.task('prelab', ['clean', 'banner', 'assets']);
+gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'cp:css', 'cp:styleguide' ]);
+gulp.task('prelab', ['clean', 'assets']);
gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();});
gulp.task('patterns', ['patternlab:only_patterns']);
gulp.task('serve', ['lab', 'connect']);
diff --git a/package.gulp.json b/package.gulp.json
index dbece6e4b..fb73bd7c7 100644
--- a/package.gulp.json
+++ b/package.gulp.json
@@ -1,22 +1,25 @@
{
"name": "patternlab-node",
"description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).",
- "version": "1.0.0",
- "devDependencies": {
- "browser-sync": "^2.10.0",
- "del": "^2.0.2",
+ "version": "1.1.0",
+ "main": "./builder/patternlab.js",
+ "dependencies": {
+ "del": "^2.2.0",
"diveSync": "^0.3.0",
- "fs-extra": "^0.26.2",
- "glob": "^6.0.1",
+ "fs-extra": "^0.26.5",
+ "glob": "^6.0.4",
+ "html-entities": "^1.2.0",
+ "mustache": "^2.2.1"
+ },
+ "devDependencies": {
+ "browser-sync": "^2.11.1",
"gulp": "^3.9.0",
- "gulp-connect": "^2.2.0",
+ "gulp-connect": "^2.3.1",
"gulp-copy": "0.0.2",
"gulp-header": "^1.7.1",
"gulp-load": "^0.1.1",
"gulp-nodeunit": "0.0.5",
- "gulp-strip-banner": "0.0.2",
- "html-entities": "^1.2.0",
- "mustache": "^2.2.0"
+ "gulp-strip-banner": "0.0.2"
},
"keywords": [
"Pattern Lab",
diff --git a/package.json b/package.json
index 157d4cc66..24043cfb5 100644
--- a/package.json
+++ b/package.json
@@ -1,21 +1,24 @@
{
"name": "patternlab-node",
"description": "Pattern Lab is a collection of tools to help you create atomic design systems. This is the node command line interface (CLI).",
- "version": "1.0.0",
- "devDependencies": {
- "bs-html-injector": "^3.0.0",
+ "version": "1.1.0",
+ "main": "./builder/patternlab.js",
+ "dependencies": {
"diveSync": "^0.3.0",
"fs-extra": "^0.26.2",
"glob": "^6.0.1",
+ "html-entities": "^1.2.0",
+ "matchdep": "^1.0.0",
+ "mustache": "^2.2.0"
+ },
+ "devDependencies": {
+ "bs-html-injector": "^3.0.0",
"grunt": "~0.4.5",
- "grunt-browser-sync": "^2.2.0",
"grunt-contrib-concat": "^0.5.1",
+ "grunt-browser-sync": "^2.2.0",
"grunt-contrib-copy": "^0.8.2",
"grunt-contrib-nodeunit": "^0.4.1",
- "grunt-contrib-watch": "^0.6.1",
- "html-entities": "^1.2.0",
- "matchdep": "^1.0.0",
- "mustache": "^2.2.0"
+ "grunt-contrib-watch": "^0.6.1"
},
"keywords": [
"Pattern Lab",
diff --git a/public/styleguide/css/static.css b/public/styleguide/css/static.css
deleted file mode 100644
index e69de29bb..000000000
diff --git a/public/styleguide/css/static.scss b/public/styleguide/css/static.scss
deleted file mode 100644
index a22d5d744..000000000
--- a/public/styleguide/css/static.scss
+++ /dev/null
@@ -1,404 +0,0 @@
-/*
-colors
-red: $orange; rgb(229,24,55)
-gray: #808080;
-*/
-
-$orange : #bededf;
-
-$max-width: 60em;
-
-/************Reset**************/
-* {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-html, body, div, object, iframe, fieldset {
- margin: 0;
- padding: 0;
- border: 0;
-}
-ol, ul {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-header, footer, nav, section, article, hgroup, figure {
- display: block;
-}
-legend {
- display: none;
-}
-/************End Reset**************/
-
-/************Global**************/
-body {
- background: #fff;
- color: #000;
- font: 100%/1.4 "HelveticaNeue", "Helvetica", "Arial", sans-serif;
- padding: 0;
- -webkit-text-size-adjust: 100%;
- border-top: 20px solid #000;
- border-bottom: 20px solid #000;
-}
-a {
- color: #808080;
- text-decoration: none;
-}
-a:hover, a:focus {
- color: $orange;
-}
-p {
- margin: 0 0 1em;
-}
-img, object, video {
- max-width: 100%;
- border: 0;
-}
-a img {
- border: 0;
- outline: 0;
-}
-h1 {
- font-size: 3em;
- line-height: 1;
- letter-spacing: -0.02em;
- margin-bottom: 0.2em;
-}
-h2 {
- font-size: 2em;
- line-height: 1.1;
- margin-bottom: 0.2em;
-}
-h3 {
- font-weight: normal;
- line-height: 1.1;
- padding-bottom: 0.4em;
- border-bottom: 1px solid #ccc;
-}
-h1 a, h2 a, h3 a {
- display: block;
- color: #000;
-}
-h1 a:hover, h2 a:hover, h3 a:hover {
- color: $orange;
-}
-blockquote {
- border-left: 0.5em solid #ddd;
- padding-left: 1em;
- margin-left: 1em;
-}
-small {
- color: $orange;
-}
-input[type=search] {
- -webkit-appearance: none;
- border-radius: 0;
-}
-::-webkit-input-placeholder {
- color: #808080;
-}
-:-moz-placeholder {
- color: #808080;
-}
-/************End Global**************/
-
-/************Classes**************/
-.inactive {
- color: #ddd;
-}
-/************End Classes**************/
-
-/************Structure**************/
-.container {
- max-width: $max-width;
- margin: 0 auto;
- padding: 0 1em;
- overflow: hidden;
-}
-
-[role=main] {
- padding-bottom: 1em;
-}
-
-/*Footer*/
-[role=contentinfo] {
- color: #fff;
- background: #000;
- margin: 0 -1em;
- position: relative;
- z-index: 2;
-
- > div {
- max-width: $max-width;
- padding: 0 1em;
- margin: 0 auto;
- overflow: hidden;
- }
-}
-/*End Footer*/
-
-/*Grid*/
-.grid {
- margin: 0 -1em;
- overflow: hidden;
-}
-.grid:target {
- -webkit-animation: fadeout 5s 1 ease-out;
- -moz-animation: fadeout 5s 1 ease-out;
- -o-animation: fadeout 5s 1 ease-out;
- animation: fadeout 5s 1 ease-out;
-}
-.grid > h2 {
- margin-left: 0.45em;
-}
-.grid > section {
- padding: 1em 1em 0.5em;
-}
-.grid > section:target {
- -webkit-animation: fadeout 5s 1 ease-out;
- -moz-animation: fadeout 5s 1 ease-out;
- -o-animation: fadeout 5s 1 ease-out;
- animation: fadeout 5s 1 ease-out;
-}
-.grid ul {
- overflow: hidden;
-}
-.grid ul li {
- margin-bottom: 0.3em;
-}
-.featured:after {
- content: "*";
- color: $orange;
-}
-
-/*Fluid*/
-.fluid {
- display: block;
- margin: 0 auto;
- max-width: 40em;
-}
-
-/*Homepage*/
-.home h1 {
- margin-bottom: 0.2em;
-}
-.intro {
- font-size: 1.8em;
- line-height: 1.2;
- margin: 0 auto;
-}
-.intro a:hover ,.intro a:focus {
- color: #000;
- border-bottom-color: #000;
-}
-
-.ani {
- position: relative;
- height: 15em;
- margin: 1em 0 0;
- width: 100%;
- z-index: 0;
-}
-.ani div {
- width: 100%;
-}
-.ani div b {
- display: block;
- position: absolute;
- top: 5%;
- right: 5%;
- bottom: 5%;
- left: 5%;
- background: rgba(229,24,55,0.22);
-}
-
-
-/*Patterns*/
-.mod {
- padding: 1em;
-}
-.pattern {
- background: #f7f7f7;
- border-bottom: 1px solid #808080;
- margin-bottom: 1em;
- overflow: hidden;
-}
-.pattern-description h1 {
- font-size: 3.4em;
- margin-bottom: 0.5em;
-}
-.pattern-description {
- max-width: 40em;
- margin: 0 auto;
-}
-.pattern-description ul, .pattern-description ol {
- margin-bottom: 2em;
-}
-.pattern-description li {
- margin-bottom: 1em;
-}
-
-
-/*Blog*/
-/*Blog Header*/
-.blog .container {
- max-width: 62em;
-}
-.blog header[role=banner] {
- overflow: hidden;
- margin-bottom: 2em;
- padding: 2em 0 1em;
- border-bottom: 1px solid #000;
-}
-.blog-logo {
- font-weight: normal;
- font-size: 1.2em;
- margin: 0 0 1em;
-}
-.blog-logo img {
- width: 3.3em;
-}
-.blog-logo a {
- color: #000;
-}
-.search-form {
- width: 100%;
- margin-bottom: 1em;
-}
-.search-field {
- width: 100%;
- padding: 0.5em 0;
- border: 0;
- border-bottom: 1px solid #808080;
- outline: none;
-}
-.search-field:focus {
- background: $orange;
- color: #fff;
-}
-.search-field:focus::-webkit-input-placeholder {
- color: #fff;
-}
-
-.search-field:focus :-moz-placeholder {
- color: #fff;
-}
-
-.blog .nav {
- clear: both;
-}
-.blog .nav a {
- display: block;
- font-weight: bold;
- color: #000;
-}
-.blog .nav a:hover {
- color: $orange;
-}
-
-/*Posts*/
-.posts ol > li {
- padding-bottom: 1em;
- border-bottom: 1px solid #ccc;
- margin-bottom: 1em;
- overflow: hidden;
-}
-.posts h2 {
- font-size: 1.4em;
- margin: 0.28em 0 0.1em;
- font-weight: normal;
-}
-.posts h2 a {
- color: #000;
-}
-.posts h2 a:hover, .posts h2 a:focus {
- color: $orange;
-}
-.permalink {
- display: block;
- font-size: 0.8em;
- margin-bottom: 1.2em;
-}
-.post-body a {
- border-bottom: 1px solid #ccc;
-}
-.posts blockquote {
- margin: 0 0 1em;
- color: #666;
- border-left: 0.25em solid #ccc;
- padding-left: 1em;
-}
-.tags {
- float: left;
-}
-.tags li {
- display: inline-block;
- font-size: 0.8em;
- margin-right: 0.5em;
-}
-
-.posts ol > li .tags a, .permalink {
- color: #ccc;
- -webkit-transition: color 0.3s ease-out;
- -moz-transition: color 0.3s ease-out;
- -ms-transition: color 0.3s ease-out;
- -o-transition: color 0.3s ease-out;
- transition: color 0.3s ease-out;
-}
-.posts ol > li:hover .tags a, .posts ol > li:hover .permalink {
- color: #808080;
-}
-.blog-nav {
- text-align: center;
- overflow: hidden;
- padding: 1em 0;
-}
-.posts .blog-nav a {
- border: 0;
-}
-.nav-next {
- float: right;
-}
-.nav-prev {
- float: left;
-}
-
-/* Sidebar */
-.sidebar {
- font-size: 0.8em;
- padding-bottom: 1.4em;
-}
-.sidebar div {
- margin-bottom: 2em;
-}
-.sidebar h3 {
- font-weight: bold;
- font-size: 0.9em;
- line-height: 1;
- border-bottom: 1px solid #000;
-}
-.sidebar a {
- color: #808080;
-}
-.sidebar a:hover, .sidebar a:focus {
- color: $orange;
-}
-
-
-
-
-.top {
- clear: both;
- display: block;
- padding: 1em 0;
-}
-.top:before {
- content: '▲';
-}
-
diff --git a/public/styleguide/css/styleguide-specific.css b/public/styleguide/css/styleguide-specific.css
deleted file mode 100644
index 5aaf94c33..000000000
--- a/public/styleguide/css/styleguide-specific.css
+++ /dev/null
@@ -1,80 +0,0 @@
-/*------------------------------------*\
- $PATTERN LAB-SPECIFIC STYLES
-\*------------------------------------*/
-/**
- * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
- * This is helpful for displaying demo styles for grids, animations, color swatches, etc
- * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
- * These styles will not be your production CSS.
- */
-/* Style Guide Interface Colors */
-/* Typography */
-/* Defaults */
-/* Dimensions */
-/* Breakpoints */
-.demo {
- overflow: hidden;
- margin-bottom: 1rem; }
-
-.demo .gi, .demo .demo-block {
- background: #dddddd;
- color: gray;
- text-align: center;
- margin-bottom: 0.5em;
- padding: 1em !important; }
- .demo .gi:nth-of-type(2n), .demo .demo-block:nth-of-type(2n) {
- color: #dddddd;
- background: gray; }
- .demo .gi .gi, .demo .demo-block .gi {
- background: rgba(0, 0, 0, 0.1);
- color: #dddddd; }
- .demo .gi .gi:nth-of-type(2n), .demo .demo-block .gi:nth-of-type(2n) {
- background: rgba(0, 0, 0, 0.3); }
-
-.demo-animate {
- background: #ddd;
- padding: 1em;
- margin-bottom: 1em;
- text-align: center; }
-
-.animate-move {
- position: relative; }
- .animate-move .demo-shape {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 20px;
- background: gray; }
- .animate-move:hover > .demo-shape {
- left: 100%;
- margin-left: -20px; }
-
-.sg-colors {
- overflow: hidden; }
- .sg-colors li {
- overflow: hidden;
- border: 1px solid #dddddd;
- padding: 0.3em;
- margin: 0 0.2em 0.2em 0; }
- @media all and (min-width: 30em) {
- .sg-colors li {
- float: left;
- width: 5em; } }
-
-.sg-swatch {
- display: block;
- height: 1.5em;
- width: 50%; }
- @media all and (max-width: 30em) {
- .sg-swatch {
- float: left;
- margin-right: 0.3em; } }
- @media all and (min-width: 30em) {
- .sg-swatch {
- width: 100%;
- height: 4em;
- margin-bottom: 0.2em; } }
-
-.sg-label {
- line-height: 1; }
diff --git a/public/styleguide/css/styleguide-specific.scss b/public/styleguide/css/styleguide-specific.scss
deleted file mode 100644
index f55a99390..000000000
--- a/public/styleguide/css/styleguide-specific.scss
+++ /dev/null
@@ -1,141 +0,0 @@
-/*------------------------------------*\
- $PATTERN LAB-SPECIFIC STYLES
-\*------------------------------------*/
-/**
- * This stylesheet is for styles you want to include only when the interface is being viewed within Pattern Lab.
- * This is helpful for displaying demo styles for grids, animations, color swatches, etc
- * It's also helpful for overriding context-specific styles like fixed or absolutely positioned elements
- * These styles will not be your production CSS.
- */
-
-
-/* Style Guide Interface Colors */
-$sg-primary : #222;
-$sg-secondary : #808080;
-$sg-tertiary : #ddd;
-$sg-quaternary : #fff;
-$sg-quinary : #999;
-$sg-tint : rgba(255,255,255,0.05);
-$sg-tint-2 : rgba(255,255,255,0.25);
-$sg-tone : rgba(0,0,0,0.1);
-$sg-tone-2 : rgba(0,0,0,0.3);
-
-/* Typography */
-$sg-font-size-norm : 100%;
-$sg-font-size-sm : 70%;
-$sg-font-size-large : 120%;
-
-/* Defaults */
-$sg-space : 1em;
-$sg-doublespace : $sg-space*2;
-$sg-pad : 1em;
-$sg-pad-half : $sg-pad/2;
-
-/* Dimensions */
-$offset-top: 2em;
-
-/* Breakpoints */
-$sg-bp-small : 24em;
-$sg-bp-small-2 : 30em;
-$sg-bp-med : 48em;
-$sg-bp-large : 72em;
-$sg-bp-xl : 80em;
-
-$animate-quick: 0.2s;
-
-
-// Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles
-.demo {
- overflow: hidden;
- margin-bottom: 1rem;
-}
-
-.demo .gi, .demo .demo-block {
- background: $sg-tertiary;
- color: $sg-secondary;
- text-align: center;
- margin-bottom: $sg-pad-half;
- padding: 1em !important;
-
- &:nth-of-type(2n) {
- color: $sg-tertiary;
- background: $sg-secondary;
- }
-
- .gi {
- background: $sg-tone;
- color: $sg-tertiary;
-
- &:nth-of-type(2n) {
- background: $sg-tone-2;
- }
- }
-}
-
-//Demo box for animation
-.demo-animate {
- background: #ddd;
- padding: $sg-pad;
- margin-bottom: $sg-space;
- text-align: center;
-}
-
-//Animate Demo to show
-.animate-move {
- position: relative;
-
- .demo-shape {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- width: 20px;
- background: $sg-secondary;
- }
-
- &:hover {
- > .demo-shape {
- left: 100%;
- margin-left: -20px;
- }
- }
-}
-
-// Style Guide color swatches
-.sg-colors {
- overflow: hidden;
-
- li {
- overflow: hidden;
- border: 1px solid $sg-tertiary;
- padding: 0.3em;
- margin: 0 0.2em 0.2em 0;
-
- @media all and (min-width: $sg-bp-small-2) {
- float: left;
- width: 5em;
- }
- }
-}
-
-.sg-swatch {
- display: block;
- height: 1.5em;
- width: 50%;
-
- @media all and (max-width: $sg-bp-small-2) {
- float: left;
- margin-right: 0.3em;
- }
-
- @media all and (min-width: $sg-bp-small-2) {
- width: 100%;
- height: 4em;
- margin-bottom: 0.2em;
- }
-
-}
-
-.sg-label {
- line-height: 1;
-}
\ No newline at end of file
diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss
deleted file mode 100644
index b0b38c0f7..000000000
--- a/public/styleguide/css/styleguide.scss
+++ /dev/null
@@ -1,953 +0,0 @@
-/*------------------------------------*\
- $PATTERN LAB STYLES
-\*------------------------------------*/
-/**
- * NOTE: These styles are specific to Pattern Lab and should not be modified.
- * Edit all project styles in /source/css/
- *
- * Second note: Any important declarations are to prevent brand styles from overriding style guide
- */
-
-
-/*------------------------------------*\
- $CONTENTS
-\*------------------------------------*/
-/**
- * STYLE GUIDE VARIABLES------------------Declarations of Sass variables
- * -----Font
- * -----Colors
- * -----Typography
- * -----Defaults
- * -----Breakpoints
- * MIXINS---------------------------------Sass mixins
- * GLOBAL ELEMENTS------------------------Establish global styles
- * -----Main
- * -----Headings
- * -----Text-related elements (p, blockquote, lists)
- * -----Defaults
- * -----Breakpoints
- * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container.
- * -----Header
- * -----Navigation
- * -----Controls
- * -----Main Container
- * -----Viewport
- * -----Section Headers
- * -----Code View
- * -----Icon Fonts
- */
-
-
-
-
-
-/*------------------------------------*\
- $PATTERN LAB VARIABLES
-\*------------------------------------*/
-/*Fonts*/
-$sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif;
-
-/* Style Guide Interface Colors */
-$sg-primary : #222;
-$sg-secondary : #808080;
-$sg-tertiary : #ddd;
-$sg-quaternary : #fff;
-$sg-quinary : #999;
-$sg-tint : rgba(255,255,255,0.05);
-$sg-tint-2 : rgba(255,255,255,0.25);
-$sg-tone : rgba(0,0,0,0.1);
-$sg-tone-2 : rgba(0,0,0,0.3);
-
-/* Typography */
-$sg-font-size-norm : 100%;
-$sg-font-size-sm : 70%;
-$sg-font-size-large : 120%;
-
-/* Defaults */
-$sg-space : 1em;
-$sg-doublespace : $sg-space*2;
-$sg-pad : 1em;
-$sg-pad-half : $sg-pad/2;
-
-/* Dimensions */
-$offset-top: 2em;
-
-/* Breakpoints */
-$sg-bp-small : 24em;
-$sg-bp-small-2 : 30em;
-$sg-bp-med : 48em;
-$sg-bp-large : 72em;
-$sg-bp-xl : 80em;
-
-$animate-quick: 0.2s;
-
-
-
-
-
-/*------------------------------------*\
- $PATTERN LAB MIXINS
-\*------------------------------------*/
-@mixin sg-transition($transition-property, $transition-time, $method) {
- -webkit-transition: $transition-property $transition-time $method;
- -moz-transition: $transition-property $transition-time $method;
- -ms-transition: $transition-property $transition-time $method;
- -o-transition: $transition-property $transition-time $method;
- transition: $transition-property $transition-time $method;
-}
-
-
-
-
-
-
-/*------------------------------------*\
- $PATTERN LAB INTERFACE
-\*------------------------------------*/
-
-#patternlab-html, #patternlab-body {
- margin: 0;
- padding: 0;
- background: $sg-tertiary;
- -webkit-text-size-adjust: 100%;
-}
-
-.sg-nav-wrapper {
- overflow: hidden;
- background: $sg-tertiary;
-}
-
-.is-vishidden {
- position: absolute !important;
- overflow: hidden;
- width: 1px;
- height: 1px;
- padding: 0;
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
-}
-
-
-//Clearfix
-.sg-cf {
- /**zoom: 1;*/
-
- &:before, &:after {
- content: " ";
- display: table;
- }
-
- &:after {
- clear: both;
- }
-}
-
-
-
-/*------------------------------------*\
- $PATTERN LAB HEADER
-\*------------------------------------*/
-/* Header */
-.sg-header {
- background: $sg-primary;
- color: $sg-quaternary;
- font-family: $sg-font;
- text-transform: uppercase;
- position: fixed;
- top: 0;
- left: 0;
- z-index: 2;
- width: 100%;
-
- * {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- }
-
- ul, ol {
- padding: 0;
- margin: 0;
- }
-
- li {
- list-style: none;
- border-bottom: 1px solid $sg-tint;
- }
-
- a {
- font-size: $sg-font-size-sm;
- color: $sg-secondary;
- text-decoration: none;
- display: block;
- line-height: 1;
- padding: $sg-pad;
- @include sg-transition(background,0.15s,ease-out);
- @include sg-transition(color,0.15s,ease-out);
-
- &:hover, &:focus, &.active {
- color: $sg-quaternary;
- background: $sg-tint;
- }
- }
-
- ol ol ol a { //3rd level nav item
- padding-left: 2em;
- text-transform: none;
- }
-}
-
-
-
-/* Navigation */
-.sg-header .sg-nav-toggle {
- display: inline-block;
- padding: 0.9em $sg-pad;
- border-bottom: 1px solid rgba(0,0,0,0);
- position: relative;
- text-transform: uppercase;
- z-index: 2;
-
- span {
- display: inline-block;
- padding-right: 0.2em;
- }
-
- @media all and (min-width: $sg-bp-med) {
- display: none;
- }
-}
-
-.sg-nav-container {
- @media all and (max-width: $sg-bp-med) {
- overflow: hidden;
- max-height: 0;
- @include sg-transition(max-height,0.1s,ease-out);
-
- &.active {
- max-height: 50em;
- }
- }
-}
-
-.sg-nav {
- z-index: 1;
- margin: 0;
- padding: 0;
- list-style: none;
-
- > li {
- cursor: pointer;
-
- @media all and (min-width: $sg-bp-med) {
- border-bottom: 0;
- border-right: 1px solid $sg-tint;
- float: left;
- position: relative;
-
- > ol {
- position: absolute;
- top: $offset-top;
- left: 0;
- }
-
- }
- }
-}
-
-/* Accordion */
-.sg-acc-handle {
- &:after {
- content: ' +';
- float: right;
- font-size: $sg-font-size-sm;
-
- @media all and (min-width: $sg-bp-med) {
- float: none;
- }
- }
-
- &.active {
- color: $sg-quaternary;
- background: $sg-tint;
- &:after {
- content: ' -';
- }
- }
-
- &.sg-icon:after {
- content: "";
- }
-}
-
-.sg-header .sg-icon {
- width: auto;
- font-size: 1rem;
- padding: 0.5rem 1rem;
-}
-
-.sg-acc-panel {
- overflow: hidden;
- max-height: 0;
- min-width: 10em;
- @include sg-transition(max-height,0.1s,ease-out);
-
- li {
- background: $sg-primary;
- }
-
- &.active {
- max-height: 120em;
- overflow: auto;
- }
-
- &.sg-right {
- position: absolute;
- left: auto;
- right: 0;
- }
-
- &.sg-left {
- position: absolute;
- left: auto;
- }
-
- [class^="sg-icon-"] {
- &:before {
- display: inline-block;
- margin-right: 0.4em;
- }
- }
-}
-
-/* Controls (sizing, view mode) */
-.sg-controls {
- border: 0;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 2;
-}
-
-.sg-control-trigger {
- border-bottom: 1px solid $sg-tint;
-
- @media all and (min-width: $sg-bp-med) {
- border: 0;
- }
-
- @media all and (min-width: $sg-bp-large) {
- float: left;
- width: 6em;
- }
-}
-
-.sg-control {
- > li {
- float: left;
-
- @media all and (min-width: $sg-bp-med) {
- border-bottom: 0;
- border-left: 1px solid $sg-tint;
- }
- }
-
- .sg-input {
- padding: 0.1em;
- -webkit-transition: all $animate-quick ease-out;
- -moz-transition: all $animate-quick ease-out;
- -ms-transition: all $animate-quick ease-out;
- -o-transition: all $animate-quick ease-out;
- transition: all $animate-quick ease-out;
-
- &:active, &:focus {
- outline: 0;
- background: $sg-quinary;
- color: #000;
- }
- }
-}
-
-.sg-current-size {
- font-size: 70%;
- color: $sg-secondary;
- padding: 0.85em 0.7em;
-
- &:hover {
- .sg-input {
- background: $sg-quinary;
- color: #000;
- }
- }
-
- @media all and (min-width: $sg-bp-large) {
- float: left;
- }
-}
-
-.sg-size {
- width: 135px;
-
- @media all and (min-width: $sg-bp-med) {
- width: auto;
- }
-}
-
-.sg-size-options {
-
- @media all and (min-width: $sg-bp-large) {
- float: left;
- position: static;
- max-height: none;
- max-width: none;
-
- > li {
- float: left;
- border: 0;
- border-left: 1px solid $sg-tint;
- }
- }
-}
-
-//Media Queries Dropdown
-#sg-size-mq {
- display: none;
-
- @media all and (min-width: $sg-bp-large) {
- display: block;
- }
-}
-
-#sg-form {
- margin: 0;
- border: 0;
- padding: 0;
-}
-
-.sg-input {
- margin: -2px 0 0 0;
- padding: 0;
- border: 0;
- background-color: #222;
- color: gray;
- width: 25px;
- text-align: right;
-
- @media all and (min-width: $sg-bp-med) {
- width: 35px;
- }
-}
-
-.sg-input-active {
- background-color: #fff;
- color: #000;
-}
-
-.sg-view {
- position: relative;
-
- > ul {
- position: absolute;
- top: $offset-top;
- left: 0;
- }
-}
-
-//Checklist dropdown lists
-.sg-checkbox {
- @extend .sg-icon-radio-unchecked;
-
- &:before {
- display: inline-block;
- margin-right: 0.4em;
- }
-
- &.active {
- @extend .sg-icon-radio-checked;
- }
-}
-
-//Pattern States (active, inprogress, complete, etc)
-
-/* basic styling */
-.sg-pattern-state:before {
- margin-right: 4px;
- content: "\2022";
- display: inline-block;
- margin-bottom: -4px;
- font-size: 18px;
- vertical-align: bottom;
-}
-
-/* nav styling */
-.sg-nav .sg-pattern-state:before {
- margin-top: -4px;
- margin-bottom: 0;
- margin-left: -4px;
- height: 20px;
- display: block;
- float: left;
-}
-
-.sg-sub-nav .sg-pattern-state:before {
- margin-left: -11px;
- margin-right: 4px;
-}
-
-/* call out for pattern's pattern state */
-span.sg-pattern-state {
- color: #999;
-}
-
-span.sg-pattern-state:before {
- margin-bottom: -3px;
- margin-left: 4px;
-}
-
-/* pattern states */
-.inprogress:before {
- color: #FF4136 !important;
-}
-
-.inreview:before {
- color: #FFCC00 !important;
-}
-
-.complete:before {
- color: #2ECC40 !important;
-}
-
-
-
-/*------------------------------------*\
- $PATTERN LAB VIEWPORT
-\*------------------------------------*/
-
-/* Viewport */
-#sg-vp-wrap {
- text-align: center;
- width: 100%;
- position: fixed;
- top: $offset-top;
- bottom: 0;
- left: 0;
- right: 0;
- z-index: 0;
-
- &.wrap-animate {
- -webkit-transition: left 0.3s ease-out;
- -moz-transition: left 0.3s ease-out;
- -ms-transition: left 0.3s ease-out;
- -o-transition: left 0.3s ease-out;
- transition: left 0.3s ease-out;
- }
-
-}
-
-#sg-viewport {
- position: absolute;
- height: 100%;
- width: 100%;
- border: 0;
- padding: 0;
- margin: 0;
- top: 0;
- bottom: 0;
- left: 0;
- right: 0;
- background-color: white;
-
- &.hay-mode {
- -webkit-transition: all 40s linear;
- -moz-transition: all 40s linear;
- -ms-transition: all 40s linear;
- -o-transition: all 40s linear;
- transition: all 40s linear;
- }
-}
-
-.no-resize {
- #sg-cover, #sg-rightpull-container {
- display: none;
- }
-
- #sg-viewport {
- overflow: hidden !important;
- }
-
-}
-
-#sg-cover {
- width: 100%;
- height: 100%;
- display: none;
- position: absolute;
- z-index: 20;
- cursor: col-resize;
-}
-
-#sg-gen-container {
- height: 100%;
- position: relative;
- text-align: center;
- margin: 0 auto;
- -webkit-overflow-scrolling: touch;
- overflow-y: auto;
- overflow-x: hidden;
-
- &.hay-mode {
- -webkit-transition: all 40s linear;
- -moz-transition: all 40s linear;
- -ms-transition: all 40s linear;
- -o-transition: all 40s linear;
- transition: all 40s linear;
- }
-}
-
-#sg-rightpull-container {
- width: 14px;
- float: right;
- margin: 0;
- height: 100%;
- cursor: col-resize;
-}
-
-#sg-rightpull {
- margin: 0;
- width: 100%;
- height: 100%;
- background: #999;
- -webkit-transition: background $animate-quick ease-out;
- -moz-transition: background $animate-quick ease-out;
- -ms-transition: background $animate-quick ease-out;
- -o-transition: background $animate-quick ease-out;
- transition: background $animate-quick ease-out;
-
- &:hover {
- background: #666;
- }
-
- &:active {
- cursor: col-resize;
- background: #444;
- }
-}
-
-.vp-animate {
- -webkit-transition: width 0.8s ease-out;
- -moz-transition: width 0.8s ease-out;
- -ms-transition: width 0.8s ease-out;
- -o-transition: width 0.8s ease-out;
- transition: width 0.8s ease-out;
-}
-
-
-
-
-
-/*------------------------------------*\
- $PATTERN LAB CONTENT
-\*------------------------------------*/
-
-/* Section Pattern */
-.sg-pattern {
- margin-bottom: $sg-doublespace;
- position: relative; //Prevents absolutely-positioned elements from floating to the top
- @extend .sg-cf;
-}
-
-/* Section Head */
-.sg-pattern-head {
- margin: $sg-doublespace 0;
- font-family: $sg-font;
- font-size: $sg-font-size-sm;
- font-weight: normal;
- padding: $sg-pad 0;
- border-bottom: 1px solid $sg-secondary;
-
- a {
- display: block;
- color: $sg-secondary;
- text-decoration: none;
- cursor: pointer;
-
- &:hover {
- color: $sg-primary;
- }
- }
-}
-
-//Annotations and code view container
-.sg-view-container {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- font-family: $sg-font;
- line-height: 1.4;
- font-size: 90%;
- background: $sg-primary;
- color: $sg-secondary;
- position: fixed;
- top: auto;
- padding: $sg-pad;
- bottom: 0;
- left: 0;
- z-index: 2;
- width: 100%;
- height: 50%;
- overflow-y: auto;
- overflow-x: hidden;
-
- a {
- color: $sg-quinary;
- }
-
- pre {
- padding: 0 1em;
- }
-
- &.anim-ready {
- -webkit-transition: bottom 0.3s ease-out;
- -moz-transition: bottom 0.3s ease-out;
- -webkit-transition: bottom 0.3s ease-out;
- -ms-transition: bottom 0.3s ease-out;
- -o-transition: bottom 0.3s ease-out;
- transition: bottom 0.3s ease-out;
- }
-}
-
-//Annotation and code view close button
-.sg-view-close {
- width: 100%;
- margin-bottom: -10px;
-}
-
-.sg-view-close-btn {
- color: #fff;
- text-transform: uppercase;
- text-decoration: none;
- text-align: right;
- display: block;
-}
-
-//Annotated elements Styles
-.has-annotation {
- cursor: help !important;
- box-shadow: 0 0 10px $sg-secondary;
-
- a, input {
- cursor: help !important;
- }
-
- &:hover {
- box-shadow: 0 0 10px $sg-primary;
- }
-
- &.active {
- box-shadow: inset 0 0 20px $sg-secondary;
- }
-
-}
-
-.annotation-tip {
- display: block;
- position: absolute;
- margin-top: -10px !important;
- margin-left: -10px !important;
- width: 25px !important;
- height: 25px !important;
- border-radius: 13px !important;
- text-align: center !important;
- background: #444 !important;
- color: #fff !important;
- font-weight: bold !important;
- font-size: 16px !important;
- z-index: 100;
-}
-
-#sg-comments-container {
- max-width: 60em;
- margin: 0 auto;
-}
-
-.sg-comment-container {
- padding-bottom: 2em;
- margin-bottom: $sg-space;
- border-bottom: 1px solid $sg-tint-2;
-
- p:last-child {
- margin-bottom: 0;
- }
-
- h2 {
- margin-bottom: 0.25em;
- }
-}
-
-.sg-code, .sg-annotations {
- clear: both;
- background: $sg-tertiary;
- color: $sg-primary;
- padding: $sg-pad $sg-pad-half;
- margin: $sg-space 0;
-
- a {
- text-decoration: underline;
- }
-}
-
-.sg-code {
- pre {
- white-space: -moz-pre-line;
- white-space: -pre-line;
- white-space: -o-pre-line;
- word-wrap: break-word;
- white-space: pre-line;
- border: 1px solid $sg-tone;
- padding: $sg-pad-half;
- }
-}
-
-.sg-code-contains {
- margin-bottom: 1rem;
- font-size: 85%;
- color: $sg-secondary;
-
- code {
- padding: 0.2em;
- background: $sg-tone-2;
- color: $sg-quinary;
- position: relative;
- top: -2px;
- }
-}
-
-.sg-code-head {
- color: $sg-secondary;
- font-size: 1em;
-}
-
-#sg-code-markup {
- padding-top: 10px;
-}
-
-#sg-code-tabs {
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-#sg-code-tabs li {
- float: left;
- background-color: #333;
- font-size: 1.3em;
- font-weight: bold;
- padding: 5px 15px;
- border-top: 2px solid #666;
- margin-right: 2px;
- cursor: pointer;
-}
-
-.sg-code-title-active {
- color: #bbb;
- background-color: #272822 !important;
-}
-
-div.clear {
- clear: both;
-}
-
-.sg-code-patternname {
- color: #aaa;
-}
-
-#sg-code-loader {
- display: none;
- position: absolute;
- left: 45%;
- top: 20%;
- width: 150px;
- padding: 10px;
- text-align: center;
- border-radius: 10px;
- background-color: #000;
- z-index: 100;
-}
-
-.spinner {
- height: 30px;
- width: 30px;
- margin-left: auto; margin-right: auto;
- background-position: center center;
- background-repeat: no-repeat;
- background: url('../images/spinner.gif');
- border-radius: 50%;
- opacity: .7;
-}
-
-/* Pattern Lab icon fonts */
-@font-face {
- font-family: 'icomoon';
- src:url('../fonts/icomoon.eot?srsv7g');
- src:url('../fonts/icomoon.eot?#iefixsrsv7g') format('embedded-opentype'),
- url('../fonts/icomoon.woff?srsv7g') format('woff'),
- url('../fonts/icomoon.ttf?srsv7g') format('truetype'),
- url('../fonts/icomoon.svg?srsv7g#icomoon') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-.sg-icon-search, .sg-icon-cog, .sg-icon-minus, .sg-icon-plus, .sg-icon-menu, .sg-icon-radio-checked, .sg-icon-radio-unchecked, .sg-icon-file, .sg-icon-link, .sg-icon-keyboard, .sg-icon-qrcode, .sg-icon-eye, .sg-checkbox {
- font-family: 'icomoon';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
-
- /* Better Font Rendering =========== */
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-.sg-icon-search:before {
- content: "\e600";
- font-size: 85%;
-}
-.sg-icon-cog:before {
- content: "\e601";
-}
-.sg-icon-minus:before {
- content: "\e602";
-}
-.sg-icon-plus:before {
- content: "\e603";
-}
-.sg-icon-menu:before {
- content: "\e604";
-}
-.sg-icon-radio-checked:before, .sg-checkbox.active:before {
- content: "\e605";
-}
-.sg-icon-radio-unchecked:before, .sg-checkbox:before {
- content: "\e606";
-}
-.sg-icon-file:before {
- content: "\e607";
-}
-.sg-icon-link:before {
- content: "\e608";
-}
-.sg-icon-keyboard:before {
- content: "\e609";
-}
-.sg-icon-qrcode:before {
- content: "\e60a";
-}
-.sg-icon-eye:before {
- content: "\e60b";
-}
-
-/******************************************************************/
-/* End Pattern Lab Interface code */
\ No newline at end of file
diff --git a/source/_patterns/01-molecules/03-media/_map.mustache b/source/_patterns/01-molecules/03-media/_map.mustache
index 9acb52b23..333879b6a 100644
--- a/source/_patterns/01-molecules/03-media/_map.mustache
+++ b/source/_patterns/01-molecules/03-media/_map.mustache
@@ -1 +1 @@
-
\ No newline at end of file
+
diff --git a/source/css/scss/base/_animation.scss b/source/css/scss/base/_animation.scss
deleted file mode 100644
index d28bc9136..000000000
--- a/source/css/scss/base/_animation.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.animate-fade {
- @include transition(opacity, 0.3s, ease-out);
-
- &:hover {
- opacity: 0;
- }
-}
-
-.animate-move {
- > .demo-shape {
- @include transition(all, 0.8s, ease-in-out);
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_forms.scss b/source/css/scss/base/_forms.scss
deleted file mode 100644
index 75e4ad6c8..000000000
--- a/source/css/scss/base/_forms.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-/*------------------------------------*\
- $FORMS
-\*------------------------------------*/
-
-form > div {
- margin-bottom: $space;
-}
-
-form ol, form ul {
- list-style: none;
- margin-left: 0;
-}
-
-fieldset {
- border: 0;
- padding: 0;
- margin: 0;
-}
-
-label {
- display: block;
- padding-bottom: $space-quarter;
-}
-
-button, input, select, textarea {
- font-family: inherit;
- font-size: 100%;
- margin: 0;
-}
-
-input, textarea {
- width: 100%;
- border: 1px solid $gray;
- padding: $pad-half 0.65rem;
-}
-
-input[type=text], input[type=search], input[type=url], input[type=number], textarea {
- -webkit-appearance: none;
-}
-
-button, input[type="submit"] {
- padding: $pad-half;
- background: $gray-dark;
- border: 1px solid $gray;
- cursor: pointer;
-}
-
-input[type="checkbox"],
-input[type="radio"] {
- width: auto;
- margin-right: 0.3em;
-}
-
-input[type="search"] {
- -webkit-appearance: none;
- border-radius: 0;
-}
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
-}
-
-//Form Field Container
-.field-container {
- margin-bottom: $space;
-}
-
-.inline-form {
-
- fieldset, .inline-container {
- position: relative;
- }
-
- input[type=submit], button, .btn {
- font-size: $font-size-slightly-smaller;
- padding: 0.65rem 1.3rem;
- background: $gray-dark;
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- width: auto;
-
- &:hover, &:focus {
- background: $gray;
- color: $white;
- }
- }
-}
-
-// PK to clean this up
-.inline-search-results-form {
- width: 100%;
- @media all and (min-width: $bp-med) {
- width: 82%;
-
- }
-
- fieldset, .inline-container {
- position: relative;
- }
-
- input[type=submit], button {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 1;
- width: auto;
- }
-}
-
-/* Validation */
-.is-error {
- border-color: $error;
-}
-.is-valid {
- border-color: $valid;
-}
-
-
-
-
-/*------------------------------------*\
- $SPECIFIC FORMS
-\*------------------------------------*/
-
-/* Search Form */
-.search-field {
- padding-right: 3em;
-}
-.inline-form .search-submit {
- background: none;
- padding: 0.78em 1em;
- border: 0;
- border-left: 1px solid $gray;
- color: $gray;
-}
diff --git a/source/css/scss/base/_global-classes.scss b/source/css/scss/base/_global-classes.scss
deleted file mode 100644
index 9e80691ff..000000000
--- a/source/css/scss/base/_global-classes.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-/*------------------------------------*\
- $GLOBAL CLASSES
-\*------------------------------------*/
-
-/* Clearfix */
-.cf {
- *zoom: 1;
-}
-.cf:before, .cf:after {
- content: " "; /* 1 */
- display: table; /* 2 */
-}
-
-.cf:after {
- clear: both;
-}
-
-/* Completely remove from the flow and screen readers. */
-.is-hidden {
- display: none !important;
- visibility: hidden !important;
-}
-
-/* Completely remove from the flow but leave available to screen readers. */
-.is-vishidden {
- position: absolute !important;
- overflow: hidden;
- width: 1px;
- height: 1px;
- padding: 0;
- border: 0;
- clip: rect(1px, 1px, 1px, 1px);
-}
-
-/* Floats */
-.right {
- float: right;
- padding: 0 0 $pad $pad;
-}
-
-.right-search {
- float: right;
- padding: 0 0 $pad 0;
-}
-
-.left {
- float: left;
- padding: 0 $pad $pad 0;
-}
-
-/* Text-Align */
-.align-right {
- text-align: right;
-}
-
-.align-center {
- text-align: center;
-}
-
-.align-left {
- text-align: left;
-}
-
-/* Display Classes */
-.hide-small {
- @media all and (max-width: $bp-med) {
- display: none;
- }
-}
-
-.hide-med {
- @media all and (min-width: $bp-med) and (max-width: $bp-large) {
- display: none;
- }
-}
-
-.hide-large {
- @media all and (min-width: $bp-large) {
- display: none;
- }
-}
-
-.hide-large-2 {
- @media all and (min-width:$bp-large-2) {
- display: none;
- }
-}
-
-//
-.valid {
- color: $valid;
-}
-
-.error {
- color: $error;
-}
-
-.info {
-
-}
-
-
diff --git a/source/css/scss/base/_headings.scss b/source/css/scss/base/_headings.scss
deleted file mode 100644
index 5f2433645..000000000
--- a/source/css/scss/base/_headings.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-/* Headings */
-/*Further Reading: http:/csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/ */
-h1, .alpha {
- line-height: 1.2;
-}
-
-h2, .beta {
- line-height: 1.2;
-}
-
-h3, .gamma {
- line-height: 1.2;
-}
-
-h4, .delta {
-
-}
-
-h5, .epsilon {
-
-}
-
-h6, .zeta {
-
-}
-
-/* Subheadings */
-.subheading {
- font-family: $font-secondary;
- font-weight: normal;
-}
diff --git a/source/css/scss/base/_links.scss b/source/css/scss/base/_links.scss
deleted file mode 100644
index d70545d76..000000000
--- a/source/css/scss/base/_links.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/* Links */
-a {
- color: $gray-dark;
- text-decoration: none;
- outline: 0;
-
- &:hover, &:focus {
- color: $gray;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_lists.scss b/source/css/scss/base/_lists.scss
deleted file mode 100644
index 4ceb7cf5c..000000000
--- a/source/css/scss/base/_lists.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-ol, ul {
- margin: 0;
- padding: 0;
- list-style: none;
-}
-
-/* Definition Lists */
-dl {
- overflow: hidden;
- margin: 0 0 $space;
-}
-
-dt {
- font-weight: bold;
-}
-
-dd {
- margin-left: 0;
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_main.scss b/source/css/scss/base/_main.scss
deleted file mode 100644
index f92fd1b34..000000000
--- a/source/css/scss/base/_main.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-body {
- background: $white;
- font: 100%/1.5 $font;
- -webkit-text-size-adjust: 100%;
- color: $gray-dark;
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_media.scss b/source/css/scss/base/_media.scss
deleted file mode 100644
index db9023b12..000000000
--- a/source/css/scss/base/_media.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*------------------------------------*\
- $MEDIA ELEMENTS
-\*------------------------------------*/
-
-/* Flexible Media */
-img, video, object {
- max-width: 100%;
- height: auto;
-}
-
-iframe {
- margin-bottom: $space;
-}
-
-figure {
- margin-bottom: $space;
- img {
- margin-bottom: $space-quarter;
- }
-}
-figcaption {
- font-style: italic;
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_tables.scss b/source/css/scss/base/_tables.scss
deleted file mode 100644
index 1b2a2b2c4..000000000
--- a/source/css/scss/base/_tables.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*------------------------------------*\
- $Table
-\*------------------------------------*/
-table {
- border-collapse: collapse;
- border-spacing: 0;
- border: 1px solid $gray;
- width: 100%;
-}
-th {
- text-align: left;
- border: 1px solid $gray;
- padding: 0.2em;
-}
-td {
- border: 1px solid $gray;
- padding: 0.2em;
-}
\ No newline at end of file
diff --git a/source/css/scss/base/_text.scss b/source/css/scss/base/_text.scss
deleted file mode 100644
index de17e3ec6..000000000
--- a/source/css/scss/base/_text.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Text-Related Elements */
-p {
- margin-bottom: $space;
-}
-
-/* Blockquote */
-blockquote {
- font-style:italic;
- border-left: 1px solid $gray;
- color: $gray;
- padding-left: $pad;
- margin-bottom: $space;
-}
-
-/* Horizontal Rule */
-hr {
- border: 0;
- height: 2px;
- background: $gray-light-2;
- margin: $space-double 0;
-}
-
-abbr {
- border-bottom: 1px dotted $gray;
- cursor: help;
-}
\ No newline at end of file
diff --git a/source/css/scss/generic/_mixins.scss b/source/css/scss/generic/_mixins.scss
deleted file mode 100644
index 14d8a2a3d..000000000
--- a/source/css/scss/generic/_mixins.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/*------------------------------------*\
- $MIXINS
-\*------------------------------------*/
-
-/* CSS Transition
- Usage: @include transition(width,0.3s,ease-out);
- */
-@mixin transition($transition-property, $transition-time, $method) {
- -webkit-transition: $transition-property $transition-time $method;
- -moz-transition: $transition-property $transition-time $method;
- -ms-transition: $transition-property $transition-time $method;
- -o-transition: $transition-property $transition-time $method;
- transition: $transition-property $transition-time $method;
-}
-
-/* Rem Unit font sizes with relative fallback http:/seesparkbox.com/foundry/scss_rem_mixin_now_with_a_better_fallback
- Usage: @include font-size(1, large);
-*/
-@mixin font-size( $decimal-size, $keyword: null ) {
- @if $keyword{ font-size: $keyword; }
- @else { font-size: $decimal-size * $base-font-multiplier * 16px;}
- font-size: $decimal-size * 1rem;
-}
\ No newline at end of file
diff --git a/source/css/scss/generic/_reset.scss b/source/css/scss/generic/_reset.scss
deleted file mode 100644
index e7807ec72..000000000
--- a/source/css/scss/generic/_reset.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/*------------------------------------*\
- $RESET
-\*------------------------------------*/
-
-/* Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/ */
-* {
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
-}
-html, body, div, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, form, legend, label, table, header, footer, nav, section, figure {
- margin: 0;
- padding: 0;
-}
-header, footer, nav, section, article, hgroup, figure {
- display: block;
-}
\ No newline at end of file
diff --git a/source/css/scss/generic/_variables.scss b/source/css/scss/generic/_variables.scss
deleted file mode 100644
index a183647fd..000000000
--- a/source/css/scss/generic/_variables.scss
+++ /dev/null
@@ -1,74 +0,0 @@
-/*------------------------------------*\
- $VARIABLES
-\*------------------------------------*/
-
-//Colors
-$gray : #808080;
-$gray-light : #f9f9f9;
-$gray-light-2 : #eee;
-$gray-light-3 : #ddd;
-$gray-light-4 : #bbb;
-$gray-med : #666;
-$gray-dark : #333;
-$gray-dark-2 : #131313;
-$white : #fff;
-$black : #000;
-
-$dim : rgba(0,0,0,0.5);
-$dimmer : rgba(0,0,0,0.8);
-
-$error : #f00;
-$valid : #089e00;
-
-$brand-facebook: #03539e;
-$brand-twitter: #35ccff;
-$brand-linkedin: #217bc1;
-
-//Typography
-$font : "HelveticaNeue", "Helvetica", "Arial", sans-serif;
-$font-secondary : Georgia, Times, "Times New Roman", serif;
-
-$font-size-norm : 1em;
-$font-size-slightly-larger : 1.0625em;
-$font-size-slightly-smaller : 0.875em;
-$font-size-sm : 0.75em;
-$font-size-large : 1.4375em;
-
-//Layout
-$max-width: 72rem;
-$offset-left-1: 4.5rem;
-
-$l-sidebar-width: 19.75rem;
-
-//Defaults
-$space : 1rem;
-$space-and-half : $space*1.5;
-$space-double : $space*2;
-$space-triple : $space*3;
-$space-quad : $space*4;
-$space-half : $space/2;
-$space-quarter : $space/4;
-$pad : 1rem;
-$pad-and-half : $pad*1.5;
-$pad-double : $pad*2;
-$pad-half : $pad/2;
-$pad-quarter :$pad/4;
-
-//Borders
-$border-med: 3px;
-$border-thick: 7px;
-
-
-//Breakpoints
-$bp-small : 24em;
-$bp-small-2 : 29.75em;
-$bp-small-3 : 39.8em;
-$bp-med : 46.8em;
-$bp-med-2 : 48em;
-$bp-large : 50em;
-$bp-large-2 : 66em;
-$bp-xl : 73em;
-$bp-xxl : 89em;
-$bp-xxxl : 93em;
-
-//
\ No newline at end of file
diff --git a/source/css/scss/objects/_accordion.scss b/source/css/scss/objects/_accordion.scss
deleted file mode 100644
index 3423544c9..000000000
--- a/source/css/scss/objects/_accordion.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.accordion {
- margin-bottom: $space;
-}
-
-.acc-handle {
- background: $gray-dark-2;
- color: $white;
- font-family: $font-secondary;
- font-weight: bold;
- display: block;
- position: relative;
- padding: $pad-half;
- border-bottom: 1px solid $gray-light-3;
-
- &:after {
- content:"+";
- float: right;
- }
-
- &:hover {
- color: $white;
- background: $gray-dark;
-
- }
-
- &.active {
- background: $gray-dark;
-
- &:after {
- content:"-";
- }
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_ads.scss b/source/css/scss/objects/_ads.scss
deleted file mode 100644
index e69de29bb..000000000
diff --git a/source/css/scss/objects/_article.scss b/source/css/scss/objects/_article.scss
deleted file mode 100644
index 3324811bb..000000000
--- a/source/css/scss/objects/_article.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-//Article
-.article-header {
- h1 {
- font-size: 2.5em;
- }
-}
-
-.byline {
- font-size: $font-size-slightly-smaller;
- font-style: italic;
- margin-bottom: $space-half;
-}
-
-/* Wordpress Caption */
-.wp-caption-text {
- font-style: italic;
-}
-
-// Review Summary
-.review-summary {
- .grade {
- width: 4.5em;
- float: left;
- margin: 0 $space-half 0 0;
- }
-
- .summary-text {
- margin-left: 5em;
- }
-}
-
-//Social Share
-.social-share {
- overflow: hidden;
- margin-bottom: $space;
-
- li {
- float: left;
- margin-right: $space-quarter;
- }
-
- a {
- background: $gray-dark;
- color: $white;
- display: block;
- padding: $pad-half;
-
- &:hover {
- background: $gray;
- }
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_blocks.scss b/source/css/scss/objects/_blocks.scss
deleted file mode 100644
index 160963bd6..000000000
--- a/source/css/scss/objects/_blocks.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-/* Generic Placeholder Brick: REMOVE FOR PRODUCTION */
-.brick {
- background: #dcdddc;
- padding: $pad-double;
- text-align: center;
- font-weight: bold;
- border-bottom: 1px solid $gray-light-2;
-}
-
-/* Block */
-.block {
- overflow: hidden;
-
- p:last-child {
- margin-bottom: 0;
- }
-}
-
-.headline {
- line-height: 1.2;
-}
-
-/* Hero Block */
-.block-hero {
- margin-bottom: $space-half;
-
- .b-thumb {
- img {
- display: block;
- }
- }
-
- @media all and (min-width: $bp-large) {
- position: relative;
-
- .b-text {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- background: $dim;
- color: $white;
- padding: $pad-and-half;
- }
- }
-}
-
-/* Block Thumbnail with Headline */
-.block-thumb {
- display: table;
- width: 100%;
- border-collapse: collapse;
-
- .b-inner {
- display: table-row;
- vertical-align: top;
- overflow: hidden;
- }
-
- .b-thumb {
- @media all and (min-width: $bp-small-2) {
- display: table-cell;
- vertical-align: top;
- width: 30%;
- max-width: 10em;
-
- img {
- display: block;
- width: 100%;
- height: auto;
- }
- }
- }
-
- .b-text {
- @media all and (min-width: $bp-small-2) {
- display: table-cell;
- width: 70%;
- padding: 0 $pad;
- }
- }
-}
-
-
-/* Block Headline Summary */
-.block-headline-summary {
- a {
- display: block;
- padding: $pad-half;
- }
-}
-
-/* Block Inset */
-.block-inset {
- position: relative;
-
- .b-thumb {
- position: relative;
- z-index: 0;
-
- img {
- display: block;
- }
- }
-}
-
-/* Hero Block */
-.block-inset {
- margin-bottom: $space-half;
- position: relative;
-
- .headline {
- font-size: 1.1em;
- }
-
- .b-text {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- background: $dim;
- color: $white;
- padding: $pad-half;
- }
-}
-
-/* Block Thumb with Summary */
-.block-thumb-summary {
- .b-thumb {
- float: left;
- width: 50%;
- }
-
- .b-text {
- margin-left: 50%;
- padding: $pad-half;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_buttons.scss b/source/css/scss/objects/_buttons.scss
deleted file mode 100644
index 46fb60d5c..000000000
--- a/source/css/scss/objects/_buttons.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-/*------------------------------------*\
- $BUTTONS
-\*------------------------------------*/
-.btn {
- display: inline-block;
- background: $gray-dark;
- color: $white;
- line-height: 1;
- font-weight: bold;
- padding: $pad;
- border: 0;
- text-align: center;
-
- &:hover, &:focus {
- color: $white;
- }
-
- &.disabled {
- background: $gray-light-2;
- color: $gray-light-4;
- }
-}
-
-.btn-small {
- padding: $pad-half;
-}
-
-.btn-large {
- padding: $pad-half;
- text-transform: uppercase;
- background: $gray;
- font-size: 1.4rem;
- font-weight: normal;
-}
-
-
-.text-btn {
- font-style: italic;
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_carousels.scss b/source/css/scss/objects/_carousels.scss
deleted file mode 100644
index 77e3f197b..000000000
--- a/source/css/scss/objects/_carousels.scss
+++ /dev/null
@@ -1,38 +0,0 @@
-/* Horizontal Carousel */
-.carousel-horizontal {
- margin-bottom: $space;
- overflow: hidden;
- position: relative;
-}
-
-.carousel-island-container {
- overflow: hidden;
-}
-
-.carousel-container {
- position: relative;
-}
-
-.carousel-list {
-
-}
-
-.carousel-controls {
- display: table;
- width: 100%;
- margin: (-$space-half) 0 $space;
-
- a, div {
- display: table-cell;
- padding: $pad-half;
- }
-
- .carousel-pagination {
- text-align: center;
- }
-
- .carousel-next {
- text-align: right;
- }
-
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_comments.scss b/source/css/scss/objects/_comments.scss
deleted file mode 100644
index c42fe91e8..000000000
--- a/source/css/scss/objects/_comments.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-.comments {
- li {
- margin-bottom: $space;
- }
-}
-
-.comment-container {
- overflow: hidden;
- margin-bottom: $space;
-}
-
-.comment-meta {
- float: left;
- width: 6.5em;
-
- img {
- display: block;
- border: 1px solid $gray-light-2;
- margin-bottom: $space-half;
- }
-}
-
-.comment-name {
- font-size: $font-size-sm;
-}
-
-.comment-text {
- margin-left: 9em;
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_footer.scss b/source/css/scss/objects/_footer.scss
deleted file mode 100644
index 884d584a3..000000000
--- a/source/css/scss/objects/_footer.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-/*------------------------------------*\
- $FOOTER
-\*------------------------------------*/
-.footer {
- clear: both;
- overflow: hidden;
- background: $gray-dark-2;
- color: $white;
- line-height: 1.2;
-
- .lc {
- padding: $pad $pad 0;
- }
-
-
- a {
- color: $gray-light;
- }
-
-
-}
-
-//Footer Nav
-.nav-footer {
- margin: (-$pad) (-$pad) $space;
-
- li {
- border-bottom: 1px solid $gray-dark;
-
- @media all and (min-width: $bp-med) {
- border: 0;
- float: left;
- }
- }
-
- a {
- display: block;
- padding: $pad;
- }
-}
-
-.copyright {
- @media all and (min-width: $bp-med) {
- float: right;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_header.scss b/source/css/scss/objects/_header.scss
deleted file mode 100644
index 50a25a397..000000000
--- a/source/css/scss/objects/_header.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.header {
- background: $white;
- padding: 0;
- border-bottom: 1px solid #dbdbdb;
- @extend .lc;
-}
-
-.logo {
- float: left;
- max-width: 8rem;
- margin: 0.4rem;
-
- @media all and (min-width: $bp-med) {
- max-width: 9rem;
- }
-}
-
-.nav-toggle {
- float: right;
- display: block;
- padding: 0.9rem 1rem 0.7rem;
- font-size: 1.3rem;
- line-height: 1;
- border-left: 1px solid #dbdbdb;
-
- @media all and (min-width: $bp-med) {
- display: none;
- }
-}
-
-.search-form {
- overflow: hidden;
- max-height: 0;
-
- @media all and (min-width: $bp-med) {
- float: right;
- max-height: none;
- margin: 0.65em 0.5em 0 0;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_icons.scss b/source/css/scss/objects/_icons.scss
deleted file mode 100644
index cacbf1fbd..000000000
--- a/source/css/scss/objects/_icons.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-
-/* Icon Font */
-@font-face {
- font-family: 'icons';
- src:url('../fonts/icons.eot');
- src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
- url('../fonts/icons.woff') format('woff'),
- url('../fonts/icons.ttf') format('truetype'),
- url('../fonts/icons.svg#icons') format('svg');
- font-weight: normal;
- font-style: normal;
-}
-
-/* Use the following CSS code if you want to use data attributes for inserting your icons */
-[data-icon]:before {
- font-family: 'icons';
- content: attr(data-icon);
- speak: none;
- font-weight: normal;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
-}
-
-.icon-twitter:before, .icon-stumbleupon:before, .icon-pinterest:before, .icon-linkedin:before, .icon-google-plus:before, .icon-search:before, .icon-play:before, .icon-menu:before, .icon-arrow-left:before, .icon-arrow-right:before, .icon-bubble:before, .icon-facebook:before, .icon-feed:before, .icon-youtube:before, .icon-tag:before, .icon-tumblr:before, .icon-instagram, .icon-podcast, .icon-apple,.icon-android, .icon-arrow:after, .icon-envelope:before {
- font-family: 'icons';
- speak: none;
- font-style: normal;
- font-weight: normal;
- font-variant: normal;
- text-transform: none;
- line-height: 1;
- -webkit-font-smoothing: antialiased;
-}
-.icon-twitter:before {
- content: "\74";
-}
-.icon-stumbleupon:before {
- content: "\75";
-}
-.icon-pinterest:before {
- content: "\70";
-}
-.icon-linkedin:before {
- content: "\69";
-}
-.icon-google-plus:before {
- content: "\67";
-}
-.icon-search:before {
- content: "\73";
-}
-.icon-play:before {
- content: "\61";
-}
-.icon-menu:before {
- content: "\21";
-}
-.icon-arrow-left:before {
- content: "\23";
-}
-.icon-arrow-right:before {
- content: "\24";
-}
-.icon-bubble:before {
- content: "\25";
-}
-.icon-facebook:before {
- content: "\66";
-}
-.icon-feed:before {
- content: "\27";
-}
-.icon-youtube:before {
- content: "\79";
-}
-.icon-tag:before {
- content: "\28";
-}
-.icon-tumblr:before {
- content: "\6d";
-}
-.icon-instagram:before {
- content: "\22";
-}
-.icon-podcast:before {
- content: "\26";
-}
-.icon-android:before {
- content: "\29";
-}
-.icon-apple:before {
- content: "\2a";
-}
-.icon-envelope:before {
- content: "\2b";
-}
-
-
-.icon-arrow:after {
- content: "\61";
- display: inline-block;
- -webkit-transform: rotate(90deg);
- -moz-transform: rotate(90deg);
- -ms-transform: rotate(90deg);
- -o-transform: rotate(90deg);
- transform: rotate(90deg);
-}
-
-.icon-play:before {
- font-size: 0.7rem;
- padding-left: 0.2em;
-}
-
-.icon-play-box {
- display: block;
- margin-left: $pad-double;
-}
-
-.icon-play-box:before {
- padding: $pad-quarter;
- background: $gray;
- color: $white;
- margin-left: -1.7rem;
- margin-right: $pad-half;
-}
diff --git a/source/css/scss/objects/_layout.scss b/source/css/scss/objects/_layout.scss
deleted file mode 100644
index 4929d28e3..000000000
--- a/source/css/scss/objects/_layout.scss
+++ /dev/null
@@ -1,288 +0,0 @@
-/*------------------------------------*\
- $LAYOUT
-\*------------------------------------*/
-
-/* Layout Container */
-.lc {
- max-width: $max-width;
- margin: 0 auto;
- padding: $pad-half;
-}
-
-/*------------------------------------*\
- $TEMPLATES
-\*------------------------------------*/
-
-/* Two Column Layout */
-.l-two-col {
- @extend .cf;
-
- .l-main {
- @media all and (min-width: $bp-large) {
- float: left;
- width: 70%;
- padding-right: $pad;
- }
- }
-
- .l-sidebar {
- @media all and (max-width: $bp-large) {
- clear: both;
- }
-
- @media all and (min-width: $bp-large) {
- float: left;
- width: 30%;
- padding: 0 0 0 $pad;
- }
- }
-}
-
-
-/*------------------------------------*\
- $GRIDS
-\*------------------------------------*/
-
-/* Grid Container */
-.g {
- overflow: hidden;
- margin: 0 (-$pad-half);
-}
-
-/* Grid Item */
-.gi {
- padding: $pad-half;
-
- img {
- display: block;
- }
-
- @media all and (min-width: $bp-med) {
- float: left;
- }
-}
-
-/* Grid 1up */
-.g-1up {
- .gi {
- width: 100%;
- }
-}
-
-/* Grid 2up */
-.g-2up {
- @media all and (min-width: $bp-med) {
- > .gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(odd) {
- clear: left;
- }
- }
- }
-}
-
-/* Grid Half (Always displayed side by side) */
-.g-half {
- > .gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(odd) {
- clear: left;
- }
- }
-}
-
-/* Grid 3up */
-.g-3up {
- @media all and (min-width: $bp-med) {
- > .gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(2n+1) {
- clear: left;
- }
- }
- }
-
- @media all and (min-width: $bp-large) {
- > .gi {
- width: 33.3333333%;
-
- &:nth-of-type(2n+1) {
- clear: none;
- }
-
- &:nth-of-type(3n+1) {
- clear: left;
- }
- }
- }
-}
-
-/* Grid 4up */
-.g-4up {
- @media all and (min-width: $bp-med) {
- >.gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(2n+1) {
- clear: both;
- }
- }
- }
-
- @media all and (min-width: $bp-large) {
- >.gi {
- width: 25%;
-
- &:nth-of-type(2n+1) {
- clear: none;
- }
-
- &:nth-of-type(4n+1) {
- clear: left;
- }
- }
- }
-}
-
-/* Grid Quarter (Always displayed side by side) */
-.g-quarter {
- > .gi {
- float: left;
- width: 24%;
-
- &:nth-of-type(4n+1) {
- clear: left;
- }
- }
-}
-
-.g-max4 {
-
- @media all and (min-width: $bp-small-2) {
- >.gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(2n+1) {
- clear: both;
- }
- }
- }
-
- @media all and (min-width: $bp-small-3) {
- >.gi {
- width: 33.3333333%;
-
- &:nth-of-type(2n+1) {
- clear: none;
- }
-
- &:nth-of-type(3n+1) {
- clear: left;
- }
- }
- }
-
- @media all and (min-width: $bp-large) {
- >.gi {
- width: 25%;
-
- &:nth-of-type(3n+1) {
- clear: none;
- }
-
- &:nth-of-type(4n+1) {
- clear: left;
- }
- }
- }
-}
-
-/* Grid 5up */
-.g-max5 {
-
- >.gi {
- float: left;
- width: 50%;
-
- &:nth-of-type(2n+1) {
- clear: both;
- }
- }
-
- @media all and (min-width: $bp-small-3) {
- >.gi {
- width: 33.3333333%;
-
- &:nth-of-type(2n+1) {
- clear: none;
- }
-
- &:nth-of-type(3n+1) {
- clear: left;
- }
- }
- }
-
- @media all and (min-width: $bp-med) {
- >.gi {
- width: 25%;
-
- &:nth-of-type(3n+1) {
- clear: none;
- }
-
- &:nth-of-type(4n+1) {
- clear: left;
- }
- }
- }
-
- @media all and (min-width: $bp-med-2) {
- >.gi {
- width: 20%;
-
- &:nth-of-type(4n+1) {
- clear: none;
- }
-
- &:nth-of-type(5n+1) {
- clear: left;
- }
- }
- }
-}
-
-/* Grid 2/3 */
-.gi-2-3 {
- @media all and (min-width: $bp-med) {
- float: left;
- width: 66.666666%;
- }
-}
-
-.gi-1-3 {
- @media all and (min-width: $bp-med) {
- float: left;
- width: 33.333333%;
- }
-}
-
-/* Grid 4up block */
-.g-opposites {
- .gi {
- float: left;
-
- &:last-child {
- float: right;
- text-align: right;
- }
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_lists.scss b/source/css/scss/objects/_lists.scss
deleted file mode 100644
index 0c4e8beaa..000000000
--- a/source/css/scss/objects/_lists.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-.inline-list {
- li {
- display: inline-block;
- }
-}
-
-/* Social List */
-.social-list {
- li {
- margin: 0 0.4rem $space 0;
- }
-
- a {
- font-size: 1.6em;
- }
-}
-
-
-/* Headline List */
-.headline-list {
- margin-bottom: $space;
-
- &.flush {
- margin: 0;
- }
-
- h4 {
- font-weight: normal;
- }
-
- li {
- padding: $pad-quarter 0;
- border-top: 1px solid $gray-light-3;
- }
-}
-
-/* Post List */
-.post-list {
- li {
- margin-bottom: $space;
- }
-}
-
-/* Bullet List */
-.bullet-list {
- list-style: square;
- margin: 0 0 1em 1.2em;
- line-height: 1.3;
-
- li {
- margin-bottom: $space;
- }
-}
-
-/* Text List */
-.text-list {
- margin: 0 0 1em;
- line-height: 1.3;
-
- li {
- margin-bottom: $space;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_main.scss b/source/css/scss/objects/_main.scss
deleted file mode 100644
index 592c01dea..000000000
--- a/source/css/scss/objects/_main.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/*------------------------------------*\
- $MAIN CONTENT AREA
-\*------------------------------------*/
-[role=main] {
- padding: $pad-half $pad-half $pad-double;
- overflow: hidden;
- @extend .lc;
- @extend .cf;
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_messaging.scss b/source/css/scss/objects/_messaging.scss
deleted file mode 100644
index 713ec0249..000000000
--- a/source/css/scss/objects/_messaging.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/*------------------------------------*\
- $MESSAGING
-\*------------------------------------*/
-
-// Alerts
-.alert {
- text-align: center;
- padding: $pad;
- margin-bottom: $space-half;
- border: 1px solid $gray;
- background: $gray-light;
-}
-
-.alert-error {
- color: $error;
- border-color: $error;
- background: #ffbebe;
-}
diff --git a/source/css/scss/objects/_nav.scss b/source/css/scss/objects/_nav.scss
deleted file mode 100644
index b98e3300e..000000000
--- a/source/css/scss/objects/_nav.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-/*------------------------------------*\
- $NAVIGATION
-\*------------------------------------*/
-
-.nav {
- clear: both;
- overflow: hidden;
- max-height: 0;
-
- a {
- display: block;
- padding: $pad;
- border-top: 1px solid $gray-light-2;
- }
-
- &.active {
- max-height: 40em;
- }
-
- @media all and (min-width: $bp-med) {
- max-height: none;
- float: right;
- clear: none;
-
- li {
- float: left;
- }
-
- a {
- border: 0;
- }
-
- }
-}
-
-//Pagination
-.pagination {
- overflow: hidden;
-
- li {
- float: left;
- border-right: 1px solid $gray-light-2;
-
- &:last-child {
- border: 0;
- }
- }
-
- a {
- padding: $pad;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_sections.scss b/source/css/scss/objects/_sections.scss
deleted file mode 100644
index 7235af263..000000000
--- a/source/css/scss/objects/_sections.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-.section {
- margin: 0 0 $space;
-}
-
-.section-title {
- margin-bottom: $space-half;
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_tabs.scss b/source/css/scss/objects/_tabs.scss
deleted file mode 100644
index b22ca7438..000000000
--- a/source/css/scss/objects/_tabs.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.tabs {
- overflow: hidden;
-
- ul {
- display: table;
- width: 100%;
- }
-
- li {
- display: table-cell;
- text-align: center;
- border-right: 1px solid $gray-light-3;
-
- &:last-child {
- border-right: 0;
- }
- }
-
- a {
- display: block;
- padding: $pad-half;
- background: $gray;
-
- &:hover, &:focus {
- background: $gray-light-3;
- }
-
- &.active {
- background: $gray-dark;
- color: $white;
- }
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_text.scss b/source/css/scss/objects/_text.scss
deleted file mode 100644
index 42f1b4705..000000000
--- a/source/css/scss/objects/_text.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-/* Global Font Classes */
-.font-secondary {
- font-family: $font-secondary;
-}
-
-//Intro text
-.intro {
- font-size: $font-size-slightly-larger;
- font-weight: bold;
-}
-
-//Pullquote
-.pullquote {
- font-family: $font-secondary;
- font-size: $font-size-large;
-}
-
-//Text Passages
-.text {
- a {
- text-decoration: underline;
- }
-
- ul {
- list-style: disc;
- margin: 0 0 $space 1.2em;
-
- ul {
- margin-bottom: 0;
- }
- }
-
- ol {
- list-style: decimal;
- margin: 0 0 $space 1.2em;
-
- ol {
- margin-bottom: 0;
- }
- }
-}
-
-/* Review Grade Tile */
-.grade {
- display: block;
- font-weight: bold;
- background: $gray;
- color: $white;
- min-height: 4.5rem;
- padding-top: 1.5rem;
- text-align: center;
-}
-
-/* Eyebrow */
-.eyebrow {
- background: $gray-dark;
- color: $white;
- padding: 0.2em;
- display: inline-block;
- margin-bottom: $space-half;
-}
-
-.eyebrow-image {
- position: relative;
-
- img {
- position: relative;
- z-index: 0;
- }
-
- .eyebrow {
- position: absolute;
- top: 0;
- left: 0;
- z-index: 1;
- }
-}
\ No newline at end of file
diff --git a/source/css/scss/objects/_tooltip.scss b/source/css/scss/objects/_tooltip.scss
deleted file mode 100644
index e0fdd95da..000000000
--- a/source/css/scss/objects/_tooltip.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-.tooltip-container {
- display: inline-block;
- position: relative;
-
- &:hover {
- .tooltip {
- display: block;
- }
- }
-}
-
-.tooltip-link {
- background: $gray-light;
-}
-
-.tooltip {
- display: none;
- position: absolute;
- top: 1.5em;
- left: 0;
- width: 18em;
- padding: $pad;
- background: $white;
- border: 1px solid $gray;
- box-shadow: 0.3em 0.3em 1em 0 rgba(0,0,0,0.2);
-
- h2 {
- margin-top: 0;
- }
-
- @media all and (min-width: $bp-small) {
- width: 22em;
- }
-
- @media all and (min-width: $bp-small-2) {
- width: 27em;
- }
-
- @media all and (min-width: $bp-small-3) {
- width: 30em;
- }
-}
\ No newline at end of file
diff --git a/source/css/style.scss b/source/css/style.scss
deleted file mode 100644
index 761b1d3d3..000000000
--- a/source/css/style.scss
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
- ,, ,, ,,
- .M"""bgd mm db `7MM mm mm `7MM OO OO OO
-,MI "Y MM MM MM MM MM 88 88 88
-`MMb. mmMMmm ,pW"Wq.`7MMpdMAo. `7Mb,od8 `7MM .P"Ybmmm MMpMMMb.mmMMmm mmMMmm MMpMMMb. .gP"Ya `7Mb,od8 .gP"Ya || || ||
- `YMMNq. MM 6W' `Wb MM `Wb MM' "' MM :MI I8 MM MM MM MM MM MM ,M' Yb MM' "',M' Yb || || ||
-. `MM MM 8M M8 MM M8 MM MM WmmmP" MM MM MM MM MM MM 8M"""""" MM 8M"""""" `' `' `'
-Mb dM MM YA. ,A9 MM ,AP MM MM 8M MM MM MM MM MM MM YM. , MM YM. , ,, ,, ,,
-P"Ybmmd" `Mbmo`Ybmd9' MMbmmd' .JMML. .JMML.YMMMMMb .JMML JMML.`Mbmo `Mbmo.JMML JMML.`Mbmmd'.JMML. `Mbmmd' db db db
- MM 6' dP
- .JMML. Ybmmmd'
-Pattern Lab doesn't have any CSS requirements, which means you can write your styles however you want. Hooray!
-You can use Sass, Less, vanilla CSS, or some other crazy thing I haven't heard of yet.
-So please don't use these styles. They're just here to put together the demo, and nothing more.
-They're intentionally gray, boring, and crappy because you're supposed to do this stuff yourself.
-Atomic design is philosophically complimentary with these CSS approaches:
-* SMACSS by Jonathan Snook http://smacss.com/
-* OOCSS by Nicole Sullivan http://oocss.org/
-* BEM CSS Methology : http://bem.info/method/
-* CSS Guidelines by Harry Roberts : https://github.com/csswizardry/CSS-Guidelines
-So feel free to use any of these approaches. Or don't. It's totally up to you.
-*/
-
-
-/*------------------------------------*\
- $TABLE OF CONTENTS
-\*------------------------------------*/
-/**
- * VARIABLES..............................Declarations of Sass variables
- * .....Colors
- * .....Typography
- * .....Layout
- * .....Defaults
- * .....Breakpoints
- * MIXINS.................................Sass mixins
- * RESET..................................Set reset defaults
- * GLOBAL CLASSES.........................Set reset defaults
- * GLOBAL ELEMENTS........................Establish global styles
- * .....Main
- * .....Headings
- * .....Text-related elements (p, blockquote, lists)
- * .....Defaults
- * .....Breakpoints
- * TYPOGRAPHY------------------------------
- * MEDIA------------------------------
- * LAYOUT------------------------------
- * NAVIGATION------------------------------
- * TOC To Be Continued
- */
-
-
-
-@import "scss/generic/variables";
-@import "scss/generic/mixins";
-@import "scss/generic/reset";
-
-
-
-
-
-/*------------------------------------*\
- $GLOBAL ELEMENTS
-\*------------------------------------*/
-@import "scss/base/global-classes";
-@import "scss/base/main";
-@import "scss/base/links";
-@import "scss/base/headings";
-@import "scss/base/text";
-@import "scss/base/lists";
-@import "scss/base/media";
-@import "scss/base/forms";
-@import "scss/base/tables";
-@import "scss/base/animation";
-
-
-
-
-
-/*------------------------------------*\
- $LAYOUT
-\*------------------------------------*/
-@import "scss/objects/layout";
-
-
-/*------------------------------------*\
- $PAGE STRUCTURE
-\*------------------------------------*/
-@import "scss/objects/header";
-@import "scss/objects/nav";
-@import "scss/objects/main";
-@import "scss/objects/footer";
-
-
-
-/*------------------------------------*\
- $TEXT Styles
-\*------------------------------------*/
-@import "scss/objects/text";
-
-
-/*------------------------------------*\
- $COMPONENTS
-\*------------------------------------*/
-@import "scss/objects/icons";
-@import "scss/objects/buttons";
-@import "scss/objects/blocks";
-@import "scss/objects/lists";
-@import "scss/objects/tooltip";
-@import "scss/objects/accordion";
-@import "scss/objects/tabs";
-@import "scss/objects/sections";
-@import "scss/objects/article";
-@import "scss/objects/comments";
-@import "scss/objects/messaging";
diff --git a/test/files/_patterns/00-test/10-multiple-classes-numeric.mustache b/test/files/_patterns/00-test/10-multiple-classes-numeric.mustache
new file mode 100644
index 000000000..307439ce4
--- /dev/null
+++ b/test/files/_patterns/00-test/10-multiple-classes-numeric.mustache
@@ -0,0 +1,5 @@
+
+ {{> test-styled-atom:foo1 }}
+ {{> test-styled-atom:foo1|foo2 }}
+ {{> test-styled-atom:foo1|foo2(message: "bar") }}
+
diff --git a/test/files/_patterns/00-test/11-bookend-listitem.mustache b/test/files/_patterns/00-test/11-bookend-listitem.mustache
new file mode 100644
index 000000000..816c37c92
--- /dev/null
+++ b/test/files/_patterns/00-test/11-bookend-listitem.mustache
@@ -0,0 +1,7 @@
+
+ {{#listItems.two}}
+ {{> test-styled-atom }}
+ {{> test-styled-atom:test_1 }}
+ {{> test-styled-atom}}
+ {{/listItems.two}}
+
diff --git a/test/lineage_hunter_tests.js b/test/lineage_hunter_tests.js
index d773f6d6e..0cd6a4aea 100644
--- a/test/lineage_hunter_tests.js
+++ b/test/lineage_hunter_tests.js
@@ -4,7 +4,7 @@
var lh = require('../builder/lineage_hunter');
exports['lineage hunter '] = {
- 'test lineage hunter finds lineage' : function(test){
+ 'find_lineage - finds lineage' : function(test){
//setup current pattern from what we would have during execution
var currentPattern = {
@@ -19,6 +19,7 @@
"patternGroup": "organisms",
"patternSubGroup": "organisms\\00-global",
"flatPatternPath": "02-organisms\\00-global",
+ "key": "organisms-header",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -39,6 +40,7 @@
"patternGroup": "atoms",
"patternSubGroup": "atoms\\03-images",
"flatPatternPath": "00-atoms\\03-images",
+ "key": "atoms-logo",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -57,6 +59,7 @@
"patternGroup": "molecules",
"patternSubGroup": "molecules\\05-navigation",
"flatPatternPath": "01-molecules\\05-navigation",
+ "key": "molecules-primary-nav",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -75,6 +78,7 @@
"patternGroup": "molecules",
"patternSubGroup": "molecules\\04-forms",
"flatPatternPath": "01-molecules\\04-forms",
+ "key": "molecules-search",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -95,7 +99,7 @@
test.done();
},
- 'test lineage hunter finds lineage with spaced pattern parameters' : function(test){
+ 'find_lineage - finds lineage with spaced pattern parameters' : function(test){
//setup current pattern from what we would have during execution
var currentPattern = {
"name": "01-molecules-01-toast-00-error",
@@ -109,6 +113,7 @@
"patternGroup": "molecules",
"patternSubGroup": "molecules\\01-toast",
"flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -129,6 +134,7 @@
"patternGroup": "atoms",
"patternSubGroup": "atoms\\05-alerts",
"flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -147,7 +153,7 @@
test.done();
},
- 'test lineage hunter finds lineage with unspaced pattern parameters' : function(test){
+ 'find_lineage - finds lineage with unspaced pattern parameters' : function(test){
//setup current pattern from what we would have during execution
var currentPattern = {
"name": "01-molecules-01-toast-00-error",
@@ -161,6 +167,7 @@
"patternGroup": "molecules",
"patternSubGroup": "molecules\\01-toast",
"flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -181,6 +188,7 @@
"patternGroup": "atoms",
"patternSubGroup": "atoms\\05-alerts",
"flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -201,7 +209,169 @@
test.done();
},
- 'test lineage hunter does not apply lineage twice' : function(test){
+ 'find_lineage - finds lineage with spaced styleModifier' : function(test){
+ //setup current pattern from what we would have during execution
+ var currentPattern = {
+ "name": "01-molecules-01-toast-00-error",
+ "subdir": "01-molecules\\01-toast",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": "{{> atoms-error:foo }}",
+ "patternPartial": "{{> atoms-error:foo }}",
+ "patternName": "error",
+ "patternLink": "01-molecules-01-toast-00-error/01-molecules-01-toast-00-error.html",
+ "patternGroup": "molecules",
+ "patternSubGroup": "molecules\\01-toast",
+ "flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ };
+ var patternlab = {
+ patterns: [
+ {
+ "name": "01-atoms-05-alerts-00-error",
+ "subdir": "01-atoms\\05-alerts",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": " {{message}}
",
+ "patternPartial": " {{message}}
",
+ "patternName": "error",
+ "patternLink": "01-atoms-05-alerts-00-error/01-atoms-05-alerts-00-error.html",
+ "patternGroup": "atoms",
+ "patternSubGroup": "atoms\\05-alerts",
+ "flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ }
+ ]
+ };
+
+ var lineage_hunter = new lh();
+ lineage_hunter.find_lineage(currentPattern, patternlab);
+
+ test.equals(currentPattern.lineageIndex.length, 1);
+ test.equals(currentPattern.lineageIndex[0], "atoms-error");
+
+ test.done();
+ },
+
+ 'find_lineage - finds lineage with unspaced styleModifier' : function(test){
+ //setup current pattern from what we would have during execution
+ var currentPattern = {
+ "name": "01-molecules-01-toast-00-error",
+ "subdir": "01-molecules\\01-toast",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": "{{> atoms-error:foo }}",
+ "patternPartial": "{{>atoms-error:foo}}",
+ "patternName": "error",
+ "patternLink": "01-molecules-01-toast-00-error/01-molecules-01-toast-00-error.html",
+ "patternGroup": "molecules",
+ "patternSubGroup": "molecules\\01-toast",
+ "flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ };
+ var patternlab = {
+ patterns: [
+ {
+ "name": "01-atoms-05-alerts-00-error",
+ "subdir": "01-atoms\\05-alerts",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": " {{message}}
",
+ "patternPartial": " {{message}}
",
+ "patternName": "error",
+ "patternLink": "01-atoms-05-alerts-00-error/01-atoms-05-alerts-00-error.html",
+ "patternGroup": "atoms",
+ "patternSubGroup": "atoms\\05-alerts",
+ "flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ }
+ ]
+ };
+
+ var lineage_hunter = new lh();
+ lineage_hunter.find_lineage(currentPattern, patternlab);
+
+ test.equals(currentPattern.lineageIndex.length, 1);
+ test.equals(currentPattern.lineageIndex[0], "atoms-error");
+
+ test.done();
+ },
+
+ 'find_lineage - finds lineage with fuzzy partial with styleModifier' : function(test){
+ //setup current pattern from what we would have during execution
+ var currentPattern = {
+ "name": "01-molecules-01-toast-00-error",
+ "subdir": "01-molecules\\01-toast",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": "{{> atoms-e:foo }}",
+ "patternPartial": "{{>atoms-e:foo}}",
+ "patternName": "error",
+ "patternLink": "01-molecules-01-toast-00-error/01-molecules-01-toast-00-error.html",
+ "patternGroup": "molecules",
+ "patternSubGroup": "molecules\\01-toast",
+ "flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ };
+ var patternlab = {
+ patterns: [
+ {
+ "name": "01-atoms-05-alerts-00-error",
+ "subdir": "01-atoms\\05-alerts",
+ "filename": "00-error.mustache",
+ "data": null,
+ "template": " {{message}}
",
+ "patternPartial": " {{message}}
",
+ "patternName": "error",
+ "patternLink": "01-atoms-05-alerts-00-error/01-atoms-05-alerts-00-error.html",
+ "patternGroup": "atoms",
+ "patternSubGroup": "atoms\\05-alerts",
+ "flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
+ "patternState": "",
+ "lineage": [],
+ "lineageIndex": [],
+ "lineageR": [],
+ "lineageRIndex": []
+ }
+ ]
+ };
+
+ var lineage_hunter = new lh();
+ lineage_hunter.find_lineage(currentPattern, patternlab);
+
+ test.equals(currentPattern.lineageIndex.length, 1);
+ test.equals(currentPattern.lineageIndex[0], "atoms-error");
+
+ test.done();
+ },
+
+ 'find_lineage - does not apply lineage twice' : function(test){
//setup current pattern from what we would have during execution
var currentPattern = {
"name": "01-molecules-01-toast-00-error",
@@ -215,6 +385,7 @@
"patternGroup": "molecules",
"patternSubGroup": "molecules\\01-toast",
"flatPatternPath": "01-molecules\\01-toast",
+ "key": "molecules-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -235,6 +406,7 @@
"patternGroup": "atoms",
"patternSubGroup": "atoms\\05-alerts",
"flatPatternPath": "01-atoms\\05-alerts",
+ "key": "atoms-error",
"patternState": "",
"lineage": [],
"lineageIndex": [],
@@ -254,8 +426,7 @@
test.equals(JSON.parse(patternlab.patterns[0].lineageR).lineagePattern, 'molecules-error');
test.done();
- },
-
+ }
};
diff --git a/test/list_item_hunter_tests.js b/test/list_item_hunter_tests.js
index d2de41468..b2895b24d 100644
--- a/test/list_item_hunter_tests.js
+++ b/test/list_item_hunter_tests.js
@@ -2,6 +2,8 @@
"use strict";
var lih = require('../builder/list_item_hunter');
+ var pa = require('../builder/pattern_assembler');
+ var object_factory = require('../builder/object_factory');
exports['list_item_hunter'] = {
'process_list_item_partials finds and outputs basic repeating blocks' : function(test){
@@ -34,7 +36,8 @@
"link": {},
"partials": []
},
- "config": {"debug": false}
+ "config": {"debug": false},
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -78,7 +81,8 @@
"link": {},
"partials": []
},
- "config": {"debug": false}
+ "config": {"debug": false},
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -130,7 +134,8 @@
"key": "test-simple",
"jsonFileData" : {}
}
- ]
+ ],
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -148,14 +153,14 @@
var pattern1 = {
"template": "{{#listItems.one}}{{> 00-test/00-foo }}{{/listItems.one}}",
"extendedTemplate" : "{{#listItems.one}}{{> 00-test/00-foo }}{{/listItems.one}}",
- "key": "test-patternName1",
+ "key": "test-foo",
"jsonFileData" : {}
};
var pattern2 = {
"template": "{{#listItems.two}}{{> 00-test/01-bar.mustache }}{{/listItems.two}}",
"extendedTemplate" : "{{#listItems.two}}{{> 00-test/01-bar.mustache }}{{/listItems.two}}",
- "key": "test-patternName2",
+ "key": "test-bar",
"jsonFileData" : {}
};
@@ -186,16 +191,19 @@
"extendedTemplate" : "{{ title }}",
"subdir": "00-test",
"fileName": "00-foo",
- "jsonFileData" : {}
+ "jsonFileData" : {},
+ "key": "test-foo",
},
{
"template": "{{ title }}",
"extendedTemplate" : "{{ title }}",
"subdir": "00-test",
"fileName": "01-bar",
- "jsonFileData" : {}
+ "jsonFileData" : {},
+ "key": "test-bar",
}
- ]
+ ],
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -259,7 +267,8 @@
"key": "test-simple",
"jsonFileData" : {}
}
- ]
+ ],
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -321,7 +330,8 @@
"key": "test-simple",
"jsonFileData" : {}
}
- ]
+ ],
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -383,7 +393,8 @@
"key": "test-simple",
"jsonFileData" : {}
}
- ]
+ ],
+ "partials" : {}
};
var list_item_hunter = new lih();
@@ -394,6 +405,59 @@
//assert
test.equals(currentPattern.extendedTemplate, "One" );
+ test.done();
+ },
+
+ 'process_list_item_partials - correctly ignores bookended partials without a style modifier when the same partial has a style modifier between' : function(test){
+ //arrange
+ var fs = require('fs-extra');
+ var pattern_assembler = new pa();
+ var list_item_hunter = new lih();
+ var patterns_dir = './test/files/_patterns';
+
+ var pl = {};
+ pl.config = {};
+ pl.data = {};
+ pl.data.link = {};
+ pl.config.debug = false;
+ pl.patterns = [];
+ pl.partials = {};
+ pl.config.patterns = { source: patterns_dir};
+ pl.listitems = {
+ "1": [
+ {
+ "message": "Foo"
+ }
+ ],
+ "2": [
+ {
+ "message": "Foo"
+ },
+ {
+ "message": "Bar"
+ }
+ ]
+ };
+
+ var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
+ atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
+ atomPattern.extendedTemplate = atomPattern.template;
+ atomPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(atomPattern);
+
+ var bookendPattern = new object_factory.oPattern('test/files/_patterns/00-test/11-bookend-listitem.mustache', '00-test', '11-bookend-listitem.mustache');
+ bookendPattern.template = fs.readFileSync(patterns_dir + '/00-test/11-bookend-listitem.mustache', 'utf8');
+ bookendPattern.extendedTemplate = bookendPattern.template;
+ bookendPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(bookendPattern);
+
+ pl.patterns.push(atomPattern);
+ pl.patterns.push(bookendPattern);
+
+ //act
+ list_item_hunter.process_list_item_partials(bookendPattern, pl);
+
+ //assert. here we expect {{styleModifier}} to be replaced with an empty string or the styleModifier value from the found partial with the :styleModifier
+ var expectedValue = ' Foo Foo Foo Bar Bar Bar
';
+ test.equals(bookendPattern.extendedTemplate.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim(), expectedValue.trim());
test.done();
}
diff --git a/test/object_factory_tests.js b/test/object_factory_tests.js
index 6ce2693a1..f58b2e664 100644
--- a/test/object_factory_tests.js
+++ b/test/object_factory_tests.js
@@ -31,6 +31,12 @@
test.equals(p.patternName, 'colors-alt');
test.equals(p.patternDisplayName, 'Colors Alt');
test.done();
+ },
+ 'test oPattern removes pattern paramter from key correctly' : function(test){
+ var p = new of.oPattern('source/_patterns/00-atoms/00-global/00-colors-alt.mustache', '00-atoms/00-global', '00-colors-alt.mustache', { d: 123});
+ test.equals(p.patternName, 'colors-alt');
+ test.equals(p.patternDisplayName, 'Colors Alt');
+ test.done();
}
};
diff --git a/test/parameter_hunter_tests.js b/test/parameter_hunter_tests.js
index b9bd5474a..f2ecdc414 100644
--- a/test/parameter_hunter_tests.js
+++ b/test/parameter_hunter_tests.js
@@ -26,26 +26,27 @@
};
var patternlab = {
patterns: [
- {
- "fileName": "02-single-comment",
- "subdir": "01-molecules/06-components",
- "name": "01-molecules-06-components-02-single-comment",
- "patternName": "single-comment",
- "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html",
- "patternGroup": "molecules",
- "patternSubGroup": "components",
- "flatPatternPath": "01-molecules-06-components",
- "key": "molecules-single-comment",
- "template": "{{description}}
",
- "extendedTemplate": "{{description}}
"
- }
+ {
+ "fileName": "02-single-comment",
+ "subdir": "01-molecules/06-components",
+ "name": "01-molecules-06-components-02-single-comment",
+ "patternName": "single-comment",
+ "patternLink": "01-molecules-06-components-02-single-comment/01-molecules-06-components-02-single-comment.html",
+ "patternGroup": "molecules",
+ "patternSubGroup": "components",
+ "flatPatternPath": "01-molecules-06-components",
+ "key": "molecules-single-comment",
+ "template": "{{description}}
",
+ "extendedTemplate": "{{description}}
"
+ }
],
config: {
debug: false
},
data: {
description: 'Not a quote from a smart man'
- }
+ },
+ partials: {},
};
var parameter_hunter = new ph();
@@ -77,6 +78,7 @@
]
};
var patternlab = {
+ partials: {},
patterns: [
{
"fileName": "02-single-comment",
@@ -130,7 +132,8 @@
]
};
var patternlab = {
- patterns: [
+ partials: {},
+ patterns: [
{
"fileName": "02-single-comment",
"subdir": "01-molecules/06-components",
@@ -182,7 +185,8 @@
]
};
var patternlab = {
- patterns: [
+ partials: {},
+ patterns: [
{
"fileName": "02-single-comment",
"subdir": "01-molecules/06-components",
diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js
index 6953e2324..5ba989a11 100644
--- a/test/pattern_assembler_tests.js
+++ b/test/pattern_assembler_tests.js
@@ -2,7 +2,8 @@
"use strict";
var pa = require('../builder/pattern_assembler');
- var object_factory = require('../builder/object_factory');
+ var object_factory = require('../builder/object_factory');
+ var path = require('path');
exports['pattern_assembler'] = {
'find_pattern_partials finds partials' : function(test){
@@ -21,7 +22,6 @@
test.done();
},
-
'find_pattern_partials finds verbose partials' : function(test){
//setup current pattern from what we would have during execution
@@ -38,7 +38,6 @@
test.done();
},
-
'find_pattern_partials_with_style_modifiers finds style modifiers' : function(test){
//setup current pattern from what we would have during execution
@@ -54,7 +53,6 @@
test.done();
},
-
'find_pattern_partials_with_style_modifiers finds style modifiers with parameters present too' : function(test){
//setup current pattern from what we would have during execution
@@ -70,7 +68,6 @@
test.done();
},
-
'find_pattern_partials_with_style_modifiers finds style modifiers with verbose partials' : function(test){
//setup current pattern from what we would have during execution
@@ -86,7 +83,6 @@
test.done();
},
-
'find_pattern_partials_with_style_modifiers finds no style modifiers when only partials present' : function(test){
//setup current pattern from what we would have during execution
@@ -101,7 +97,6 @@
test.done();
},
-
'find_pattern_partials_with_style_modifiers finds no style modifiers when only partials with pattern parameters present' : function(test){
//setup current pattern from what we would have during execution
@@ -116,7 +111,6 @@
test.done();
},
-
'find_pattern_partials_with_parameters finds parameters' : function(test){
//setup current pattern from what we would have during execution
@@ -133,7 +127,6 @@
test.done();
},
-
'find_pattern_partials_with_parameters finds parameters when stylemodifiers present too' : function(test){
//setup current pattern from what we would have during execution
@@ -150,7 +143,6 @@
test.done();
},
-
'find_pattern_partials_with_parameters finds parameters with verbose partials' : function(test){
//setup current pattern from what we would have during execution
@@ -167,7 +159,6 @@
test.done();
},
-
'find_pattern_partials_with_parameters finds no style modifiers when only partials present' : function(test){
//setup current pattern from what we would have during execution
@@ -182,7 +173,6 @@
test.done();
},
-
'find_pattern_partials_with_parameters finds no style modifiers when only partials with style modifiers present' : function(test){
//setup current pattern from what we would have during execution
@@ -197,7 +187,6 @@
test.done();
},
-
'process_pattern_recursive recursively includes partials' : function(test){
//tests inclusion of partial that will be discovered by diveSync later in iteration than parent
@@ -209,11 +198,12 @@
var patterns_dir = './test/files/_patterns';
var patternlab = {};
patternlab.config = fs.readJSONSync('./config.json');
- patternlab.config.patterns = {source: patterns_dir};
- patternlab.data = fs.readJSONSync('./source/_data/data.json');
- patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
- patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
- patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8');
+ patternlab.config.paths.source.patterns = patterns_dir;
+
+ patternlab.data = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'data.json'));
+ patternlab.listitems = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'listitems.json'));
+ patternlab.header = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/header.html'), 'utf8');
+ patternlab.footer = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/footer.html'), 'utf8');
patternlab.patterns = [];
patternlab.data.link = {};
patternlab.partials = {};
@@ -237,7 +227,7 @@
return;
}
- pattern_assembler.process_pattern_iterative(file.substring(2), patternlab);
+ pattern_assembler.process_pattern_iterative(path.resolve(file), patternlab);
}
);
@@ -261,7 +251,7 @@
return;
}
- pattern_assembler.process_pattern_recursive(file.substring(2), patternlab);
+ pattern_assembler.process_pattern_recursive(path.resolve(file), patternlab);
}
);
@@ -293,12 +283,18 @@
var patterns_dir = './test/files/_patterns';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
@@ -308,8 +304,8 @@
groupPattern.template = fs.readFileSync(patterns_dir + '/00-test/04-group.mustache', 'utf8');
groupPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(groupPattern);
- pl.patterns.push(atomPattern);
- pl.patterns.push(groupPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(groupPattern, pl);
//act
pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/04-group.mustache', pl, {});
@@ -319,6 +315,47 @@
test.equals(groupPattern.extendedTemplate.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim(), expectedValue.trim());
test.done();
},
+ 'processPatternRecursive - correctly replaces multiple stylemodifier classes on same partial' : function(test){
+ //arrange
+ var fs = require('fs-extra');
+ var pattern_assembler = new pa();
+ var patterns_dir = './test/files/_patterns';
+
+ var pl = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
+ pl.data = {};
+ pl.data.link = {};
+ pl.config.debug = false;
+ pl.patterns = [];
+ pl.partials = {};
+
+ var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
+ atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
+ atomPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(atomPattern);
+ atomPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(atomPattern);
+
+ var groupPattern = new object_factory.oPattern('test/files/_patterns/00-test/10-multiple-classes-numeric.mustache', '00-test', '10-multiple-classes-numeric.mustache');
+ groupPattern.template = fs.readFileSync(patterns_dir + '/00-test/10-multiple-classes-numeric.mustache', 'utf8');
+ groupPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(groupPattern);
+ groupPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(groupPattern);
+
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(groupPattern, pl);
+
+ //act
+ pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/10-multiple-classes-numeric.mustache', pl, {});
+
+ //assert
+ var expectedValue = ' {{message}} {{message}} bar
';
+ test.equals(groupPattern.extendedTemplate.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim(), expectedValue.trim());
+ test.done();
+ },
'processPatternRecursive - correctly ignores a partial without a style modifier when the same partial later has a style modifier' : function(test){
//arrange
var fs = require('fs-extra');
@@ -326,12 +363,18 @@
var patterns_dir = './test/files/_patterns';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
@@ -341,8 +384,8 @@
mixedPattern.template = fs.readFileSync(patterns_dir + '/00-test/06-mixed.mustache', 'utf8');
mixedPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(mixedPattern);
- pl.patterns.push(atomPattern);
- pl.patterns.push(mixedPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(mixedPattern, pl);
//act
pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/06-mixed.mustache', pl, {});
@@ -359,12 +402,18 @@
var patterns_dir = './test/files/_patterns';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
@@ -374,8 +423,8 @@
bookendPattern.template = fs.readFileSync(patterns_dir + '/00-test/09-bookend.mustache', 'utf8');
bookendPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(bookendPattern);
- pl.patterns.push(atomPattern);
- pl.patterns.push(bookendPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(bookendPattern, pl);
//act
pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/09-bookend.mustache', pl, {});
@@ -392,25 +441,31 @@
var patterns_dir = './test/files/_patterns';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
atomPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(atomPattern);
- atomPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(atomPattern);
+ atomPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(atomPattern);
var mixedPattern = new object_factory.oPattern('test/files/_patterns/00-test/07-mixed-params.mustache', '00-test', '07-mixed-params.mustache');
mixedPattern.template = fs.readFileSync(patterns_dir + '/00-test/07-mixed-params.mustache', 'utf8');
mixedPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(mixedPattern);
- mixedPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(mixedPattern);
+ mixedPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(mixedPattern);
- pl.patterns.push(atomPattern);
- pl.patterns.push(mixedPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(mixedPattern, pl);
//act
pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/07-mixed-params.mustache', pl, {});
@@ -427,25 +482,31 @@
var patterns_dir = './test/files/_patterns';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
atomPattern.template = fs.readFileSync(patterns_dir + '/00-test/03-styled-atom.mustache', 'utf8');
atomPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(atomPattern);
- atomPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(atomPattern);
+ atomPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(atomPattern);
var bookendPattern = new object_factory.oPattern('test/files/_patterns/00-test/08-bookend-params.mustache', '00-test', '08-bookend-params.mustache');
bookendPattern.template = fs.readFileSync(patterns_dir + '/00-test/08-bookend-params.mustache', 'utf8');
bookendPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(bookendPattern);
- bookendPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(bookendPattern);
+ bookendPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(bookendPattern);
- pl.patterns.push(atomPattern);
- pl.patterns.push(bookendPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
+ pattern_assembler.addPattern(bookendPattern, pl);
//act
pattern_assembler.process_pattern_recursive('test/files/_patterns/00-test/08-bookend-params.mustache', pl, {});
@@ -455,57 +516,6 @@
test.equals(bookendPattern.extendedTemplate.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim(), expectedValue.trim());
test.done();
},
- 'processPatternIterative - ignores files that start with underscore' : function(test){
- //arrange
- var diveSync = require('diveSync');
- var fs = require('fs-extra');
- var pa = require('../builder/pattern_assembler');
- var pattern_assembler = new pa();
- var patterns_dir = './test/files/_patterns';
- var patternlab = {};
- patternlab.config = fs.readJSONSync('./config.json');
- patternlab.config.patterns = {source: patterns_dir};
- patternlab.data = fs.readJSONSync('./source/_data/data.json');
- patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
- patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
- patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8');
- patternlab.patterns = [];
- patternlab.data.link = {};
- patternlab.partials = {};
-
- //act
- diveSync(patterns_dir,
- {
- filter: function(path, dir){
- if(dir){
- var remainingPath = path.replace(patterns_dir, '');
- var isValidPath = remainingPath.indexOf('/_') === -1;
- return isValidPath;
- }
- return true;
- }
- },
- function(err, file){
- //log any errors
- if(err){
- console.log(err);
- return;
- }
-
- pattern_assembler.process_pattern_iterative(file.substring(2), patternlab);
- }
- );
-
- //assert
- var foundIgnoredPattern = false;
- for(var i = 0; i < patternlab.patterns.length; i++){
- if(patternlab.patterns[i].fileName[0] === '_'){
- foundIgnoredPattern = true;
- }
- }
- test.equals(foundIgnoredPattern, false);
- test.done();
- },
'processPatternIterative - ignores files that are variants' : function(test){
//arrange
var diveSync = require('diveSync');
@@ -516,11 +526,12 @@
var patternlab = {};
//THIS IS BAD.
patternlab.config = fs.readJSONSync('./config.json');
- patternlab.config.patterns = {source: patterns_dir};
- patternlab.data = fs.readJSONSync('./source/_data/data.json');
- patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
- patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
- patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8');
+ patternlab.config.paths.source.patterns = patterns_dir;
+
+ patternlab.data = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'data.json'));
+ patternlab.listitems = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'listitems.json'));
+ patternlab.header = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/header.html'), 'utf8');
+ patternlab.footer = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/footer.html'), 'utf8');
patternlab.patterns = [];
patternlab.data.link = {};
patternlab.partials = {};
@@ -544,7 +555,7 @@
return;
}
- pattern_assembler.process_pattern_iterative(file.substring(2), patternlab);
+ pattern_assembler.process_pattern_iterative(path.resolve(file), patternlab);
}
);
@@ -608,11 +619,11 @@
var patternlab = {};
//THIS IS BAD
patternlab.config = fs.readJSONSync('./config.json');
- patternlab.config.patterns = {source: patterns_dir};
- patternlab.data = fs.readJSONSync('./source/_data/data.json');
- patternlab.listitems = fs.readJSONSync('./source/_data/listitems.json');
- patternlab.header = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/header.html', 'utf8');
- patternlab.footer = fs.readFileSync('./source/_patternlab-files/pattern-header-footer/footer.html', 'utf8');
+ patternlab.config.paths.source.patterns = patterns_dir;
+ patternlab.data = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'data.json'));
+ patternlab.listitems = fs.readJSONSync(path.resolve(patternlab.config.paths.source.data, 'listitems.json'));
+ patternlab.header = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/header.html'), 'utf8');
+ patternlab.footer = fs.readFileSync(path.resolve(patternlab.config.paths.source.patternlabFiles, 'pattern-header-footer/footer.html'), 'utf8');
patternlab.patterns = [];
patternlab.data.link = {};
patternlab.partials = {};
@@ -634,7 +645,7 @@
console.log(err);
return;
}
- pattern_assembler.process_pattern_iterative(file.substring(2), patternlab);
+ pattern_assembler.process_pattern_iterative(file, patternlab);
}
);
@@ -643,12 +654,18 @@
patternlab.data.link['twitter-dave'] = 'https://twitter.com/dmolsen';
patternlab.data.link['twitter-brian'] = 'https://twitter.com/bmuenzenmeyer';
+ patternlab.data.brad = { url: "link.twitter-brad" }
+ patternlab.data.dave = { url: "link.twitter-dave" }
+ patternlab.data.brian = { url: "link.twitter-brian" }
+
+
var pattern;
for(var i = 0; i < patternlab.patterns.length; i++){
if(patternlab.patterns[i].key === 'test-nav'){
pattern = patternlab.patterns[i];
}
}
+
//assert before
test.equals(pattern.jsonFileData.brad.url, "link.twitter-brad");
test.equals(pattern.jsonFileData.dave.url, "link.twitter-dave");
@@ -661,6 +678,92 @@
test.equals(pattern.jsonFileData.brad.url, "https://twitter.com/brad_frost");
test.equals(pattern.jsonFileData.dave.url, "https://twitter.com/dmolsen");
test.equals(pattern.jsonFileData.brian.url, "https://twitter.com/bmuenzenmeyer");
+
+ test.equals(patternlab.data.brad.url, "https://twitter.com/brad_frost");
+ test.equals(patternlab.data.dave.url, "https://twitter.com/dmolsen");
+ test.equals(patternlab.data.brian.url, "https://twitter.com/bmuenzenmeyer");
+ test.done();
+ },
+ 'get_pattern_by_key - returns the fuzzy result when no others found' : function(test){
+ //arrange
+ var pattern_assembler = new pa();
+ var patternlab = {};
+ patternlab.patterns = [];
+
+ patternlab.patterns.push({
+ key: 'character-han-solo',
+ subdir: 'character',
+ fileName: 'han-solo'
+ });
+
+ //act
+ var result = pattern_assembler.get_pattern_by_key('character-han', patternlab);
+ //assert
+ test.equals(result, patternlab.patterns[0]);
+ test.done();
+ },
+ 'get_pattern_by_key - returns the exact key if found' : function(test){
+ //arrange
+ var pattern_assembler = new pa();
+ var patternlab = {};
+ patternlab.patterns = [];
+
+ patternlab.patterns.push({
+ key: 'molecules-primary-nav-jagged',
+ subdir: 'molecules',
+ fileName: 'primary-nav-jagged'
+ }, {
+ key: 'molecules-primary-nav',
+ subdir: 'molecules',
+ fileName: 'molecules-primary-nav'
+ });
+
+ //act
+ var result = pattern_assembler.get_pattern_by_key('molecules-primary-nav', patternlab);
+ //assert
+ test.equals(result, patternlab.patterns[1]);
+ test.done();
+ },
+ 'addPattern - adds pattern extended template to patternlab partial object' : function(test){
+ //arrange
+ var pattern_assembler = new pa();
+ var patternlab = {};
+ patternlab.patterns = [];
+ patternlab.partials = {};
+ patternlab.data = {link: {}};
+
+ var pattern = new object_factory.oPattern('test/files/_patterns/00-test/01-bar.mustache', '00-test', '01-bar.mustache');
+ pattern.extendedTemplate = 'barExtended';
+ pattern.template = 'bar';
+
+ //act
+ pattern_assembler.addPattern(pattern, patternlab);
+
+ //assert
+ test.equals(patternlab.patterns.length, 1);
+ test.equals(patternlab.partials['test-bar'] != undefined, true);
+ test.equals(patternlab.partials['test-bar'], 'barExtended');
+ test.done();
+ },
+ 'addPattern - adds pattern template to patternlab partial object if extendedtemplate does not exist yet' : function(test){
+ //arrange
+ var pattern_assembler = new pa();
+ var patternlab = {};
+ patternlab.patterns = [];
+ patternlab.partials = {};
+ patternlab.data = {link: {}};
+
+ var pattern = new object_factory.oPattern('test/files/_patterns/00-test/01-bar.mustache', '00-test', '01-bar.mustache');
+ pattern.extendedTemplate = undefined;
+ pattern.template = 'bar';
+
+ //act
+ pattern_assembler.addPattern(pattern, patternlab);
+
+ //assert
+ test.equals(patternlab.patterns.length, 1);
+ test.equals(patternlab.partials['test-bar'] != undefined, true);
+ test.equals(patternlab.partials['test-bar'], 'bar');
test.done();
}
};
diff --git a/test/pseudopattern_hunter_tests.js b/test/pseudopattern_hunter_tests.js
index 5a50dbcdd..9a0269482 100644
--- a/test/pseudopattern_hunter_tests.js
+++ b/test/pseudopattern_hunter_tests.js
@@ -14,12 +14,18 @@
var patterns_dir = './test/files/_patterns/';
var pl = {};
- pl.config = {};
+ pl.config = {
+ paths: {
+ source: {
+ patterns: patterns_dir
+ }
+ }
+ };
pl.data = {};
pl.data.link = {};
pl.config.debug = false;
pl.patterns = [];
- pl.config.patterns = { source: patterns_dir};
+ pl.partials = {};
pl.config.patternStates = {};
var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache');
@@ -27,19 +33,19 @@
atomPattern.extendedTemplate = atomPattern.template;
atomPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(atomPattern);
- pl.patterns.push(atomPattern);
+ pattern_assembler.addPattern(atomPattern, pl);
//act
var patternCountBefore = pl.patterns.length;
pseudopattern_hunter.find_pseudopatterns(atomPattern, pl);
//assert
- test.equals(patternCountBefore + 1, pl.patterns.length);
+ test.equals(patternCountBefore + 1, pl.patterns.length);
test.equals(pl.patterns[1].key, 'test-styled-atom-alt');
test.equals(pl.patterns[1].extendedTemplate.replace(/\s\s+/g, ' ').replace(/\n/g, ' ').trim(), ' {{message}} ');
test.equals(JSON.stringify(pl.patterns[1].jsonFileData), JSON.stringify({"message": "alternateMessage"}));
- test.done();
- }
+ test.done();
+ }
}
}());
diff --git a/test/style_modifier_hunter_tests.js b/test/style_modifier_hunter_tests.js
index 4951dde18..9a13a75e4 100644
--- a/test/style_modifier_hunter_tests.js
+++ b/test/style_modifier_hunter_tests.js
@@ -7,6 +7,7 @@
'uses the partial stylemodifer to modify the patterns extendedTemplate' : function(test){
//arrange
var pl = {};
+ pl.partials = {};
pl.config = {};
pl.config.debug = false;
@@ -26,6 +27,7 @@
'replaces style modifiers with spaces in the syntax' : function(test){
//arrange
var pl = {};
+ pl.partials = {};
pl.config = {};
pl.config.debug = false;
@@ -45,6 +47,7 @@
'replaces multiple style modifiers' : function(test){
//arrange
var pl = {};
+ pl.partials = {};
pl.config = {};
pl.config.debug = false;
@@ -64,6 +67,7 @@
'does not alter pattern extendedTemplate if styleModifier not found in partial' : function(test){
//arrange
var pl = {};
+ pl.partials = {};
pl.config = {};
pl.config.debug = false;