From 134e01a8b7e8d9a7cfcd81a7f210bc0b59948e36 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 16 Dec 2015 23:39:56 -0600 Subject: [PATCH 01/41] Fix issue where partials containing styleModifiers with integers were not found correctly under all circumstances added unit test, confirmed with shipped patterns too closes #211 --- CHANGELOG | 3 ++ builder/pattern_assembler.js | 14 ++++---- package.gulp.json | 2 +- package.json | 2 +- .../10-multiple-classes-numeric.mustache | 5 +++ test/pattern_assembler_tests.js | 35 +++++++++++++++++++ 6 files changed, 52 insertions(+), 9 deletions(-) create mode 100644 test/files/_patterns/00-test/10-multiple-classes-numeric.mustache diff --git a/CHANGELOG b/CHANGELOG index c01f4e782..f9d65d0c4 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,5 +1,8 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. +PL-node-v1.0.1 +- FIX: Fix issue where partials containing styleModifiers with integers were not found correctly under all circumstances + PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. - THX: Thanks @ivancamilov for reporting this regression. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index f175dc115..ecb49c428 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.0 - 2015 - * +/* + * patternlab-node - v1.0.0 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -204,7 +204,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; diff --git a/package.gulp.json b/package.gulp.json index dbece6e4b..06defb19b 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -1,7 +1,7 @@ { "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", + "version": "1.0.1", "devDependencies": { "browser-sync": "^2.10.0", "del": "^2.0.2", diff --git a/package.json b/package.json index 157d4cc66..10f31955c 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "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", + "version": "1.0.1", "devDependencies": { "bs-html-injector": "^3.0.0", "diveSync": "^0.3.0", 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/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 6953e2324..6c72802e0 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -319,6 +319,41 @@ 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 = {}; + pl.data = {}; + pl.data.link = {}; + pl.config.debug = false; + pl.patterns = []; + pl.config.patterns = { source: patterns_dir}; + + 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); + + pl.patterns.push(atomPattern); + pl.patterns.push(groupPattern); + + //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'); From bf8cc0d86cec0a2789729f5ce69283eebb5bf631 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 17 Dec 2015 23:30:34 -0600 Subject: [PATCH 02/41] Fix issue where excluded patterns were still rendered on the Pattern Lab site. Closes #210 --- CHANGELOG | 3 + builder/lineage_hunter.js | 2 +- builder/list_item_hunter.js | 2 +- builder/media_hunter.js | 2 +- builder/object_factory.js | 2 +- builder/parameter_hunter.js | 2 +- builder/pattern_assembler.js | 14 +-- builder/pattern_exporter.js | 2 +- builder/patternlab.js | 96 +++++++++++++------ builder/patternlab_grunt.js | 2 +- builder/patternlab_gulp.js | 2 +- builder/pseudopattern_hunter.js | 2 +- builder/style_modifier_hunter.js | 2 +- .../01-molecules/03-media/_map.mustache | 2 +- test/pattern_assembler_tests.js | 51 ---------- 15 files changed, 88 insertions(+), 98 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index f9d65d0c4..f0c3788c7 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -2,6 +2,9 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. PL-node-v1.0.1 - FIX: Fix issue where partials containing styleModifiers with integers were not found correctly under all circumstances +- FIX: Fix 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. PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 916eddb93..62321d5cb 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js index f553f32c2..15d51b0e8 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.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/media_hunter.js b/builder/media_hunter.js index e7eb70a15..2a2fce02a 100644 --- a/builder/media_hunter.js +++ b/builder/media_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * 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..8f4aa25dc 100644 --- a/builder/object_factory.js +++ b/builder/object_factory.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * 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..980e0d43e 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index ecb49c428..608289495 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.0 - 2015 - * +/* + * patternlab-node - v1.0.1 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -96,7 +96,7 @@ 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; } diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js index ddbf74023..0afda0ede 100644 --- a/builder/pattern_exporter.js +++ b/builder/pattern_exporter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/patternlab.js b/builder/patternlab.js index 01850e29c..e24471737 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. @@ -124,6 +124,7 @@ var patternlab_engine = function () { //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); @@ -165,15 +166,24 @@ var patternlab_engine = function () { // check if patterns are excluded, if not add them to styleguidePatterns if (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 @@ -187,7 +197,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,6 +216,14 @@ 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]); } } @@ -231,10 +252,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 +259,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 +356,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 +368,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 @@ -414,6 +446,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..87a3f4c7c 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * 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..64b0800df 100644 --- a/builder/patternlab_gulp.js +++ b/builder/patternlab_gulp.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index 0969c7ac1..909dc38be 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.0 - 2015 + * patternlab-node - v1.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/style_modifier_hunter.js b/builder/style_modifier_hunter.js index 8a42889bd..b1191a731 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.0.1 - 2015 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. 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/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 6c72802e0..f623e754b 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -490,57 +490,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'); From d40ff897b7ca08c156cafbe24dd4bb4c3ea33f11 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Tue, 22 Dec 2015 16:42:35 -0600 Subject: [PATCH 03/41] Path reform! Make paths more configurable from the config.json, and try to use path.resolve and/or path.join rather than manual string concatenation to manipulate paths. Conflicts: builder/patternlab.js builder/pseudopattern_hunter.js test/engine_handlebars_tests.js test/pattern_assembler_tests.js --- builder/pattern_assembler.js | 10 +- builder/patternlab.js | 45 ++++---- builder/pseudopattern_hunter.js | 21 ++-- config.json | 21 ++-- test/engine_handlebars_tests.js | 165 +++++++++++++++++++++++++++++ test/pattern_assembler_tests.js | 72 +++++++++---- test/pseudopattern_hunter_tests.js | 9 +- 7 files changed, 276 insertions(+), 67 deletions(-) create mode 100644 test/engine_handlebars_tests.js diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 608289495..957e35131 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -91,7 +91,7 @@ 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); @@ -119,8 +119,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 +130,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); diff --git a/builder/patternlab.js b/builder/patternlab.js index e24471737..1f4a5c1bf 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -27,6 +27,9 @@ var patternlab_engine = function () { patternlab.package = fs.readJSONSync('./package.json'); patternlab.config = fs.readJSONSync('./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,7 +90,6 @@ var patternlab_engine = function () { console.log(err); return; } - pattern_assembler.process_pattern_iterative(file.substring(2), patternlab); }); @@ -113,13 +115,12 @@ var patternlab_engine = function () { console.log(err); return; } - pattern_assembler.process_pattern_recursive(file.substring(2), 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 @@ -136,13 +137,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 @@ -164,7 +165,7 @@ 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++) { // skip underscore-prefixed files @@ -187,9 +188,9 @@ var patternlab_engine = function () { } //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 = '', @@ -228,14 +229,14 @@ var patternlab_engine = function () { } } - 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){ @@ -415,20 +416,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 @@ -438,7 +439,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){ diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index 909dc38be..ebd652161 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.0.1 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -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/config.json b/config.json index 9ba9f591e..911eefcdd 100644 --- a/config.json +++ b/config.json @@ -1,8 +1,17 @@ - { - "patterns" : { - "source" : "./source/_patterns/", - "public" : "./public/patterns/" - }, +{ + "paths" : { + "source" : { + "root": "./source/", + "patterns" : "./source/_patterns/", + "data" : "./source/_data/", + "patternlabFiles" : "./source/_patternlab-files/" + }, + "public" : { + "root" : "./public/", + "patterns" : "./public/patterns/", + "styleguide" : "./public/styleguide/" + } + }, "styleGuideExcludes": [ "templates", "pages" @@ -30,7 +39,7 @@ "tools-docs": true }, "patternStates": { - "homepage-emergency" : "inprogress" + "homepage-emergency" : "inprogress" }, "patternExportKeys": [], "patternExportDirectory": "./pattern_exports/", diff --git a/test/engine_handlebars_tests.js b/test/engine_handlebars_tests.js new file mode 100644 index 000000000..191ce32f7 --- /dev/null +++ b/test/engine_handlebars_tests.js @@ -0,0 +1,165 @@ +(function () { + "use strict"; + + var path = require('path'); + var pa = require('../builder/pattern_assembler'); + var object_factory = require('../builder/object_factory'); + var testPatternsPath = path.resolve(__dirname, 'files', '_handlebars-test-patterns'); + + // fake pattern lab constructor: + // sets up a fake patternlab object, which is needed by the pattern processing + // apparatus. + function fakePatternLab() { + var fpl = { + partials: {}, + patterns: [], + footer: '', + header: '', + listitems: {}, + listItemArray: [], + data: { + link: {} + }, + config: require('../config.json'), + package: {} + }; + console.log(fpl.config); + + // patch the pattern source so the pattern assembler can correctly determine + // the "subdir" + fpl.config.paths.source.patterns = './test/files/_handlebars-test-patterns'; + + return fpl; + } + + + // function for testing sets of partials + function testFindPartials(test, partialTests) { + test.expect(partialTests.length + 1); + + // setup current pattern from what we would have during execution + // docs on partial syntax are here: + // http://patternlab.io/docs/pattern-including.html + var currentPattern = object_factory.oPattern.create( + '/home/fakeuser/pl/source/_patterns/01-molecules/00-testing/00-test-mol.hbs', // abspath + '01-molecules\\00-testing', // subdir + '00-test-mol.hbs', // filename, + null, // data + { + template: partialTests.join() + } + ); + + // act + var results = currentPattern.findPartials(); + + // assert + test.equals(results.length, partialTests.length); + partialTests.forEach(function(testString, index) { + test.equals(results[index], testString); + }); + + test.done(); + } + + exports['engine_handlebars'] = { + 'hello world handlebars pattern renders': function (test) { + test.expect(1); + + var patternPath = path.resolve( + testPatternsPath, + '00-atoms', + '00-global', + '00-helloworld.hbs' + ); + + // do all the normal processing of the pattern + var patternlab = new fakePatternLab(); + var assembler = new pa(); + var helloWorldPattern = assembler.process_pattern_iterative(patternPath, patternlab); + assembler.process_pattern_recursive(patternPath, patternlab); + + test.equals(helloWorldPattern.render(), 'Hello world!\n'); + test.done(); + }, + 'hello worlds handlebars pattern can see the atoms-helloworld partial and renders it twice': function (test) { + test.expect(1); + + // pattern paths + var pattern1Path = path.resolve( + testPatternsPath, + '00-atoms', + '00-global', + '00-helloworld.hbs' + ); + var pattern2Path = path.resolve( + testPatternsPath, + '00-molecules', + '00-global', + '00-helloworlds.hbs' + ); + + // set up environment + var patternlab = new fakePatternLab(); // environment + var assembler = new pa(); + + // do all the normal processing of the pattern + assembler.process_pattern_iterative(pattern1Path, patternlab); + var helloWorldsPattern = assembler.process_pattern_iterative(pattern2Path, patternlab); + assembler.process_pattern_recursive(pattern1Path, patternlab); + assembler.process_pattern_recursive(pattern2Path, patternlab); + + // test + test.equals(helloWorldsPattern.render(), 'Hello world!\n and Hello world!\n\n'); + test.done(); + }, + 'find_pattern_partials finds partials': function(test){ + testFindPartials(test, [ + "{{> molecules-comment-header}}", + "{{> molecules-comment-header}}", + "{{> \n molecules-comment-header\n}}", + "{{> molecules-weird-spacing }}", + "{{> molecules-ba_d-cha*rs }}" + ]); + }, + 'find_pattern_partials finds verbose partials': function(test){ + testFindPartials(test, [ + '{{> 01-molecules/06-components/03-comment-header.hbs }}', + "{{> 01-molecules/06-components/02-single-comment.hbs(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + '{{> molecules-single-comment:foo }}', + "{{>atoms-error(message: 'That\'s no moon...')}}", + "{{> atoms-error(message: 'That\'s no moon...') }}", + '{{> 00-atoms/00-global/06-test }}' + ]); + }, + 'find_pattern_partials finds simple partials with parameters': function(test){ + testFindPartials(test, [ + "{{> molecules-single-comment(description: 'A life isn\'t like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", + '{{> molecules-single-comment(description:"A life is like a \"garden\". Perfect moments can be had, but not preserved, except in memory.") }}' + ]); + }, + 'find_pattern_partials finds simple partials with style modifiers': function(test){ + testFindPartials(test, [ + '{{> molecules-single-comment:foo }}' + ]); + }, + 'find_pattern_partials finds partials with handlebars parameters': function(test){ + testFindPartials(test, [ + '{{> atoms-title title="bravo" headingLevel="2" headingSize="bravo" position="left"}}', + '{{> atoms-title title="bravo"\n headingLevel="2"\n headingSize="bravo"\n position="left"}}', + '{{> atoms-title title="color  midnight blue" headingSize="charlie"}}', + '{{> atoms-input label="city" required=true}}', + '{{> organisms-product-filter filterData}}', + '{{> atoms-input email required=true}}', + '{{> molecules-storycard variants.flex }}', + '{{> myPartial name=../name }}' + ]); + }, + + 'find_pattern_partials finds handlebars block partials': function(test){ + testFindPartials(test, [ + '{{#> myPartial }}' + ]); + } + }; +})(); diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index f623e754b..183d73771 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){ @@ -209,11 +210,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 = {}; @@ -293,12 +295,17 @@ 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}; 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'); @@ -361,12 +368,17 @@ 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}; 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'); @@ -394,12 +406,17 @@ 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}; 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'); @@ -427,12 +444,17 @@ 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}; 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'); @@ -462,12 +484,17 @@ 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}; 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'); @@ -592,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 = {}; @@ -618,7 +645,7 @@ console.log(err); return; } - pattern_assembler.process_pattern_iterative(file.substring(2), patternlab); + pattern_assembler.process_pattern_iterative(file, patternlab); } ); @@ -633,6 +660,7 @@ pattern = patternlab.patterns[i]; } } + //assert before test.equals(pattern.jsonFileData.brad.url, "link.twitter-brad"); test.equals(pattern.jsonFileData.dave.url, "link.twitter-dave"); diff --git a/test/pseudopattern_hunter_tests.js b/test/pseudopattern_hunter_tests.js index 5a50dbcdd..2a9664e6e 100644 --- a/test/pseudopattern_hunter_tests.js +++ b/test/pseudopattern_hunter_tests.js @@ -14,12 +14,17 @@ 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.config.patternStates = {}; var atomPattern = new object_factory.oPattern('test/files/_patterns/00-test/03-styled-atom.mustache', '00-test', '03-styled-atom.mustache'); From d585257c44588fed0adc84c972e6ffcca58052b5 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Tue, 22 Dec 2015 16:44:53 -0600 Subject: [PATCH 04/41] some gulp cleanup --- builder/patternlab_gulp.js | 8 ++++---- gulpfile.js | 26 +++++++++++++------------- 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/builder/patternlab_gulp.js b/builder/patternlab_gulp.js index 64b0800df..0c176d40a 100644 --- a/builder/patternlab_gulp.js +++ b/builder/patternlab_gulp.js @@ -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/gulpfile.js b/gulpfile.js index f0b66d3d7..b49631a40 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -27,7 +27,7 @@ gulp.loadTasks(__dirname+'/builder/patternlab_gulp.js'); gulp.task('clean', function(cb){ del.sync(['./public/patterns/*'], {force: true}); cb(); -}) +}); //build the banner gulp.task('banner', function(){ @@ -51,32 +51,32 @@ gulp.task('banner', function(){ today : new Date().getFullYear() } )) .pipe(gulp.dest('./builder')); -}) +}); //copy tasks gulp.task('cp:js', function(){ return gulp.src('**/*.js', {cwd:'./source/js'}) - .pipe(gulp.dest('./public/js')) + .pipe(gulp.dest('./public/js')); }); gulp.task('cp:img', function(){ return gulp.src( [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ], {cwd:'./source/images'} ) - .pipe(gulp.dest('./public/images')) + .pipe(gulp.dest('./public/images')); }); gulp.task('cp:font', function(){ return gulp.src('*', {cwd:'./source/fonts'}) - .pipe(gulp.dest('./public/fonts')) -}); + .pipe(gulp.dest('./public/fonts')); +});; gulp.task('cp:data', function(){ return gulp.src('annotations.js', {cwd:'./source/_data'}) - .pipe(gulp.dest('./public/data')) -}) + .pipe(gulp.dest('./public/data')); +}); gulp.task('cp:css', function(){ return gulp.src('./source/css/style.css') .pipe(gulp.dest('./public/css')) .pipe(browserSync.stream()); -}) +}); //server and watch tasks gulp.task('connect', ['lab'], function(){ @@ -99,13 +99,13 @@ gulp.task('connect', ['lab'], 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(){ @@ -130,12 +130,12 @@ gulp.task('nodeunit', function(){ 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('prelab', ['clean', 'assets']); gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();}); gulp.task('patterns', ['patternlab:only_patterns']); gulp.task('serve', ['lab', 'connect']); From 9dcfc63b99964757bcd9d085d39d87fd2e715e63 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Wed, 23 Dec 2015 13:18:20 -0600 Subject: [PATCH 05/41] make the gulpfile use the paths from the config JSON --- config.json | 13 +++++++++++-- gulpfile.js | 55 +++++++++++++++++++++++++++++++++-------------------- 2 files changed, 45 insertions(+), 23 deletions(-) diff --git a/config.json b/config.json index 911eefcdd..dfca6c756 100644 --- a/config.json +++ b/config.json @@ -4,12 +4,21 @@ "root": "./source/", "patterns" : "./source/_patterns/", "data" : "./source/_data/", - "patternlabFiles" : "./source/_patternlab-files/" + "patternlabFiles" : "./source/_patternlab-files/", + "js" : "./source/js", + "images" : "./source/images", + "fonts" : "./source/fonts", + "css" : "./source/css/" }, "public" : { "root" : "./public/", "patterns" : "./public/patterns/", - "styleguide" : "./public/styleguide/" + "data" : "./public/data/", + "styleguide" : "./public/styleguide/", + "js" : "./public/js", + "images" : "./public/images", + "fonts" : "./public/fonts", + "css" : "./public/css" } }, "styleGuideExcludes": [ diff --git a/gulpfile.js b/gulpfile.js index b49631a40..ba5529080 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -2,6 +2,7 @@ var pkg = require('./package.json'), gulp = require('gulp'), + path = require('path'), eol = require('os').EOL, del = require('del'), strip_banner = require('gulp-strip-banner'), @@ -20,12 +21,16 @@ 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(); }); @@ -53,28 +58,34 @@ gulp.task('banner', function(){ .pipe(gulp.dest('./builder')); }); + //copy tasks + gulp.task('cp:js', function(){ - return gulp.src('**/*.js', {cwd:'./source/js'}) - .pipe(gulp.dest('./public/js')); + return gulp.src('**/*.js', {cwd:paths().source.js}) + .pipe(gulp.dest(paths().public.js)); }); + gulp.task('cp:img', function(){ return gulp.src( [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ], - {cwd:'./source/images'} ) - .pipe(gulp.dest('./public/images')); + {cwd:paths().source.images} ) + .pipe(gulp.dest(paths().public.images)); }); + gulp.task('cp:font', function(){ - return gulp.src('*', {cwd:'./source/fonts'}) - .pipe(gulp.dest('./public/fonts')); -});; + return gulp.src('*', {cwd:paths().source.fonts}) + .pipe(gulp.dest(paths().public.images)); +}); + gulp.task('cp:data', function(){ - return gulp.src('annotations.js', {cwd:'./source/_data'}) - .pipe(gulp.dest('./public/data')); + return gulp.src('annotations.js', {cwd:paths().source.data}) + .pipe(gulp.dest(paths().public.data)); }); + 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(paths().public.css)) .pipe(browserSync.stream()); }); @@ -82,22 +93,24 @@ gulp.task('cp:css', function(){ gulp.task('connect', ['lab'], function(){ browserSync.init({ server: { - baseDir: './public/' + baseDir: paths().public.root } }); - gulp.watch('./source/css/style.css', ['cp:css']); + gulp.watch(path.resolve(paths().public.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([ - './source/_patterns/**/*.mustache', - './source/_patterns/**/*.json', - './source/_data/*.json' ], - ['lab-pipe'], function(){ - browserSync.reload(); - }); + gulp.watch( + [ + path.resolve(paths().source.patterns, '**/*.mustache'), + path.resolve(paths().source.patterns, '**/*.json'), + path.resolve(paths().source.data, '*.json') + ], + ['lab-pipe'], + function () { browserSync.reload(); } + ); }); From 57c130223aa5345956115db16d746ef0af827f99 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Wed, 23 Dec 2015 14:33:55 -0600 Subject: [PATCH 06/41] Nice comments in the gulpfile --- gulpfile.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/gulpfile.js b/gulpfile.js index ba5529080..95a049ed7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -59,13 +59,15 @@ gulp.task('banner', function(){ }); -//copy tasks +// COPY TASKS +// JS copy gulp.task('cp:js', function(){ return gulp.src('**/*.js', {cwd:paths().source.js}) .pipe(gulp.dest(paths().public.js)); }); +// Images copy gulp.task('cp:img', function(){ return gulp.src( [ '**/*.gif', '**/*.png', '**/*.jpg', '**/*.jpeg' ], @@ -73,16 +75,19 @@ gulp.task('cp:img', function(){ .pipe(gulp.dest(paths().public.images)); }); +// Fonts copy gulp.task('cp:font', function(){ return gulp.src('*', {cwd:paths().source.fonts}) .pipe(gulp.dest(paths().public.images)); }); +// Data copy gulp.task('cp:data', function(){ return gulp.src('annotations.js', {cwd:paths().source.data}) .pipe(gulp.dest(paths().public.data)); }); +// CSS Copy gulp.task('cp:css', function(){ return gulp.src(path.resolve(paths().source.css, 'style.css')) .pipe(gulp.dest(paths().public.css)) From 9177378d4ede635d130698a98cf74412692d79da Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Wed, 23 Dec 2015 15:33:16 -0600 Subject: [PATCH 07/41] we are not yet ready for handlebars unit tests, clearly --- test/engine_handlebars_tests.js | 165 -------------------------------- 1 file changed, 165 deletions(-) delete mode 100644 test/engine_handlebars_tests.js diff --git a/test/engine_handlebars_tests.js b/test/engine_handlebars_tests.js deleted file mode 100644 index 191ce32f7..000000000 --- a/test/engine_handlebars_tests.js +++ /dev/null @@ -1,165 +0,0 @@ -(function () { - "use strict"; - - var path = require('path'); - var pa = require('../builder/pattern_assembler'); - var object_factory = require('../builder/object_factory'); - var testPatternsPath = path.resolve(__dirname, 'files', '_handlebars-test-patterns'); - - // fake pattern lab constructor: - // sets up a fake patternlab object, which is needed by the pattern processing - // apparatus. - function fakePatternLab() { - var fpl = { - partials: {}, - patterns: [], - footer: '', - header: '', - listitems: {}, - listItemArray: [], - data: { - link: {} - }, - config: require('../config.json'), - package: {} - }; - console.log(fpl.config); - - // patch the pattern source so the pattern assembler can correctly determine - // the "subdir" - fpl.config.paths.source.patterns = './test/files/_handlebars-test-patterns'; - - return fpl; - } - - - // function for testing sets of partials - function testFindPartials(test, partialTests) { - test.expect(partialTests.length + 1); - - // setup current pattern from what we would have during execution - // docs on partial syntax are here: - // http://patternlab.io/docs/pattern-including.html - var currentPattern = object_factory.oPattern.create( - '/home/fakeuser/pl/source/_patterns/01-molecules/00-testing/00-test-mol.hbs', // abspath - '01-molecules\\00-testing', // subdir - '00-test-mol.hbs', // filename, - null, // data - { - template: partialTests.join() - } - ); - - // act - var results = currentPattern.findPartials(); - - // assert - test.equals(results.length, partialTests.length); - partialTests.forEach(function(testString, index) { - test.equals(results[index], testString); - }); - - test.done(); - } - - exports['engine_handlebars'] = { - 'hello world handlebars pattern renders': function (test) { - test.expect(1); - - var patternPath = path.resolve( - testPatternsPath, - '00-atoms', - '00-global', - '00-helloworld.hbs' - ); - - // do all the normal processing of the pattern - var patternlab = new fakePatternLab(); - var assembler = new pa(); - var helloWorldPattern = assembler.process_pattern_iterative(patternPath, patternlab); - assembler.process_pattern_recursive(patternPath, patternlab); - - test.equals(helloWorldPattern.render(), 'Hello world!\n'); - test.done(); - }, - 'hello worlds handlebars pattern can see the atoms-helloworld partial and renders it twice': function (test) { - test.expect(1); - - // pattern paths - var pattern1Path = path.resolve( - testPatternsPath, - '00-atoms', - '00-global', - '00-helloworld.hbs' - ); - var pattern2Path = path.resolve( - testPatternsPath, - '00-molecules', - '00-global', - '00-helloworlds.hbs' - ); - - // set up environment - var patternlab = new fakePatternLab(); // environment - var assembler = new pa(); - - // do all the normal processing of the pattern - assembler.process_pattern_iterative(pattern1Path, patternlab); - var helloWorldsPattern = assembler.process_pattern_iterative(pattern2Path, patternlab); - assembler.process_pattern_recursive(pattern1Path, patternlab); - assembler.process_pattern_recursive(pattern2Path, patternlab); - - // test - test.equals(helloWorldsPattern.render(), 'Hello world!\n and Hello world!\n\n'); - test.done(); - }, - 'find_pattern_partials finds partials': function(test){ - testFindPartials(test, [ - "{{> molecules-comment-header}}", - "{{> molecules-comment-header}}", - "{{> \n molecules-comment-header\n}}", - "{{> molecules-weird-spacing }}", - "{{> molecules-ba_d-cha*rs }}" - ]); - }, - 'find_pattern_partials finds verbose partials': function(test){ - testFindPartials(test, [ - '{{> 01-molecules/06-components/03-comment-header.hbs }}', - "{{> 01-molecules/06-components/02-single-comment.hbs(description: 'A life is like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", - '{{> molecules-single-comment:foo }}', - "{{>atoms-error(message: 'That\'s no moon...')}}", - "{{> atoms-error(message: 'That\'s no moon...') }}", - '{{> 00-atoms/00-global/06-test }}' - ]); - }, - 'find_pattern_partials finds simple partials with parameters': function(test){ - testFindPartials(test, [ - "{{> molecules-single-comment(description: 'A life isn\'t like a garden. Perfect moments can be had, but not preserved, except in memory.') }}", - '{{> molecules-single-comment(description:"A life is like a \"garden\". Perfect moments can be had, but not preserved, except in memory.") }}' - ]); - }, - 'find_pattern_partials finds simple partials with style modifiers': function(test){ - testFindPartials(test, [ - '{{> molecules-single-comment:foo }}' - ]); - }, - 'find_pattern_partials finds partials with handlebars parameters': function(test){ - testFindPartials(test, [ - '{{> atoms-title title="bravo" headingLevel="2" headingSize="bravo" position="left"}}', - '{{> atoms-title title="bravo"\n headingLevel="2"\n headingSize="bravo"\n position="left"}}', - '{{> atoms-title title="color  midnight blue" headingSize="charlie"}}', - '{{> atoms-input label="city" required=true}}', - '{{> organisms-product-filter filterData}}', - '{{> atoms-input email required=true}}', - '{{> molecules-storycard variants.flex }}', - '{{> myPartial name=../name }}' - ]); - }, - - 'find_pattern_partials finds handlebars block partials': function(test){ - testFindPartials(test, [ - '{{#> myPartial }}' - ]); - } - }; -})(); From cafd440f8c39c771fcda88c68b0924d8b3c882e6 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Wed, 23 Dec 2015 15:36:12 -0600 Subject: [PATCH 08/41] fix one unit test --- test/pattern_assembler_tests.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 183d73771..a0d5cd4de 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -333,12 +333,17 @@ 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}; 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'); From 980118fb639274e01e485f5f0c7ed148c9d5a080 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 29 Dec 2015 00:20:51 -0600 Subject: [PATCH 09/41] fuzzy partial matching. unit test coverage for some basic scenarios, lineage, and style modifiers. still need to look into list items also, may be a bug with repeated style modifiers, which i think is a regression. --- builder/lineage_hunter.js | 56 +++++----- builder/pattern_assembler.js | 11 ++ test/lineage_hunter_tests.js | 183 ++++++++++++++++++++++++++++++-- test/list_item_hunter_tests.js | 10 +- test/object_factory_tests.js | 6 ++ test/pattern_assembler_tests.js | 18 ++++ 6 files changed, 243 insertions(+), 41 deletions(-) diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 62321d5cb..7d4c78242 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -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/pattern_assembler.js b/builder/pattern_assembler.js index 608289495..2bbcd1830 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -255,6 +255,17 @@ case patternlab.patterns[i].subdir + '/' + patternlab.patterns[i].fileName + '.mustache': return patternlab.patterns[i]; } + //look for exact key matches + if(key === patternlab.patterns[i].key){ + return patternlab.patterns[i]; + } + //return the fuzzy match within the type if it exists + 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; } 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..3063ceffe 100644 --- a/test/list_item_hunter_tests.js +++ b/test/list_item_hunter_tests.js @@ -148,14 +148,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,14 +186,16 @@ "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", } ] }; 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/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index f623e754b..a786dd3e0 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -646,6 +646,24 @@ test.equals(pattern.jsonFileData.dave.url, "https://twitter.com/dmolsen"); test.equals(pattern.jsonFileData.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(); } }; }()); From 90376d0a2ceb75e17919e243611dcd2e8f554665 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 29 Dec 2015 01:44:16 -0600 Subject: [PATCH 10/41] copy the retrieved partial during list item block parsing instead of passing it by reference. this avoids pollution of patterns with style modifier data fixes #190 --- CHANGELOG | 1 + builder/list_item_hunter.js | 21 ++++---- .../00-test/11-bookend-listitem.mustache | 7 +++ test/list_item_hunter_tests.js | 54 +++++++++++++++++++ 4 files changed, 74 insertions(+), 9 deletions(-) create mode 100644 test/files/_patterns/00-test/11-bookend-listitem.mustache diff --git a/CHANGELOG b/CHANGELOG index f0c3788c7..b17f7fbdb 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -5,6 +5,7 @@ PL-node-v1.0.1 - FIX: Fix 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: Fix 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 PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js index 15d51b0e8..ddadeeb64 100644 --- a/builder/list_item_hunter.js +++ b/builder/list_item_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.0.1 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -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 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/list_item_hunter_tests.js b/test/list_item_hunter_tests.js index d2de41468..b92ddcf8d 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){ @@ -394,6 +396,58 @@ //assert test.equals(currentPattern.extendedTemplate, "One" ); + test.done(); + }, + + 'processPatternRecursive - 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.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(); } From a9723351121680332e34f7b392eaeda453aaebba Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 29 Dec 2015 01:46:31 -0600 Subject: [PATCH 11/41] fix name of unit test --- test/list_item_hunter_tests.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/list_item_hunter_tests.js b/test/list_item_hunter_tests.js index b92ddcf8d..eaed526b3 100644 --- a/test/list_item_hunter_tests.js +++ b/test/list_item_hunter_tests.js @@ -399,7 +399,7 @@ test.done(); }, - 'processPatternRecursive - correctly ignores bookended partials without a style modifier when the same partial has a style modifier between' : function(test){ + '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(); From 22bf2324d28d0c9449cfc46949e2abf3ad085072 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Tue, 29 Dec 2015 23:20:05 -0600 Subject: [PATCH 12/41] updated changelog to reference fuzzy pattern support closes #202 --- CHANGELOG | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index b17f7fbdb..66d1bd4ec 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,11 +1,12 @@ THIS CHANGELOG IS AN ATTEMPT TO DOCUMENT CHANGES TO THIS PROJECT. -PL-node-v1.0.1 -- FIX: Fix issue where partials containing styleModifiers with integers were not found correctly under all circumstances -- FIX: Fix 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. +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: Fix 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 +- 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 PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. From db3028df425cf331822c802452b9dc3c7ec63ff0 Mon Sep 17 00:00:00 2001 From: Evan Lovely Date: Tue, 5 Jan 2016 07:36:31 -0800 Subject: [PATCH 13/41] Setting up absolute basics of being dependent and passing in configuration. --- builder/patternlab.js | 4 ++-- package.gulp.json | 13 ++++++++----- package.json | 13 ++++++++----- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 1f4a5c1bf..1ed0144ab 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -8,7 +8,7 @@ * */ -var patternlab_engine = function () { +var patternlab_engine = function (config) { 'use strict'; var path = require('path'), @@ -25,7 +25,7 @@ var patternlab_engine = function () { patternlab = {}; patternlab.package = fs.readJSONSync('./package.json'); - patternlab.config = fs.readJSONSync('./config.json'); + patternlab.config = config || fs.readJSONSync('./config.json'); var paths = patternlab.config.paths; diff --git a/package.gulp.json b/package.gulp.json index 06defb19b..750ad5bd1 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -2,21 +2,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.1", - "devDependencies": { - "browser-sync": "^2.10.0", + "main": "./builder/patternlab.js", + "dependencies": { "del": "^2.0.2", "diveSync": "^0.3.0", "fs-extra": "^0.26.2", "glob": "^6.0.1", + "html-entities": "^1.2.0", + "mustache": "^2.2.0" + }, + "devDependencies": { + "browser-sync": "^2.10.0", "gulp": "^3.9.0", "gulp-connect": "^2.2.0", "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 10f31955c..a42e54319 100644 --- a/package.json +++ b/package.json @@ -2,20 +2,23 @@ "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.1", - "devDependencies": { + "main": "./builder/patternlab.js", + "dependencies": { "bs-html-injector": "^3.0.0", "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": { "grunt": "~0.4.5", "grunt-browser-sync": "^2.2.0", "grunt-contrib-concat": "^0.5.1", "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", From 6dfd2f7d6f9ba571f35c347e3cdf6ce4628709f0 Mon Sep 17 00:00:00 2001 From: Evan Lovely Date: Tue, 5 Jan 2016 10:00:07 -0800 Subject: [PATCH 14/41] moving browser sync html injector to dev deps --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a42e54319..f339e058d 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,6 @@ "version": "1.0.1", "main": "./builder/patternlab.js", "dependencies": { - "bs-html-injector": "^3.0.0", "diveSync": "^0.3.0", "fs-extra": "^0.26.2", "glob": "^6.0.1", @@ -13,6 +12,7 @@ "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", From 0619ab5666270186504ac79316dd01ad10da5aee Mon Sep 17 00:00:00 2001 From: Aaron Robinson Date: Thu, 7 Jan 2016 14:27:35 -0600 Subject: [PATCH 15/41] Fix gulpfile issues with copying and watching css files. --- gulpfile.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 95a049ed7..8968af50d 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -101,7 +101,7 @@ gulp.task('connect', ['lab'], function(){ baseDir: paths().public.root } }); - gulp.watch(path.resolve(paths().public.css, 'style.css'), ['cp:css']); + gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']); //suggested watches if you use scss // gulp.watch('./source/css/**/*.scss', ['sass:style']); @@ -152,7 +152,7 @@ gulp.task('lab-pipe', ['lab'], function(cb){ gulp.task('default', ['lab']); -gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', /*'sass:style', 'sass:styleguide'*/]); +gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'cp:css' /*'sass:style', 'sass:styleguide'*/]); gulp.task('prelab', ['clean', 'assets']); gulp.task('lab', ['prelab', 'patternlab'], function(cb){cb();}); gulp.task('patterns', ['patternlab:only_patterns']); From 6bc2f6e4db8a596a612fec2e8905e059c4fb113a Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 7 Jan 2016 23:17:57 -0600 Subject: [PATCH 16/41] Updated changelog to reflect robinsonaaron's PR Closes #227 --- CHANGELOG | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 66d1bd4ec..74cfb8eaa 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -7,6 +7,8 @@ PL-node-v1.1.0 - 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! PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. From 0173a0ad760530c4bae4f47f26740b3231fc80fc Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Fri, 8 Jan 2016 01:15:36 -0600 Subject: [PATCH 17/41] Prefer exact key match over verbose and partial matching Closes #226 --- CHANGELOG | 2 ++ builder/pattern_assembler.js | 32 +++++++++++++++++++------------- test/pattern_assembler_tests.js | 22 ++++++++++++++++++++++ 3 files changed, 43 insertions(+), 13 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 74cfb8eaa..095b6d25e 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -9,6 +9,8 @@ PL-node-v1.1.0 - 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 PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index a15f0af8c..0259ac788 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.0.1 - 2015 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ @@ -248,18 +248,25 @@ } 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]; } - //look for exact key matches - if(key === patternlab.patterns[i].key){ - return patternlab.patterns[i]; - } - //return the fuzzy match within the type if it exists + } + + //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('-'); @@ -270,7 +277,6 @@ throw 'Could not find pattern with key ' + key; } - function mergeData(obj1, obj2){ if(typeof obj2 === 'undefined'){ obj2 = {}; diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 5f3a8c2ba..d6ac4b0b9 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -697,6 +697,28 @@ //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(); } }; }()); From 9c65be0ac22476c5861ae08a1ec7734dc1fd6583 Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Thu, 7 Jan 2016 10:17:58 -0600 Subject: [PATCH 18/41] replace remaining .substring(2) path concatenations Conflicts: builder/patternlab.js test/pattern_assembler_tests.js --- builder/patternlab.js | 7 ++-- test/pattern_assembler_tests.js | 69 +++++++++++++++++++++++++++++---- 2 files changed, 65 insertions(+), 11 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 1f4a5c1bf..de3ccdc9e 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -90,7 +90,7 @@ 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 @@ -115,8 +115,9 @@ var patternlab_engine = function () { console.log(err); return; } - pattern_assembler.process_pattern_recursive(file.substring(2), patternlab); - }); + pattern_assembler.process_pattern_recursive(path.resolve(file), patternlab); + }); + //delete the contents of config.patterns.public before writing if(deletePatternDir){ diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index a0d5cd4de..d5b330366 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -239,7 +239,7 @@ return; } - pattern_assembler.process_pattern_iterative(file.substring(2), patternlab); + pattern_assembler.process_pattern_iterative(path.resolve(file), patternlab); } ); @@ -263,7 +263,7 @@ return; } - pattern_assembler.process_pattern_recursive(file.substring(2), patternlab); + pattern_assembler.process_pattern_recursive(path.resolve(file), patternlab); } ); @@ -522,6 +522,58 @@ 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(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 = {}; + + //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(path.resolve(file), 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'); @@ -532,11 +584,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 = {}; @@ -560,7 +613,7 @@ return; } - pattern_assembler.process_pattern_iterative(file.substring(2), patternlab); + pattern_assembler.process_pattern_iterative(path.resolve(file), patternlab); } ); From 31d5ff6f0157f7e738902e17aa3b235155bf87fd Mon Sep 17 00:00:00 2001 From: Geoffrey Pursell Date: Fri, 8 Jan 2016 09:19:37 -0600 Subject: [PATCH 19/41] re-delete the underscore-prefixed pattern unit test; not sure how this got reintroduced. Git happens --- test/pattern_assembler_tests.js | 52 --------------------------------- 1 file changed, 52 deletions(-) diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 89ee557cd..6b1c3426a 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -522,58 +522,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(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 = {}; - - //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(path.resolve(file), 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'); From a71069e9ea434a238b96ab1d09d89cc5aaa3b946 Mon Sep 17 00:00:00 2001 From: Kyle Knight Date: Mon, 11 Jan 2016 09:36:28 -0600 Subject: [PATCH 20/41] Update gulp direction in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index b2353e58b..dc691d662 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 From 26d359fd4416de694fc62a573419b7f8c97604c2 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 13 Jan 2016 21:25:29 -0600 Subject: [PATCH 21/41] Add entries to CHANGELOG to reflect resolved issues Closes #222 --- CHANGELOG | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 095b6d25e..43c23b2ac 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -11,6 +11,10 @@ PL-node-v1.1.0 - 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 +- 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 PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. From e73b21d753193b61ab99d831dff20051e41cf76c Mon Sep 17 00:00:00 2001 From: Evan Lovely Date: Thu, 14 Jan 2016 08:21:46 -0800 Subject: [PATCH 22/41] When config loads json file, ensuring the path is resolved from the file, not cwd. --- builder/patternlab.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 3f840d046..a36c55f4d 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -25,7 +25,7 @@ var patternlab_engine = function (config) { patternlab = {}; patternlab.package = fs.readJSONSync('./package.json'); - patternlab.config = config || fs.readJSONSync('./config.json'); + patternlab.config = config || fs.readJSONSync(path.resolve(__dirname, '../config.json')); var paths = patternlab.config.paths; From 9af18143aa27db7a5ae5861ae9ff6705eaf71849 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 24 Jan 2016 15:32:31 -0600 Subject: [PATCH 23/41] moved styleguide to from public into the core directory --- .gitignore | 2 + Gruntfile.js | 62 +- config.json | 1 + {public => core}/styleguide/css/static.css | 0 {public => core}/styleguide/css/static.scss | 0 .../styleguide/css/styleguide-specific.css | 0 .../styleguide/css/styleguide-specific.scss | 0 .../styleguide/css/styleguide.css | 0 .../styleguide/css/styleguide.scss | 0 .../styleguide/css/vendor/prism.css | 0 .../styleguide/css/vendor/typeahead.css | 0 {public => core}/styleguide/fonts/icomoon.eot | Bin {public => core}/styleguide/fonts/icomoon.svg | 0 {public => core}/styleguide/fonts/icomoon.ttf | Bin .../styleguide/fonts/icomoon.woff | Bin {public => core}/styleguide/html/README | 0 core/styleguide/html/styleguide.html | 2656 +++++++++++++++++ .../styleguide/images/spinner.gif | Bin .../styleguide/js/annotations-pattern.js | 0 .../styleguide/js/annotations-viewer.js | 0 .../styleguide/js/code-pattern.js | 0 {public => core}/styleguide/js/code-viewer.js | 0 {public => core}/styleguide/js/data-saver.js | 0 .../styleguide/js/pattern-finder.js | 0 {public => core}/styleguide/js/postmessage.js | 0 {public => core}/styleguide/js/styleguide.js | 0 {public => core}/styleguide/js/url-handler.js | 0 .../js/vendor/classlist-polyfill.js | 0 .../styleguide/js/vendor/jquery.js | 0 .../styleguide/js/vendor/jwerty.js | 0 .../styleguide/js/vendor/prism.js | 0 .../js/vendor/typeahead.bundle.min.js | 0 gulpfile.js | 12 +- 33 files changed, 2702 insertions(+), 31 deletions(-) rename {public => core}/styleguide/css/static.css (100%) rename {public => core}/styleguide/css/static.scss (100%) rename {public => core}/styleguide/css/styleguide-specific.css (100%) rename {public => core}/styleguide/css/styleguide-specific.scss (100%) rename {public => core}/styleguide/css/styleguide.css (100%) rename {public => core}/styleguide/css/styleguide.scss (100%) rename {public => core}/styleguide/css/vendor/prism.css (100%) rename {public => core}/styleguide/css/vendor/typeahead.css (100%) rename {public => core}/styleguide/fonts/icomoon.eot (100%) rename {public => core}/styleguide/fonts/icomoon.svg (100%) rename {public => core}/styleguide/fonts/icomoon.ttf (100%) rename {public => core}/styleguide/fonts/icomoon.woff (100%) rename {public => core}/styleguide/html/README (100%) create mode 100644 core/styleguide/html/styleguide.html rename {public => core}/styleguide/images/spinner.gif (100%) rename {public => core}/styleguide/js/annotations-pattern.js (100%) rename {public => core}/styleguide/js/annotations-viewer.js (100%) rename {public => core}/styleguide/js/code-pattern.js (100%) rename {public => core}/styleguide/js/code-viewer.js (100%) rename {public => core}/styleguide/js/data-saver.js (100%) rename {public => core}/styleguide/js/pattern-finder.js (100%) rename {public => core}/styleguide/js/postmessage.js (100%) rename {public => core}/styleguide/js/styleguide.js (100%) rename {public => core}/styleguide/js/url-handler.js (100%) rename {public => core}/styleguide/js/vendor/classlist-polyfill.js (100%) rename {public => core}/styleguide/js/vendor/jquery.js (100%) rename {public => core}/styleguide/js/vendor/jwerty.js (100%) rename {public => core}/styleguide/js/vendor/prism.js (100%) rename {public => core}/styleguide/js/vendor/typeahead.bundle.min.js (100%) 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/Gruntfile.js b/Gruntfile.js index 3d9485121..e3e29064f 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,40 +62,46 @@ 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: paths().source.js, src: '*', dest: paths().public.js}, + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, + { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, + { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, + { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} ] }, css: { files: [ - { expand: true, cwd: './source/css/', src: '*.css', dest: './public/css/' } + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css } + ] + }, + styleguide: { + files: [ + { + expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide + } ] } }, watch: { all: { files: [ - 'source/css/**/*.css', - 'public/styleguide/css/*.css', - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + paths().source.css + '**/*.css', + paths().source.styleguide + 'css/*.css', + paths().source.patterns + '**/*.mustache', + paths().source.patterns + '**/*.json', + paths().source.data + '*.json' ], tasks: ['default'] }, // scss: { - // files: ['source/css/**/*.scss', 'public/styleguide/css/*.scss'], + // files: [paths().source.css + '**/*.scss', paths().source.styleguide + 'css/*.scss'], // tasks: ['sass', 'copy:css','bsReload:css'] // }, patterns: { files: [ - 'source/_patterns/**/*.mustache', - 'source/_patterns/**/*.json', - 'source/_data/*.json' + paths().source.patterns + '*.mustache', + paths().source.patterns + '*.json', + paths().source.data + '*.json' ], tasks: ['default'] } @@ -105,10 +113,10 @@ module.exports = function(grunt) { // 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' + // paths().source.css + 'style.css': paths().source.css + 'style.scss', + // paths().source.styleguide + 'css/static.css': paths().source.styleguide + 'css/static.scss', + // paths().source.styleguide + 'css/styleguide.css': paths().source.styleguide + 'css/styleguide.scss', + // paths().source.styleguide + 'css/styleguide-specific.css': paths().source.styleguide + 'css/styleguide-specific.scss' // } // } // }, @@ -118,13 +126,13 @@ module.exports = function(grunt) { browserSync: { dev: { options: { - server: './public', + server: paths().public.root, watchTask: true, plugins: [ { module: 'bs-html-injector', options: { - files: './public/index.html' + files: paths().public + 'index.html' } } ] @@ -132,10 +140,14 @@ module.exports = function(grunt) { } }, bsReload: { - css: './public/**/*.css' + css: paths().public + '**/*.css' } }); + function paths () { + return require('./config.json').paths; + } + // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); @@ -149,8 +161,8 @@ module.exports = function(grunt) { 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', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:patterns', 'watch:scss']); + grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); grunt.registerTask('build', ['nodeunit', 'concat']); diff --git a/config.json b/config.json index dfca6c756..0ca6ef1f0 100644 --- a/config.json +++ b/config.json @@ -4,6 +4,7 @@ "root": "./source/", "patterns" : "./source/_patterns/", "data" : "./source/_data/", + "styleguide" : "./core/styleguide/", "patternlabFiles" : "./source/_patternlab-files/", "js" : "./source/js", "images" : "./source/images", diff --git a/public/styleguide/css/static.css b/core/styleguide/css/static.css similarity index 100% rename from public/styleguide/css/static.css rename to core/styleguide/css/static.css diff --git a/public/styleguide/css/static.scss b/core/styleguide/css/static.scss similarity index 100% rename from public/styleguide/css/static.scss rename to core/styleguide/css/static.scss diff --git a/public/styleguide/css/styleguide-specific.css b/core/styleguide/css/styleguide-specific.css similarity index 100% rename from public/styleguide/css/styleguide-specific.css rename to core/styleguide/css/styleguide-specific.css diff --git a/public/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss similarity index 100% rename from public/styleguide/css/styleguide-specific.scss rename to core/styleguide/css/styleguide-specific.scss diff --git a/public/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css similarity index 100% rename from public/styleguide/css/styleguide.css rename to core/styleguide/css/styleguide.css diff --git a/public/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss similarity index 100% rename from public/styleguide/css/styleguide.scss rename to core/styleguide/css/styleguide.scss 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/core/styleguide/html/styleguide.html b/core/styleguide/html/styleguide.html new file mode 100644 index 000000000..ca65a71ac --- /dev/null +++ b/core/styleguide/html/styleguide.html @@ -0,0 +1,2656 @@ + + + + Pattern Lab Style Guide + + + + + + + + + +
+ + +
+
+

Colors

+
+
    +
  • + + #ff0000 +
    • +
  • + + #00ff00 +
    • +
  • + + #0000ff +
    • +
  • + + #ffff00 +
    • +
  • + + #00ffff +
    • +
  • + + #ff00ff +
    • +
  • + + #ffffff +
    • +
  • + + #808080 +
    • +
  • + + #000000 +
    • +
+ +
+
+
+

Fonts

+
+

Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

+

Secondary font: Georgia, Times, "Times New Roman", serif;

+

Secondary font italic: Georgia, Times, "Times New Roman", serif;

+

Secondary font bold: Georgia, Times, "Times New Roman", serif;

+ +
+
+
+

Animations

+
+
Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
+ +
Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
+ +
+
+
+

Visibility

+
+

This text is hidden on smaller screens

+ +

This text is only visible on smaller screens

+ +

This text is hidden on medium screens only

+ +

This text is only visible on medium screens

+ +

This text is hidden on large screens

+ +

This text is only visible on large screens

+ +
+
+
+

Headings

+
+

Heading Level 1

+

Heading Level 2

+

Heading Level 3

+

Heading Level 4

+
Heading Level 5
+
Heading Level 6
+ +
+
+
+

Subheadings

+
+

Subheading Level 1

+

Subheading Level 2

+

Subheading Level 3

+

Subheading Level 4

+
Subheading Level 5
+
Subheading Level 6
+ +
+
+
+

Headings With Links

+
+

Heading 1 with link

+

Heading 2 with link

+

Heading 3 with link

+

Heading 4 with link

+
Heading 5 with link
+
Heading 6 with link
+ +
+
+
+

Paragraph

+
+

So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

+ +
+
+
+

Blockquote

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

+
+ +
+
+
+

Inline Elements

+
+
+

This is a text link

+ +

Strong is used to indicate strong importance

+ +

This text has added emphasis

+ +

The b element is stylistically different text from normal text, without any special importance

+ +

The i element is text that is set off from the normal text

+ +

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

+ +

This text is deleted and This text is inserted

+ +

This text has a strikethrough

+ +

Superscript®

+ +

Subscript for things like H2O

+ +

This small text is small for for fine print, etc.

+ +

Abbreviation: HTML

+ +

Keybord input: Cmd

+ +

This text is a short inline quotation

+ +

This is a citation

+ +

The dfn element indicates a definition.

+ +

The mark element indicates a highlight

+ +

This is what inline code looks like.

+ +

This is sample output from a computer program

+ +

The variable element, such as x = y

+
+ + +
+
+
+

Time

+
+ + +
+
+
+

Preformatted Text

+
+ 
  	
+P R E F O R M A T T E D T E X T
+! " # $ % & ' ( ) * + , - . /
+0 1 2 3 4 5 6 7 8 9 : ; < = > ?
+@ A B C D E F G H I J K L M N O
+P Q R S T U V W X Y Z [ \ ] ^ _
+` a b c d e f g h i j k l m n o
+p q r s t u v w x y z { | } ~ 
+
+ +
+
+
+

Emphasis Colors

+
+

This is what error text looks like

+

This is what valid text looks like

+

This is what warning text looks like

+

This is what information text looks like.

+ +
+
+
+

Hr

+
+
+ +
+
+
+

Caption

+
+

A caption can be applied to an image, quote, form field, etc.

+ +
+
+
+

Unordered

+
+
+
    +
  • This is a list item in an unordered list
    • +
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • +
  • + Lists can be nested inside of each other +
      +
    • This is a nested list item
      • +
    • This is another nested list item in an unordered list
      • +
    +
    • +
  • This is the last list item
    • +
+
+ +
+
+
+

Ordered

+
+
+
    +
  1. This is a list item in an ordered list
    2. +
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. +
  3. + Lists can be nested inside of each other +
      +
    1. This is a nested list item
      2. +
    2. This is another nested list item in an ordered list
      3. +
    +
    4. +
  4. This is the last list item
    5. +
+
+ +
+
+
+

Definition

+
+
+
Definition List
+
A number of connected items or names written or printed consecutively, typically one below the other.
+
This is a term.
+
This is the definition of that term, which both live in a dl.
+
Here is another term.
+
And it gets a definition too, which is this line.
+
Here is term that shares a definition with the term below.
+
And it gets a definition too, which is this line.
+
+ +
+
+
+

Logo

+
+ + +
+
+
+

Landscape 4x3

+
+ 4x3 Image + +
+
+
+

Landscape 16x9

+
+ 16x9 Image + +
+
+
+

Square

+
+ Square Thumbnail + +
+
+
+

Avatar

+
+ Avatar + +
+
+
+

Icons

+
+
    +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
  • +
+ +
+
+
+

Loading Icon

+
+ Loading + +
+
+
+

Favicon

+
+ + + +
+
+
+

Text Fields

+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+
+

Select Menu

+
+
+
+ + +
+
+ +
+
+
+

Checkbox

+
+
+
+ Checkbox * +
    +
    • +
    • +
    • +
+
+
+ +
+
+
+

Radio Buttons

+
+
+
+ Radio +
    +
    • +
    • +
    • +
+
+
+ +
+
+
+

Html5 Inputs

+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+

Buttons

+
+

Button

+

Alternate Button

+

Disabled Button

+

Text Button

+ +
+
+
+

Table

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Table Heading 1Table Heading 2Table Heading 3Table Heading 3Table Heading 4
Table Footer 1Table Footer 2Table Footer 3Table Footer 3Table Footer 4
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
+ +
+
+
+

Video

+
+ + +
+
+
+

Audio

+
+ + +
+
+
+

Byline Author Only

+
+
by Author Name
+ +
+
+
+

Byline Author Time

+
+
by Author Name on
+ +
+
+
+

Address

+
+
+
Company Name
+
+
1234 Main St.
+ Anywhere, + 101010, + CA +
U.S.A
+
+
+1.888.123.4567
+
+ +
+
+
+

Heading Group

+
+
+

This is the heading group's main heading

+

This is the heading group's subheading

+
+ +
+
+
+

Blockquote With Citation

+
+
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

+ Quote Source +
+ +
+
+
+

Intro Text

+
+

The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

+ +
+
+
+

Pullquote

+
+
+

A pull quote is a quotation or excerpt from an article

+
+ +
+
+
+

One Up

+
+
+ +
+
1/1
+
+ +
+ +
+
+
+

Two Up

+
+
+ +
+
1/2
+
1/2
+
+
+ +
+
+
+

Three Up

+
+
+ +
+
1/3
+
1/3
+
1/3
+
+
+ +
+
+
+

Four Up

+
+
+ +
+
1/4
+
1/4
+
1/4
+
1/4
+
+
+ +
+
+
+

Media Block

+
+
+ +
+ Square Thumbnail +
+
+

Lorem ipsum dolor sit (37 characters)

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

+
+ +
+ +
+
+
+

Headline Byline

+
+
+ +

Headline: Lorem Ipsum Dolor Amet Sit

+ + +
+ +
+
+
+

Block Hero

+
+
+ +
+ 16x9 Image +
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

+
+ +
+ +
+
+
+

Block Thumb Headline

+
+
+ +
+ Square Thumbnail +
+
+

Pattern Lab

+
+ +
+ +
+
+
+

Headline Only

+
+
+ +

Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit

+ +
+ +
+
+
+

Inset Block

+
+
+ +
+ 4x3 Image +
+
+

Lorem ipsum dolor sit (37 characters)

+
+ +
+ +
+
+
+

Figure With Caption

+
+
+ 4x3 Image +
This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
+
+ +
+
+
+

Search

+
+
+
+ Search + + + +
+
+ +
+
+
+

Comment Form

+
+
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+
+

Newsletter

+
+ + +
+
+
+

Primary Nav

+
+ + + +
+
+
+

Footer Nav

+
+ + +
+
+
+

Breadcrumbs

+
+ + +
+
+
+

Pagination

+
+
    +
  1. 1
    2. +
  2. 2
    3. +
  3. 3
    4. +
  4. 4
    5. +
  5. 5
    6. +
  6. 6
    7. +
  7. 7
    8. +
+ +
+
+
+

Tabs

+
+
+ +
+ +
+
+
+

Social Share

+
+ + +
+
+
+

Accordion

+
+
+ +
+ +
+
+
+

Single Comment

+
+
  • +
    + Avatar +

    Lacy Way

    +
    +
    +

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    +
    +
    • + +
    +
    +
    +

    Alert

    +
    +
    + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam +
    + +
    +
    +
    +

    Header

    +
    + + + + + +
    +
    +
    +

    Footer

    +
    + +
    +
    +

    © 2015 Company Name. All rights reserved.

    +
    +
    + + + +
    +
    +
    +

    Article Body

    +
    +

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    + +

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    + +16x9 Image + +

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui. +

    + +
    +

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    +
    + +

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim. +

    + +
    +
      +
    • This is a list item in an unordered list
      • +
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • +
    • + Lists can be nested inside of each other +
        +
      • This is a nested list item
        • +
      • This is another nested list item in an unordered list
        • +
      +
      • +
    • This is the last list item
      • +
    +
    + +
    +
      +
    1. This is a list item in an ordered list
      2. +
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. +
    3. + Lists can be nested inside of each other +
        +
      1. This is a nested list item
        2. +
      2. This is another nested list item in an ordered list
        3. +
      +
      4. +
    4. This is the last list item
      5. +
    +
    + +

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus. +

    + +
    +

    A pull quote is a quotation or excerpt from an article

    +
    + +

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus. +

    +

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    + +
    +
    +
    +

    Comment Thread

    +
    +
    +
    +

    59 Comments

    +
    +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    + + +
    +
    +
    +
      +
    • +
      + Avatar +

      Freyr Hines

      +
      +
      +

      Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.

      +
      +
    • +
      + Avatar +

      Aquila Achterkamp

      +
      +
      +

      Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.

      +
      +
    • +
      + Avatar +

      Siguror Hanigan

      +
      +
      +

      Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

      +
      +
    • +
      + Avatar +

      Plinius Sloane

      +
      +
      +

      The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

      +
      +
    • +
      + Avatar +

      Junius Koolen

      +
      +
      +

      Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.

      +
      +
      • +
    +
    +
      +
    1. 1
      2. +
    2. 2
      3. +
    3. 3
      4. +
    4. 4
      5. +
    5. 5
      6. +
    6. 6
      7. +
    7. 7
      8. +
    +
    + +
    +
    +
    +

    Sticky Comment

    +
    +
    +
    +

    Selected Comments

    +
      +
    • +
      +

      Lacy Way

      +
      +
      +

      We are all in the gutter, but some of us are looking at the stars.

      +
      +
      • +
    • +
      +

      Lacy Way

      +
      +
      +

      A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

      +
      +
      • +
    +
    +
    + + +
    +
    +
    +

    Carousel

    +
    +
    +
    +
    + +
    + 4x3 Image +
    +
    +

    Lorem ipsum dolor sit (37 characters)

    +
    +     +
    +
    +
    + ← +
    1/5
    + → +
    +
    + +
    +
    +
    +

    Latest Posts

    +
    +
    +

    Latest Posts

    + + View more posts +
    + +
    +
    +
    +

    Recent Tweets

    +
    +
    +

    Recent Tweets

    + + Follow us on Twitter +
    + +
    +
    +
    +

    Related Posts

    +
    +
    +

    Related Posts

    + +
    + +
    +
    +
    + +
    + + + + + + + + + + + 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 8968af50d..531af50a7 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -104,8 +104,8 @@ gulp.task('connect', ['lab'], function(){ gulp.watch(path.resolve(paths().source.css, '**/*.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(paths().source.css + '**/*.scss', ['sass:style']); + // gulp.watch(paths().public.styleguide + '*.scss', ['sass:styleguide']); gulp.watch( [ @@ -127,21 +127,21 @@ gulp.task('nodeunit', function(){ //sass tasks, turn on if you want to use // gulp.task('sass:style', function(){ -// return gulp.src('./source/css/*.scss') +// return gulp.src(paths().source.css + '*.scss') // .pipe(sass({ // outputStyle: 'expanded', // precision: 8 // })) -// .pipe(gulp.dest('./public/css')) +// .pipe(gulp.dest(paths().public.css)) // .pipe(browserSync.stream()); // }) // gulp.task('sass:styleguide', function(){ -// return gulp.src('./public/styleguide/css/*.scss') +// return gulp.src(gulp.dest(paths().public.styleguide + 'css/*.scss') // .pipe(sass({ // outputStyle: 'expanded', // precision: 8 // })) -// .pipe(gulp.dest('./public/styleguide/css')) +// .pipe(gulp.dest(paths().public.styleguide + 'css')) // .pipe(browserSync.stream()); // }) From 8ed60e0180db214bf0ff5f9099cc5e9087c8abb6 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:35:53 -0600 Subject: [PATCH 24/41] remove scss files from styleguide project --- core/styleguide/css/static.scss | 404 -------- core/styleguide/css/styleguide-specific.scss | 141 --- core/styleguide/css/styleguide.scss | 953 ------------------- source/css/scss/base/_animation.scss | 13 - source/css/scss/base/_forms.scss | 138 --- source/css/scss/base/_global-classes.scss | 102 -- source/css/scss/base/_headings.scss | 31 - source/css/scss/base/_links.scss | 10 - source/css/scss/base/_lists.scss | 19 - source/css/scss/base/_main.scss | 6 - source/css/scss/base/_media.scss | 23 - source/css/scss/base/_tables.scss | 18 - source/css/scss/base/_text.scss | 26 - source/css/scss/generic/_mixins.scss | 23 - source/css/scss/generic/_reset.scss | 17 - source/css/scss/generic/_variables.scss | 74 -- source/css/scss/objects/_accordion.scss | 33 - source/css/scss/objects/_ads.scss | 0 source/css/scss/objects/_article.scss | 52 - source/css/scss/objects/_blocks.scss | 138 --- source/css/scss/objects/_buttons.scss | 39 - source/css/scss/objects/_carousels.scss | 38 - source/css/scss/objects/_comments.scss | 29 - source/css/scss/objects/_footer.scss | 46 - source/css/scss/objects/_header.scss | 40 - source/css/scss/objects/_icons.scss | 125 --- source/css/scss/objects/_layout.scss | 288 ------ source/css/scss/objects/_lists.scss | 63 -- source/css/scss/objects/_main.scss | 9 - source/css/scss/objects/_messaging.scss | 18 - source/css/scss/objects/_nav.scss | 52 - source/css/scss/objects/_sections.scss | 7 - source/css/scss/objects/_tabs.scss | 33 - source/css/scss/objects/_text.scss | 77 -- source/css/scss/objects/_tooltip.scss | 42 - source/css/style.scss | 114 --- 36 files changed, 3241 deletions(-) delete mode 100644 core/styleguide/css/static.scss delete mode 100644 core/styleguide/css/styleguide-specific.scss delete mode 100644 core/styleguide/css/styleguide.scss delete mode 100644 source/css/scss/base/_animation.scss delete mode 100644 source/css/scss/base/_forms.scss delete mode 100644 source/css/scss/base/_global-classes.scss delete mode 100644 source/css/scss/base/_headings.scss delete mode 100644 source/css/scss/base/_links.scss delete mode 100644 source/css/scss/base/_lists.scss delete mode 100644 source/css/scss/base/_main.scss delete mode 100644 source/css/scss/base/_media.scss delete mode 100644 source/css/scss/base/_tables.scss delete mode 100644 source/css/scss/base/_text.scss delete mode 100644 source/css/scss/generic/_mixins.scss delete mode 100644 source/css/scss/generic/_reset.scss delete mode 100644 source/css/scss/generic/_variables.scss delete mode 100644 source/css/scss/objects/_accordion.scss delete mode 100644 source/css/scss/objects/_ads.scss delete mode 100644 source/css/scss/objects/_article.scss delete mode 100644 source/css/scss/objects/_blocks.scss delete mode 100644 source/css/scss/objects/_buttons.scss delete mode 100644 source/css/scss/objects/_carousels.scss delete mode 100644 source/css/scss/objects/_comments.scss delete mode 100644 source/css/scss/objects/_footer.scss delete mode 100644 source/css/scss/objects/_header.scss delete mode 100644 source/css/scss/objects/_icons.scss delete mode 100644 source/css/scss/objects/_layout.scss delete mode 100644 source/css/scss/objects/_lists.scss delete mode 100644 source/css/scss/objects/_main.scss delete mode 100644 source/css/scss/objects/_messaging.scss delete mode 100644 source/css/scss/objects/_nav.scss delete mode 100644 source/css/scss/objects/_sections.scss delete mode 100644 source/css/scss/objects/_tabs.scss delete mode 100644 source/css/scss/objects/_text.scss delete mode 100644 source/css/scss/objects/_tooltip.scss delete mode 100644 source/css/style.scss diff --git a/core/styleguide/css/static.scss b/core/styleguide/css/static.scss deleted file mode 100644 index a22d5d744..000000000 --- a/core/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/core/styleguide/css/styleguide-specific.scss b/core/styleguide/css/styleguide-specific.scss deleted file mode 100644 index f55a99390..000000000 --- a/core/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/core/styleguide/css/styleguide.scss b/core/styleguide/css/styleguide.scss deleted file mode 100644 index b0b38c0f7..000000000 --- a/core/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/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"; From b74988a6d53ccde0c172ff5bd80acc4d24bcd943 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:38:44 -0600 Subject: [PATCH 25/41] add the compiled css --- core/styleguide/css/static.css | 459 +++++++++++++ core/styleguide/css/styleguide-specific.css | 109 ++-- core/styleguide/css/styleguide.css | 674 ++++++++++++-------- 3 files changed, 931 insertions(+), 311 deletions(-) diff --git a/core/styleguide/css/static.css b/core/styleguide/css/static.css index e69de29bb..e23eaf41e 100644 --- a/core/styleguide/css/static.css +++ 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 index 5aaf94c33..3be158e1a 100644 --- a/core/styleguide/css/styleguide-specific.css +++ b/core/styleguide/css/styleguide-specific.css @@ -14,67 +14,88 @@ /* Breakpoints */ .demo { overflow: hidden; - margin-bottom: 1rem; } + margin-bottom: 1rem; +} .demo .gi, .demo .demo-block { - background: #dddddd; - color: gray; + 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: #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); } + 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; } + 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; } + 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; } + 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 { - 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; } } + 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; } } + 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; } + line-height: 1; +} + +/*# sourceMappingURL=styleguide-specific.css.map */ diff --git a/core/styleguide/css/styleguide.css b/core/styleguide/css/styleguide.css index 459a602d7..c7c2b48ae 100644 --- a/core/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 */ From c340e3c7422b51e66f8a7384bc3890e375f5f6cd Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:48:48 -0600 Subject: [PATCH 26/41] removing experimental package --- package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/package.json b/package.json index f339e058d..475721595 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,6 @@ "devDependencies": { "bs-html-injector": "^3.0.0", "grunt": "~0.4.5", - "grunt-browser-sync": "^2.2.0", "grunt-contrib-concat": "^0.5.1", "grunt-contrib-copy": "^0.8.2", "grunt-contrib-nodeunit": "^0.4.1", From 4a56ffa56e29dbb95225a35897a6b9297bed3cda Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 11:55:13 -0600 Subject: [PATCH 27/41] whoops! --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 475721595..9823c6d23 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "bs-html-injector": "^3.0.0", "grunt": "~0.4.5", "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" From 96f6432691e4da73598dece07c1e8c1642d852c9 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 13:38:54 -0600 Subject: [PATCH 28/41] switch output to source path of the styleguide so the copy command can move everything at once remove sass config from patternlab for now --- Gruntfile.js | 62 +++++++++++-------------------------------- builder/patternlab.js | 2 +- 2 files changed, 16 insertions(+), 48 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index e3e29064f..70ceabc21 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -62,23 +62,16 @@ module.exports = function(grunt) { copy: { main: { files: [ - { expand: true, cwd: paths().source.js, src: '*', dest: paths().public.js}, - { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, - { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, - { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, - { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} - ] - }, - css: { - files: [ - { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css } + { expand: true, cwd: paths().source.js, src: '*.js', dest: paths().public.js}, + { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, + { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, + { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, + { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().public.data} ] }, styleguide: { files: [ - { - expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide - } + { expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide } ] } }, @@ -91,35 +84,9 @@ module.exports = function(grunt) { paths().source.patterns + '**/*.json', paths().source.data + '*.json' ], - tasks: ['default'] - }, - // scss: { - // files: [paths().source.css + '**/*.scss', paths().source.styleguide + 'css/*.scss'], - // tasks: ['sass', 'copy:css','bsReload:css'] - // }, - patterns: { - files: [ - paths().source.patterns + '*.mustache', - paths().source.patterns + '*.json', - paths().source.data + '*.json' - ], - tasks: ['default'] + tasks: ['default', 'bsReload:css'] } }, - // sass: { - // build: { - // options: { - // style: 'expanded', - // precision: 8 - // }, - // files: { - // paths().source.css + 'style.css': paths().source.css + 'style.scss', - // paths().source.styleguide + 'css/static.css': paths().source.styleguide + 'css/static.scss', - // paths().source.styleguide + 'css/styleguide.css': paths().source.styleguide + 'css/styleguide.scss', - // paths().source.styleguide + 'css/styleguide-specific.css': paths().source.styleguide + 'css/styleguide-specific.scss' - // } - // } - // }, nodeunit: { all: ['test/*_tests.js'] }, @@ -128,11 +95,15 @@ module.exports = function(grunt) { options: { server: paths().public.root, watchTask: true, + watchOptions: { + ignoreInitial: true, + ignored: '*.html' + }, plugins: [ { module: 'bs-html-injector', options: { - files: paths().public + 'index.html' + files: [paths().public.root + '/index.html', paths().public.styleguide + '/styleguide.html'] } } ] @@ -140,7 +111,7 @@ module.exports = function(grunt) { } }, bsReload: { - css: paths().public + '**/*.css' + css: paths().public.root + '**/*.css' } }); @@ -154,15 +125,12 @@ module.exports = function(grunt) { //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', 'copy:styleguide', 'browserSync', 'watch:patterns', 'watch:scss']); - grunt.registerTask('serve', ['patternlab', /*'sass',*/ 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); + grunt.registerTask('serve', ['patternlab', 'copy:main', 'copy:styleguide', 'browserSync', 'watch:all']); grunt.registerTask('build', ['nodeunit', 'concat']); diff --git a/builder/patternlab.js b/builder/patternlab.js index a36c55f4d..04ee0ccc5 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -191,7 +191,7 @@ var patternlab_engine = function (config) { //build the styleguide var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'styleguide.mustache'), 'utf8'), styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns}); - fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), styleguideHtml); + fs.outputFileSync(path.resolve(paths.source.styleguide, 'html/styleguide.html'), styleguideHtml); //build the viewall pages var prevSubdir = '', From e4d71d1238b83942927a20ba91bdb089a1e58687 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 23:40:01 -0600 Subject: [PATCH 29/41] gulp file basic support for styleguide copy and watch --- gulpfile.js | 37 ++++++++++++------------------------- 1 file changed, 12 insertions(+), 25 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 531af50a7..b6c75cf25 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -8,7 +8,6 @@ var pkg = require('./package.json'), 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); @@ -94,6 +93,15 @@ gulp.task('cp:css', function(){ .pipe(browserSync.stream()); }); +// Styleguide Copy +gulp.task('cp:styleguide', function(){ + return gulp.src( + [ '**/*'], + {cwd:paths().source.styleguide} ) + .pipe(gulp.dest(paths().public.styleguide)) + .pipe(browserSync.stream());; +}); + //server and watch tasks gulp.task('connect', ['lab'], function(){ browserSync.init({ @@ -103,15 +111,13 @@ gulp.task('connect', ['lab'], function(){ }); gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']); - //suggested watches if you use scss - // gulp.watch(paths().source.css + '**/*.scss', ['sass:style']); - // gulp.watch(paths().public.styleguide + '*.scss', ['sass:styleguide']); + 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.data, '*.json'), ], ['lab-pipe'], function () { browserSync.reload(); } @@ -125,25 +131,6 @@ gulp.task('nodeunit', function(){ .pipe(nodeunit()); }); -//sass tasks, turn on if you want to use -// gulp.task('sass:style', function(){ -// return gulp.src(paths().source.css + '*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest(paths().public.css)) -// .pipe(browserSync.stream()); -// }) -// gulp.task('sass:styleguide', function(){ -// return gulp.src(gulp.dest(paths().public.styleguide + 'css/*.scss') -// .pipe(sass({ -// outputStyle: 'expanded', -// precision: 8 -// })) -// .pipe(gulp.dest(paths().public.styleguide + 'css')) -// .pipe(browserSync.stream()); -// }) gulp.task('lab-pipe', ['lab'], function(cb){ cb(); @@ -152,7 +139,7 @@ gulp.task('lab-pipe', ['lab'], function(cb){ gulp.task('default', ['lab']); -gulp.task('assets', ['cp:js', 'cp:img', 'cp:font', 'cp:data', 'cp:css' /*'sass:style', 'sass:styleguide'*/]); +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']); From e7b8d75fb2c4689ae48d6dd9218ee372d80a1efd Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 27 Jan 2016 23:40:53 -0600 Subject: [PATCH 30/41] update gulp file dependencies --- package.gulp.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.gulp.json b/package.gulp.json index 750ad5bd1..dc76220a2 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -4,17 +4,17 @@ "version": "1.0.1", "main": "./builder/patternlab.js", "dependencies": { - "del": "^2.0.2", + "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.0" + "mustache": "^2.2.1" }, "devDependencies": { - "browser-sync": "^2.10.0", + "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", From 2b1164065733833eea89d0cb251932ffef36c6f3 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:04:38 -0600 Subject: [PATCH 31/41] updated changelog to reflect configurable paths and styleguide move --- CHANGELOG | 3 +++ 1 file changed, 3 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index 43c23b2ac..5ca8a00d1 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -11,10 +11,13 @@ PL-node-v1.1.0 - 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 - 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 PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. From cb4fe8e6d5ea6e41e1c9d9fc1fcf055ab8b4adb3 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:12:05 -0600 Subject: [PATCH 32/41] add README entry for configurable paths closes #229 closes #220 --- README.md | 32 +++++++++++++++++++++++++++++--- 1 file changed, 29 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dc691d662..97b7fed55 100644 --- a/README.md +++ b/README.md @@ -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`. From 3094e60f9b1e784a4ebad604412f15ec879576d9 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:40:46 -0600 Subject: [PATCH 33/41] delete core/styleguide/html/styleguide.html from the shipped project to avoid overwrites --- builder/patternlab.js | 2 +- core/styleguide/html/styleguide.html | 2656 -------------------------- 2 files changed, 1 insertion(+), 2657 deletions(-) delete mode 100644 core/styleguide/html/styleguide.html diff --git a/builder/patternlab.js b/builder/patternlab.js index 04ee0ccc5..a36c55f4d 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -191,7 +191,7 @@ var patternlab_engine = function (config) { //build the styleguide var styleguideTemplate = fs.readFileSync(path.resolve(paths.source.patternlabFiles, 'styleguide.mustache'), 'utf8'), styleguideHtml = pattern_assembler.renderPattern(styleguideTemplate, {partials: styleguidePatterns}); - fs.outputFileSync(path.resolve(paths.source.styleguide, 'html/styleguide.html'), styleguideHtml); + fs.outputFileSync(path.resolve(paths.public.styleguide, 'html/styleguide.html'), styleguideHtml); //build the viewall pages var prevSubdir = '', diff --git a/core/styleguide/html/styleguide.html b/core/styleguide/html/styleguide.html deleted file mode 100644 index ca65a71ac..000000000 --- a/core/styleguide/html/styleguide.html +++ /dev/null @@ -1,2656 +0,0 @@ - - - - Pattern Lab Style Guide - - - - - - - - - -
    - - -
    -
    -

    Colors

    -
    -
      -
    • - - #ff0000 -
      • -
    • - - #00ff00 -
      • -
    • - - #0000ff -
      • -
    • - - #ffff00 -
      • -
    • - - #00ffff -
      • -
    • - - #ff00ff -
      • -
    • - - #ffffff -
      • -
    • - - #808080 -
      • -
    • - - #000000 -
      • -
    - -
    -
    -
    -

    Fonts

    -
    -

    Primary font: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Primary font italic: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Primary font bold: "HelveticaNeue", "Helvetica", "Arial", sans-serif;

    -

    Secondary font: Georgia, Times, "Times New Roman", serif;

    -

    Secondary font italic: Georgia, Times, "Times New Roman", serif;

    -

    Secondary font bold: Georgia, Times, "Times New Roman", serif;

    - -
    -
    -
    -

    Animations

    -
    -
    Fade: Duration: 0.3s Easing: ease-out (Hover to see effect)
    - -
    Movement: Duration: 0.8s Easing: ease-in-out; (Hover to see effect)
    - -
    -
    -
    -

    Visibility

    -
    -

    This text is hidden on smaller screens

    - -

    This text is only visible on smaller screens

    - -

    This text is hidden on medium screens only

    - -

    This text is only visible on medium screens

    - -

    This text is hidden on large screens

    - -

    This text is only visible on large screens

    - -
    -
    -
    -

    Headings

    -
    -

    Heading Level 1

    -

    Heading Level 2

    -

    Heading Level 3

    -

    Heading Level 4

    -
    Heading Level 5
    -
    Heading Level 6
    - -
    -
    -
    -

    Subheadings

    -
    -

    Subheading Level 1

    -

    Subheading Level 2

    -

    Subheading Level 3

    -

    Subheading Level 4

    -
    Subheading Level 5
    -
    Subheading Level 6
    - -
    -
    -
    -

    Headings With Links

    -
    -

    Heading 1 with link

    -

    Heading 2 with link

    -

    Heading 3 with link

    -

    Heading 4 with link

    -
    Heading 5 with link
    -
    Heading 6 with link
    - -
    -
    -
    -

    Paragraph

    -
    -

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    - -
    -
    -
    -

    Blockquote

    -
    -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    -
    - -
    -
    -
    -

    Inline Elements

    -
    -
    -

    This is a text link

    - -

    Strong is used to indicate strong importance

    - -

    This text has added emphasis

    - -

    The b element is stylistically different text from normal text, without any special importance

    - -

    The i element is text that is set off from the normal text

    - -

    The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

    - -

    This text is deleted and This text is inserted

    - -

    This text has a strikethrough

    - -

    Superscript®

    - -

    Subscript for things like H2O

    - -

    This small text is small for for fine print, etc.

    - -

    Abbreviation: HTML

    - -

    Keybord input: Cmd

    - -

    This text is a short inline quotation

    - -

    This is a citation

    - -

    The dfn element indicates a definition.

    - -

    The mark element indicates a highlight

    - -

    This is what inline code looks like.

    - -

    This is sample output from a computer program

    - -

    The variable element, such as x = y

    -
    - - -
    -
    -
    -

    Time

    -
    - - -
    -
    -
    -

    Preformatted Text

    -
    - 
      	
-P R E F O R M A T T E D T E X T
-! " # $ % & ' ( ) * + , - . /
-0 1 2 3 4 5 6 7 8 9 : ; < = > ?
-@ A B C D E F G H I J K L M N O
-P Q R S T U V W X Y Z [ \ ] ^ _
-` a b c d e f g h i j k l m n o
-p q r s t u v w x y z { | } ~ 
-
    - -
    -
    -
    -

    Emphasis Colors

    -
    -

    This is what error text looks like

    -

    This is what valid text looks like

    -

    This is what warning text looks like

    -

    This is what information text looks like.

    - -
    -
    -
    -

    Hr

    -
    -
    - -
    -
    -
    -

    Caption

    -
    -

    A caption can be applied to an image, quote, form field, etc.

    - -
    -
    -
    -

    Unordered

    -
    -
    -
      -
    • This is a list item in an unordered list
      • -
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • -
    • - Lists can be nested inside of each other -
        -
      • This is a nested list item
        • -
      • This is another nested list item in an unordered list
        • -
      -
      • -
    • This is the last list item
      • -
    -
    - -
    -
    -
    -

    Ordered

    -
    -
    -
      -
    1. This is a list item in an ordered list
      2. -
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. -
    3. - Lists can be nested inside of each other -
        -
      1. This is a nested list item
        2. -
      2. This is another nested list item in an ordered list
        3. -
      -
      4. -
    4. This is the last list item
      5. -
    -
    - -
    -
    -
    -

    Definition

    -
    -
    -
    Definition List
    -
    A number of connected items or names written or printed consecutively, typically one below the other.
    -
    This is a term.
    -
    This is the definition of that term, which both live in a dl.
    -
    Here is another term.
    -
    And it gets a definition too, which is this line.
    -
    Here is term that shares a definition with the term below.
    -
    And it gets a definition too, which is this line.
    -
    - -
    -
    -
    -

    Logo

    -
    - - -
    -
    -
    -

    Landscape 4x3

    -
    - 4x3 Image - -
    -
    -
    -

    Landscape 16x9

    -
    - 16x9 Image - -
    -
    -
    -

    Square

    -
    - Square Thumbnail - -
    -
    -
    -

    Avatar

    -
    - Avatar - -
    -
    -
    -

    Icons

    -
    -
      -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    • -
    - -
    -
    -
    -

    Loading Icon

    -
    - Loading - -
    -
    -
    -

    Favicon

    -
    - - - -
    -
    -
    -

    Text Fields

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

    Select Menu

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

    Checkbox

    -
    -
    -
    - Checkbox * -
      -
      • -
      • -
      • -
    -
    -
    - -
    -
    -
    -

    Radio Buttons

    -
    -
    -
    - Radio -
      -
      • -
      • -
      • -
    -
    -
    - -
    -
    -
    -

    Html5 Inputs

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

    Buttons

    -
    -

    Button

    -

    Alternate Button

    -

    Disabled Button

    -

    Text Button

    - -
    -
    -
    -

    Table

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    Table Heading 1Table Heading 2Table Heading 3Table Heading 3Table Heading 4
    Table Footer 1Table Footer 2Table Footer 3Table Footer 3Table Footer 4
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    Table Cell 1Table Cell 2Table Cell 3Table Cell 4Table Cell 5
    - -
    -
    -
    -

    Video

    -
    - - -
    -
    -
    -

    Audio

    -
    - - -
    -
    -
    -

    Byline Author Only

    -
    -
    by Author Name
    - -
    -
    -
    -

    Byline Author Time

    -
    -
    by Author Name on
    - -
    -
    -
    -

    Address

    -
    -
    -
    Company Name
    -
    -
    1234 Main St.
    - Anywhere, - 101010, - CA -
    U.S.A
    -
    -
    +1.888.123.4567
    -
    - -
    -
    -
    -

    Heading Group

    -
    -
    -

    This is the heading group's main heading

    -

    This is the heading group's subheading

    -
    - -
    -
    -
    -

    Blockquote With Citation

    -
    -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    - Quote Source -
    - -
    -
    -
    -

    Intro Text

    -
    -

    The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.

    - -
    -
    -
    -

    Pullquote

    -
    -
    -

    A pull quote is a quotation or excerpt from an article

    -
    - -
    -
    -
    -

    One Up

    -
    -
    - -
    -
    1/1
    -
    - -
    - -
    -
    -
    -

    Two Up

    -
    -
    - -
    -
    1/2
    -
    1/2
    -
    -
    - -
    -
    -
    -

    Three Up

    -
    -
    - -
    -
    1/3
    -
    1/3
    -
    1/3
    -
    -
    - -
    -
    -
    -

    Four Up

    -
    -
    - -
    -
    1/4
    -
    1/4
    -
    1/4
    -
    1/4
    -
    -
    - -
    -
    -
    -

    Media Block

    -
    -
    - -
    - Square Thumbnail -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -
    -     -
    - -
    -
    -
    -

    Headline Byline

    -
    -
    - -

    Headline: Lorem Ipsum Dolor Amet Sit

    - -     -
    - -
    -
    -
    -

    Block Hero

    -
    -
    - -
    - 16x9 Image -
    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. (72 characters)

    -
    -     -
    - -
    -
    -
    -

    Block Thumb Headline

    -
    -
    - -
    - Square Thumbnail -
    -
    -

    Pattern Lab

    -
    -     -
    - -
    -
    -
    -

    Headline Only

    -
    -
    - -

    Headline: Lorem ipsum dolor sit amet, consectetur adipiscing elit

    -     -
    - -
    -
    -
    -

    Inset Block

    -
    -
    - -
    - 4x3 Image -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -
    -     -
    - -
    -
    -
    -

    Figure With Caption

    -
    -
    - 4x3 Image -
    This is an example of an image with a caption. Photo captions, also known as cutlines, are a few lines of text used to explain or elaborate on published photographs.
    -
    - -
    -
    -
    -

    Search

    -
    -
    -
    - Search - - - -
    -
    - -
    -
    -
    -

    Comment Form

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

    Newsletter

    -
    - - -
    -
    -
    -

    Primary Nav

    -
    - - - -
    -
    -
    -

    Footer Nav

    -
    - - -
    -
    -
    -

    Breadcrumbs

    -
    - - -
    -
    -
    -

    Pagination

    -
    -
      -
    1. 1
      2. -
    2. 2
      3. -
    3. 3
      4. -
    4. 4
      5. -
    5. 5
      6. -
    6. 6
      7. -
    7. 7
      8. -
    - -
    -
    -
    -

    Tabs

    -
    -
    - -
    - -
    -
    -
    -

    Social Share

    -
    - - -
    -
    -
    -

    Accordion

    -
    -
    - -
    - -
    -
    -
    -

    Single Comment

    -
    -
  • -
    - Avatar -

    Lacy Way

    -
    -
    -

    So, setting about it as methodically as men might smoke out a wasps' nest, the Martians spread this strange stifling vapour over the Londonward country. The horns of the crescent slowly moved apart, until at last they formed a line from Hanwell to Coombe and Malden. All night through their destructive tubes advanced.

    -
    -
    • - -
    -
    -
    -

    Alert

    -
    -
    - Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam -
    - -
    -
    -
    -

    Header

    -
    - - - - - -
    -
    -
    -

    Footer

    -
    - -
    -
    -

    © 2015 Company Name. All rights reserved.

    -
    -
    - - - -
    -
    -
    -

    Article Body

    -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer fringilla sem a urna porttitor fringilla. Nulla eget justo felis.

    - -

    Aliquam erat volutpat. Mauris vulputate scelerisque feugiat. Cras a erat a diam venenatis aliquam. Sed tempus, purus ac pretium varius, risus orci sagittis purus, quis auctor libero magna nec magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eros dolor, rutrum eu sollicitudin eu, commodo at leo. Suspendisse potenti. Sed eu nibh sit amet quam auctor feugiat vel et risus. Maecenas eu urna adipiscing neque dictum mollis suscipit in augue. Praesent pulvinar condimentum sagittis. Maecenas laoreet neque non eros consectetur fringilla. Donec vitae risus leo, vitae pharetra ipsum. Sed placerat eros eget elit iaculis semper. Aliquam congue blandit orci ac pretium.

    - -16x9 Image - -

    Aliquam ultrices cursus mauris, eget volutpat justo mattis nec. Sed a orci turpis. Aliquam aliquet placerat dui, consectetur tincidunt leo tristique et. Vivamus enim nisi, blandit a venenatis quis, convallis et arcu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris libero sapien, placerat in sodales eu, tempor quis dui. Vivamus egestas faucibus pulvinar. Maecenas eget diam nunc. Phasellus at sem eros, ac suscipit neque. Phasellus sollicitudin libero a odio dignissim scelerisque. Aliquam purus nulla, tempor eget ullamcorper quis, rhoncus non dui. -

    - -
    -

    A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

    -
    - -

    Cras at fringilla ipsum. Donec nec libero eget est blandit dignissim a eu ante. Morbi augue nulla, luctus eu sagittis vel, malesuada ut felis. Aliquam erat volutpat. Morbi malesuada augue ac massa hendrerit fermentum. Integer scelerisque lacus a dolor convallis lobortis. Curabitur mollis ante in massa ultricies dignissim. -

    - -
    -
      -
    • This is a list item in an unordered list
      • -
    • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
      • -
    • - Lists can be nested inside of each other -
        -
      • This is a nested list item
        • -
      • This is another nested list item in an unordered list
        • -
      -
      • -
    • This is the last list item
      • -
    -
    - -
    -
      -
    1. This is a list item in an ordered list
      2. -
    2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
      3. -
    3. - Lists can be nested inside of each other -
        -
      1. This is a nested list item
        2. -
      2. This is another nested list item in an ordered list
        3. -
      -
      4. -
    4. This is the last list item
      5. -
    -
    - -

    Donec posuere fringilla nunc, vitae venenatis diam scelerisque vel. Nullam vitae mauris magna. Mauris et diam quis justo volutpat tincidunt congue nec magna. Curabitur vitae orci elit. Ut mollis massa id magna vestibulum consequat. Proin rutrum lectus justo, sit amet tincidunt est. Vivamus vitae lacinia risus. -

    - -
    -

    A pull quote is a quotation or excerpt from an article

    -
    - -

    Donec venenatis imperdiet tortor, vitae blandit odio interdum ut. Integer orci metus, lobortis id lacinia eget, rutrum vitae justo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In pretium fermentum justo nec pharetra. Maecenas eget dapibus justo. Ut quis est risus. Nullam et eros at odio commodo venenatis quis et augue. Sed sed augue at tortor porttitor hendrerit nec ut nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin sollicitudin enim consectetur mi commodo quis cursus ante pretium. Nunc gravida cursus nisi in gravida. Suspendisse eget tortor sed urna consequat tincidunt. Etiam eget convallis lectus. Suspendisse cursus rutrum massa ac faucibus. -

    -

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis, suscipit repellendus nulla accusantium deserunt sed explicabo voluptate sapiente ratione inventore molestiae nihil earum repellat quia odit vitae perspiciatis aliquam amet?

    - -
    -
    -
    -

    Comment Thread

    -
    -
    -
    -

    59 Comments

    -
    -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    -
    -
      -
    • -
      - Avatar -

      Freyr Hines

      -
      -
      -

      Wufoo diigo grockit sifteo divvyshot, unigo zooomr revver. Edmodo appjet joyent skype bubbli jajah zoodles joukuu xobni hojoki edmodo appjet, mozy mzinga akismet yuntaa joost yuntaa geni tivo insala yoono chumby, grockit sococo loopt zanga etsy cloudera koofers empressr jiglu blippy. Omgpop lanyrd joukuu sococo zimbra airbnb movity jibjab, foodzie.

      -
      -
    • -
      - Avatar -

      Aquila Achterkamp

      -
      -
      -

      Queso caerphilly cheesecake. Parmesan chalk and cheese port-salut port-salut babybel cottage cheese cheesy grin pepper jack. Croque monsieur paneer st. agur blue cheese emmental airedale monterey jack bavarian bergkase cheese triangles. Halloumi parmesan.

      -
      -
    • -
      - Avatar -

      Siguror Hanigan

      -
      -
      -

      Mung bean squash sorrel taro coriander collard greens gumbo bitterleaf tomato. Taro water chestnut celtuce turnip yarrow celery endive scallion black-eyed pea onion. Aubergine dulse turnip greens mustard salsify garlic soybean parsley bitterleaf desert raisin courgette.

      -
      -
    • -
      - Avatar -

      Plinius Sloane

      -
      -
      -

      The Knights Who Say Ni demand a sacrifice! …Are you suggesting that coconuts migrate? Knights of Ni, we are but simple travelers who seek the enchanter who lives beyond these woods. You don't frighten us, English pig-dogs! Go and boil your bottoms, sons of a silly person! I blow my nose at you, so-called Ah-thoor Keeng, you and all your silly English K-n-n-n-n-n-n-n-niggits!

      -
      -
    • -
      - Avatar -

      Junius Koolen

      -
      -
      -

      Fizzle crazy tortor. Sed rizzle. Ass pimpin' dolor dapibizzle turpis tempizzle fo shizzle my nizzle. Maurizzle pellentesque its fo rizzle izzle turpis. Get down get down we gonna chung nizzle. Shizzlin dizzle eleifend rhoncizzle break it down. In yo ghetto platea dictumst. Bling bling dapibizzle. Curabitur break yo neck, yall fo, pretizzle eu, go to hizzle dope, own yo' vitae, nunc. Bizzle suscipizzle. Ass semper velit sizzle fo.

      -
      -
      • -
    -
    -
      -
    1. 1
      2. -
    2. 2
      3. -
    3. 3
      4. -
    4. 4
      5. -
    5. 5
      6. -
    6. 6
      7. -
    7. 7
      8. -
    -
    - -
    -
    -
    -

    Sticky Comment

    -
    -
    -
    -

    Selected Comments

    -
      -
    • -
      -

      Lacy Way

      -
      -
      -

      We are all in the gutter, but some of us are looking at the stars.

      -
      -
      • -
    • -
      -

      Lacy Way

      -
      -
      -

      A life is like a garden. Perfect moments can be had, but not preserved, except in memory.

      -
      -
      • -
    -
    -
    - - -
    -
    -
    -

    Carousel

    -
    -
    -
    -
    - -
    - 4x3 Image -
    -
    -

    Lorem ipsum dolor sit (37 characters)

    -
    -     -
    -
    -
    - ← -
    1/5
    - → -
    -
    - -
    -
    -
    -

    Latest Posts

    -
    -
    -

    Latest Posts

    - - View more posts -
    - -
    -
    -
    -

    Recent Tweets

    -
    -
    -

    Recent Tweets

    - - Follow us on Twitter -
    - -
    -
    -
    -

    Related Posts

    -
    -
    -

    Related Posts

    - -
    - -
    -
    -
    - -
    - - - - - - - - - - - From 1e21f59e0535f009c401c8a59ba1954bc4b659d5 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Thu, 28 Jan 2016 00:41:05 -0600 Subject: [PATCH 34/41] add thank you to Geoff and Evan --- CHANGELOG | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG b/CHANGELOG index 5ca8a00d1..a7056154c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -12,6 +12,7 @@ PL-node-v1.1.0 - 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. From f3f85c9832f0a432f0837bcb4ddbca76980d24ea Mon Sep 17 00:00:00 2001 From: Kyle Welsby Date: Fri, 29 Jan 2016 13:08:17 +0000 Subject: [PATCH 35/41] bugfix: #171 pattern links inside base data object This minor refactor allows for pattern links insde `_data.json` as well as pattern `*.json` objects Also notice the RegExp has been updated to only match `link\.[A-z0-9-_]` to avoid matching `link123something` or `link*something` --- builder/pattern_assembler.js | 49 +++++++++++++++++---------------- test/pattern_assembler_tests.js | 9 ++++++ 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index f175dc115..eea6817b0 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -318,33 +318,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/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 6953e2324..8556fe2a7 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -643,6 +643,11 @@ 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'){ @@ -661,6 +666,10 @@ 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(); } }; From 88ce8cf89af064f84a69912f80c6ef9d0622fc9e Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sat, 30 Jan 2016 00:57:02 -0600 Subject: [PATCH 36/41] added resolve path to grunt and gulp to guard against any relative path problems. added watch for fonts and images folder --- Gruntfile.js | 30 ++++++++++++++++-------------- gulpfile.js | 27 +++++++++++++++------------ 2 files changed, 31 insertions(+), 26 deletions(-) diff --git a/Gruntfile.js b/Gruntfile.js index 70ceabc21..7b57f6385 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -62,27 +62,29 @@ module.exports = function(grunt) { copy: { main: { files: [ - { expand: true, cwd: paths().source.js, src: '*.js', dest: paths().public.js}, - { expand: true, cwd: paths().source.css, src: '*.css', dest: paths().public.css }, - { expand: true, cwd: paths().source.images, src: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.jpeg'], dest: paths().public.images }, - { expand: true, cwd: paths().source.fonts, src: '*', dest: paths().public.fonts}, - { expand: true, cwd: paths().source.data, src: 'annotations.js', dest: paths().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) } ] }, styleguide: { files: [ - { expand: true, cwd: paths().source.styleguide, src: ['*.*', '**/*.*'], dest: paths().public.styleguide } + { expand: true, cwd: path.resolve(paths().source.styleguide), src: ['*.*', '**/*.*'], dest: path.resolve(paths().public.styleguide) } ] } }, watch: { all: { files: [ - paths().source.css + '**/*.css', - paths().source.styleguide + 'css/*.css', - paths().source.patterns + '**/*.mustache', - paths().source.patterns + '**/*.json', - paths().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', 'bsReload:css'] } @@ -93,7 +95,7 @@ module.exports = function(grunt) { browserSync: { dev: { options: { - server: paths().public.root, + server: path.resolve(paths().public.root), watchTask: true, watchOptions: { ignoreInitial: true, @@ -103,7 +105,7 @@ module.exports = function(grunt) { { module: 'bs-html-injector', options: { - files: [paths().public.root + '/index.html', paths().public.styleguide + '/styleguide.html'] + files: [path.resolve(paths().public.root + '/index.html'), path.resolve(paths().public.styleguide + '/styleguide.html')] } } ] @@ -111,7 +113,7 @@ module.exports = function(grunt) { } }, bsReload: { - css: paths().public.root + '**/*.css' + css: path.resolve(paths().public.root + '**/*.css') } }); diff --git a/gulpfile.js b/gulpfile.js index b6c75cf25..f8ad52f35 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -62,34 +62,34 @@ gulp.task('banner', function(){ // JS copy gulp.task('cp:js', function(){ - return gulp.src('**/*.js', {cwd:paths().source.js}) - .pipe(gulp.dest(paths().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:paths().source.images} ) - .pipe(gulp.dest(paths().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:paths().source.fonts}) - .pipe(gulp.dest(paths().public.images)); + 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:paths().source.data}) - .pipe(gulp.dest(paths().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(path.resolve(paths().source.css, 'style.css')) - .pipe(gulp.dest(paths().public.css)) + .pipe(gulp.dest(path.resolve(paths().public.css))) .pipe(browserSync.stream()); }); @@ -97,8 +97,8 @@ gulp.task('cp:css', function(){ gulp.task('cp:styleguide', function(){ return gulp.src( [ '**/*'], - {cwd:paths().source.styleguide} ) - .pipe(gulp.dest(paths().public.styleguide)) + {cwd: path.resolve(paths().source.styleguide)} ) + .pipe(gulp.dest(path.resolve(paths().public.styleguide))) .pipe(browserSync.stream());; }); @@ -106,7 +106,7 @@ gulp.task('cp:styleguide', function(){ gulp.task('connect', ['lab'], function(){ browserSync.init({ server: { - baseDir: paths().public.root + baseDir: path.resolve(paths().public.root) } }); gulp.watch(path.resolve(paths().source.css, '**/*.css'), ['cp:css']); @@ -118,6 +118,9 @@ gulp.task('connect', ['lab'], function(){ 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(); } From b45a809a98d310785d7f84345eb1be4efd2999d1 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 3 Feb 2016 09:39:02 -0600 Subject: [PATCH 37/41] building patternlab.partials object during addPattern now. unit test coverage closes #240 --- CHANGELOG | 2 + builder/pattern_assembler.js | 3 + test/pattern_assembler_tests.js | 92 +++++++++++++++++++++--------- test/pseudopattern_hunter_tests.js | 9 +-- 4 files changed, 74 insertions(+), 32 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index a7056154c..f8a773834 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -19,6 +19,8 @@ PL-node-v1.1.0 - 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. PL-node-v1.0.0 - FIX: Resolve issue with not hiding underscored patterns. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 0259ac788..161948ba6 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -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; } } @@ -177,6 +179,7 @@ for(i = 0; i < patternlab.patterns.length; i++){ if(patternlab.patterns[i].abspath === file){ currentPattern = patternlab.patterns[i]; + break; } } diff --git a/test/pattern_assembler_tests.js b/test/pattern_assembler_tests.js index 6b1c3426a..a8cc19101 100644 --- a/test/pattern_assembler_tests.js +++ b/test/pattern_assembler_tests.js @@ -22,7 +22,6 @@ test.done(); }, - 'find_pattern_partials finds verbose partials' : function(test){ //setup current pattern from what we would have during execution @@ -39,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 @@ -55,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 @@ -71,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 @@ -87,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 @@ -102,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 @@ -117,7 +111,6 @@ test.done(); }, - 'find_pattern_partials_with_parameters finds parameters' : function(test){ //setup current pattern from what we would have during execution @@ -134,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 @@ -151,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 @@ -168,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 @@ -183,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 @@ -198,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 @@ -306,6 +294,7 @@ 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'); @@ -315,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, {}); @@ -344,6 +333,7 @@ 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'); @@ -355,8 +345,8 @@ groupPattern.stylePartials = pattern_assembler.find_pattern_partials_with_style_modifiers(groupPattern); groupPattern.parameteredPartials = pattern_assembler.find_pattern_partials_with_parameters(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/10-multiple-classes-numeric.mustache', pl, {}); @@ -384,6 +374,7 @@ 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'); @@ -393,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, {}); @@ -422,6 +413,7 @@ 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'); @@ -431,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, {}); @@ -460,19 +452,20 @@ 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); + 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, {}); @@ -500,19 +493,20 @@ 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); + 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, {}); @@ -720,6 +714,48 @@ //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 2a9664e6e..9a0269482 100644 --- a/test/pseudopattern_hunter_tests.js +++ b/test/pseudopattern_hunter_tests.js @@ -25,6 +25,7 @@ pl.data.link = {}; pl.config.debug = false; pl.patterns = []; + 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'); @@ -32,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(); + } } }()); From 04409d335659fdb76d1353d36db9eb2a6acb4c5b Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Wed, 3 Feb 2016 10:01:57 -0600 Subject: [PATCH 38/41] update patternlab.partials[key] if an extended template changes added as part of #240 --- builder/list_item_hunter.js | 3 +++ builder/parameter_hunter.js | 3 +++ builder/pattern_assembler.js | 2 ++ builder/style_modifier_hunter.js | 3 +++ test/list_item_hunter_tests.js | 22 ++++++++++++------ test/parameter_hunter_tests.js | 36 ++++++++++++++++------------- test/style_modifier_hunter_tests.js | 4 ++++ 7 files changed, 50 insertions(+), 23 deletions(-) diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js index ddadeeb64..85f54f554 100644 --- a/builder/list_item_hunter.js +++ b/builder/list_item_hunter.js @@ -100,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/parameter_hunter.js b/builder/parameter_hunter.js index 980e0d43e..99738d1f1 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -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 161948ba6..fef71faf5 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -233,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{ diff --git a/builder/style_modifier_hunter.js b/builder/style_modifier_hunter.js index b1191a731..a3fd400f0 100644 --- a/builder/style_modifier_hunter.js +++ b/builder/style_modifier_hunter.js @@ -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/test/list_item_hunter_tests.js b/test/list_item_hunter_tests.js index 5137a57ff..b2895b24d 100644 --- a/test/list_item_hunter_tests.js +++ b/test/list_item_hunter_tests.js @@ -36,7 +36,8 @@ "link": {}, "partials": [] }, - "config": {"debug": false} + "config": {"debug": false}, + "partials" : {} }; var list_item_hunter = new lih(); @@ -80,7 +81,8 @@ "link": {}, "partials": [] }, - "config": {"debug": false} + "config": {"debug": false}, + "partials" : {} }; var list_item_hunter = new lih(); @@ -132,7 +134,8 @@ "key": "test-simple", "jsonFileData" : {} } - ] + ], + "partials" : {} }; var list_item_hunter = new lih(); @@ -199,7 +202,8 @@ "jsonFileData" : {}, "key": "test-bar", } - ] + ], + "partials" : {} }; var list_item_hunter = new lih(); @@ -263,7 +267,8 @@ "key": "test-simple", "jsonFileData" : {} } - ] + ], + "partials" : {} }; var list_item_hunter = new lih(); @@ -325,7 +330,8 @@ "key": "test-simple", "jsonFileData" : {} } - ] + ], + "partials" : {} }; var list_item_hunter = new lih(); @@ -387,7 +393,8 @@ "key": "test-simple", "jsonFileData" : {} } - ] + ], + "partials" : {} }; var list_item_hunter = new lih(); @@ -414,6 +421,7 @@ pl.data.link = {}; pl.config.debug = false; pl.patterns = []; + pl.partials = {}; pl.config.patterns = { source: patterns_dir}; pl.listitems = { "1": [ 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/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; From d66edf0a6e940532ba7b57b388194272519e611a Mon Sep 17 00:00:00 2001 From: Kyle Welsby Date: Thu, 4 Feb 2016 21:21:26 +0000 Subject: [PATCH 39/41] allow pseudo linking --- builder/patternlab.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/builder/patternlab.js b/builder/patternlab.js index 01850e29c..6c08ce8ef 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -91,10 +91,6 @@ var patternlab_engine = function () { pattern_assembler.process_pattern_iterative(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); - //diveSync again to recursively include partials, filling out the //extendedTemplate property of the patternlab.patterns elements diveSync(patterns_dir, { @@ -117,6 +113,10 @@ var patternlab_engine = function () { 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); From 2832cf7cd2e6472dc6d62c75e1b3431f6555ff4b Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 7 Feb 2016 16:43:46 -0600 Subject: [PATCH 40/41] Update changelog to reflect pattern link enhancement #239 --- CHANGELOG | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG b/CHANGELOG index f8a773834..5cc039b63 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -21,6 +21,8 @@ PL-node-v1.1.0 - 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. From 5293fb9a77f5d3dcc56b3d5d7cc9da7f9ee23dd0 Mon Sep 17 00:00:00 2001 From: BRIAN MUENZENMEYER Date: Sun, 7 Feb 2016 16:48:44 -0600 Subject: [PATCH 41/41] bumped version number --- builder/lineage_hunter.js | 2 +- builder/list_item_hunter.js | 12 ++++++------ builder/media_hunter.js | 2 +- builder/object_factory.js | 2 +- builder/parameter_hunter.js | 2 +- builder/pattern_assembler.js | 12 ++++++------ builder/pattern_exporter.js | 2 +- builder/patternlab.js | 2 +- builder/patternlab_grunt.js | 2 +- builder/patternlab_gulp.js | 2 +- builder/pseudopattern_hunter.js | 12 ++++++------ builder/style_modifier_hunter.js | 2 +- package.gulp.json | 2 +- package.json | 2 +- 14 files changed, 29 insertions(+), 29 deletions(-) diff --git a/builder/lineage_hunter.js b/builder/lineage_hunter.js index 7d4c78242..5c7c51df6 100644 --- a/builder/lineage_hunter.js +++ b/builder/lineage_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 2015 + * patternlab-node - v1.1.0 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/list_item_hunter.js b/builder/list_item_hunter.js index 85f54f554..bd025d7b5 100644 --- a/builder/list_item_hunter.js +++ b/builder/list_item_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.1.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/builder/media_hunter.js b/builder/media_hunter.js index 2a2fce02a..61583cc91 100644 --- a/builder/media_hunter.js +++ b/builder/media_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 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 8f4aa25dc..e667ab8df 100644 --- a/builder/object_factory.js +++ b/builder/object_factory.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 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 99738d1f1..8da66335b 100644 --- a/builder/parameter_hunter.js +++ b/builder/parameter_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 2015 + * patternlab-node - v1.1.0 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pattern_assembler.js b/builder/pattern_assembler.js index 7b15d73ee..c3c110885 100644 --- a/builder/pattern_assembler.js +++ b/builder/pattern_assembler.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.1.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/builder/pattern_exporter.js b/builder/pattern_exporter.js index 0afda0ede..6c46eb223 100644 --- a/builder/pattern_exporter.js +++ b/builder/pattern_exporter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 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 138bacfcf..19fe34324 100644 --- a/builder/patternlab.js +++ b/builder/patternlab.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 2015 + * patternlab-node - v1.1.0 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/patternlab_grunt.js b/builder/patternlab_grunt.js index 87a3f4c7c..5d1f1c6bb 100644 --- a/builder/patternlab_grunt.js +++ b/builder/patternlab_grunt.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 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 0c176d40a..71789185f 100644 --- a/builder/patternlab_gulp.js +++ b/builder/patternlab_gulp.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 2015 + * patternlab-node - v1.1.0 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/builder/pseudopattern_hunter.js b/builder/pseudopattern_hunter.js index ebd652161..80465eef4 100644 --- a/builder/pseudopattern_hunter.js +++ b/builder/pseudopattern_hunter.js @@ -1,10 +1,10 @@ -/* - * patternlab-node - v1.0.1 - 2015 - * +/* + * patternlab-node - v1.1.0 - 2016 + * * Brian Muenzenmeyer, and the web community. - * Licensed under the MIT license. - * - * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. + * Licensed under the MIT license. + * + * Many thanks to Brad Frost and Dave Olsen for inspiration, encouragement, and advice. * */ diff --git a/builder/style_modifier_hunter.js b/builder/style_modifier_hunter.js index a3fd400f0..12ed0c79f 100644 --- a/builder/style_modifier_hunter.js +++ b/builder/style_modifier_hunter.js @@ -1,5 +1,5 @@ /* - * patternlab-node - v1.0.1 - 2015 + * patternlab-node - v1.1.0 - 2016 * * Brian Muenzenmeyer, and the web community. * Licensed under the MIT license. diff --git a/package.gulp.json b/package.gulp.json index dc76220a2..fb73bd7c7 100644 --- a/package.gulp.json +++ b/package.gulp.json @@ -1,7 +1,7 @@ { "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.1", + "version": "1.1.0", "main": "./builder/patternlab.js", "dependencies": { "del": "^2.2.0", diff --git a/package.json b/package.json index 9823c6d23..24043cfb5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "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.1", + "version": "1.1.0", "main": "./builder/patternlab.js", "dependencies": { "diveSync": "^0.3.0",