From a36971e5ceebe8764f4cc5289242ac50d9191621 Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Tue, 15 Oct 2013 21:38:57 -0400 Subject: [PATCH 001/576] some simple fixes to get going on windows --- core/lib/PatternLab/Migrator.php | 2 +- core/migrations/001-move-source.json | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/core/lib/PatternLab/Migrator.php b/core/lib/PatternLab/Migrator.php index b839659d4..74d866c39 100644 --- a/core/lib/PatternLab/Migrator.php +++ b/core/lib/PatternLab/Migrator.php @@ -118,7 +118,7 @@ protected function runMigration($filename, $sourcePath, $destinationPath, $singl $fileName = str_replace($sourcePath,"",$object->getPathname()); // check to see if it's a new directory - if ($object->isDir() && !is_dir($destinationPath.$fileName)) { + if ($object->isDir() && !is_dir($destinationPath.$fileName)) { mkdir($destinationPath.$fileName); } else if ($object->isFile()) { copy($sourcePath.$fileName,$destinationPath.$fileName); diff --git a/core/migrations/001-move-source.json b/core/migrations/001-move-source.json index f220b5839..08bfd4d28 100644 --- a/core/migrations/001-move-source.json +++ b/core/migrations/001-move-source.json @@ -1,5 +1,5 @@ { - "sourcePath": "core/source/", - "destinationPath": "source/", + "sourcePath": "core/source", + "destinationPath": "source", "checkType": "dirEmpty" } \ No newline at end of file From d0370a53680b1fa26b0aa191351c14ccf672b210 Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Mon, 3 Feb 2014 15:40:39 -0500 Subject: [PATCH 002/576] better path matching for windows --- core/lib/PatternLab/Builder.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/core/lib/PatternLab/Builder.php b/core/lib/PatternLab/Builder.php index 67382a81e..9ffcc6fc5 100644 --- a/core/lib/PatternLab/Builder.php +++ b/core/lib/PatternLab/Builder.php @@ -77,8 +77,8 @@ public function __construct($config = array()) { } // set-up the source & public dirs - $this->sp = "/../../../source/_patterns/"; - $this->pp = "/../../../public/patterns/"; + $this->sp = "/../../../source/_patterns".DIRECTORY_SEPARATOR; + $this->pp = "/../../../public/patterns".DIRECTORY_SEPARATOR; $this->sd = __DIR__."/../../../source"; $this->pd = __DIR__."/../../../public"; From f27f3bf67483303db2d25ca9f63fc81f49db96eb Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Mon, 3 Feb 2014 15:40:55 -0500 Subject: [PATCH 003/576] untested tweaks for the migrator --- core/lib/PatternLab/Migrator.php | 5 +++-- core/migrations/002-move-styleguide.json | 4 ++-- core/migrations/003-move-pattern-header-footer.json | 4 ++-- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/core/lib/PatternLab/Migrator.php b/core/lib/PatternLab/Migrator.php index 74d866c39..777583bcc 100644 --- a/core/lib/PatternLab/Migrator.php +++ b/core/lib/PatternLab/Migrator.php @@ -35,9 +35,10 @@ public function migrate($diffVersion = false) { if (!$migration->isDot() && $migration->isFile() && ($filename[0] != "_")) { + $basePath = __DIR__."/../../../"; $migrationData = json_decode(file_get_contents($migration->getPathname())); - $sourcePath = __DIR__."/../../../".$migrationData->sourcePath; - $destinationPath = __DIR__."/../../../".$migrationData->destinationPath; + $sourcePath = ($checkType == "fileExists") ? $basePath.$migrationData->sourcePath : $basePath.$migrationData->sourcePath.DIRECTORY_SEPARATOR; + $destinationPath = ($checkType == "fileExists") ? $basePath.$migrationData->destinationPath : $basePath.$migrationData->destinationPath.DIRECTORY_SEPARATOR; $checkType = $migrationData->checkType; if ($checkType == "dirEmpty") { diff --git a/core/migrations/002-move-styleguide.json b/core/migrations/002-move-styleguide.json index 9ec9779fa..9f96dd1ee 100644 --- a/core/migrations/002-move-styleguide.json +++ b/core/migrations/002-move-styleguide.json @@ -1,5 +1,5 @@ { - "sourcePath": "core/styleguide/", - "destinationPath": "public/styleguide/", + "sourcePath": "core/styleguide", + "destinationPath": "public/styleguide", "checkType": "versionDiffDir" } \ No newline at end of file diff --git a/core/migrations/003-move-pattern-header-footer.json b/core/migrations/003-move-pattern-header-footer.json index e1cc0b060..6823124be 100644 --- a/core/migrations/003-move-pattern-header-footer.json +++ b/core/migrations/003-move-pattern-header-footer.json @@ -1,5 +1,5 @@ { - "sourcePath": "core/source/_patterns/00-atoms/00-meta/", - "destinationPath": "source/_patterns/00-atoms/00-meta/", + "sourcePath": "core/source/_patterns/00-atoms/00-meta", + "destinationPath": "source/_patterns/00-atoms/00-meta", "checkType": "dirExists" } \ No newline at end of file From 573475bc7a2773e928480399304b1abbc536116e Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Mon, 3 Feb 2014 15:56:50 -0500 Subject: [PATCH 004/576] more directory separator fixes --- core/lib/PatternLab/Builder.php | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/core/lib/PatternLab/Builder.php b/core/lib/PatternLab/Builder.php index 9ffcc6fc5..39f0200ff 100644 --- a/core/lib/PatternLab/Builder.php +++ b/core/lib/PatternLab/Builder.php @@ -507,6 +507,7 @@ protected function gatherPatternInfo() { $patternType = ""; $patternSubtype = ""; $patternSubtypeSet = false; + $dirSep = DIRECTORY_SEPARATOR; // initialize various arrays $this->navItems = array(); @@ -524,7 +525,7 @@ protected function gatherPatternInfo() { foreach($patternObjects as $name => $object) { $name = str_replace(__DIR__.$this->sp,"",$name); - $depth = substr_count($name,"/"); + $depth = substr_count($name,$dirSep); // track old types and subtypes for increment purposes @@ -595,10 +596,10 @@ protected function gatherPatternInfo() { if ($patternSubtypeSet) { $patternPath = $patternType."/".$patternSubtype."/".$pattern; // 00-atoms/01-global/00-colors - $patternPathDash = str_replace("/","-",$patternPath); // 00-atoms-01-global-00-colors (file path) + $patternPathDash = str_replace($dirSep,"-",$patternPath); // 00-atoms-01-global-00-colors (file path) } else { - $patternPath = $patternType."/".$pattern; // 00-atoms/00-colors - $patternPathDash = str_replace("/","-",$patternPath); // 00-atoms-00-colors (file path) + $patternPath = $patternType.$dirSep.$pattern; // 00-atoms/00-colors + $patternPathDash = str_replace($dirSep,"-",$patternPath); // 00-atoms-00-colors (file path) } // track to see if this pattern should get rendered @@ -608,9 +609,9 @@ protected function gatherPatternInfo() { if ($patternFull[0] != "_") { // set-up the names - $patternDash = $this->getPatternName($pattern,false); // colors - $patternClean = str_replace("-"," ",$patternDash); // colors (dashes replaced with spaces) - $patternPartial = $patternTypeDash."-".$patternDash; // atoms-colors + $patternDash = $this->getPatternName($pattern,false); // colors + $patternClean = str_replace("-"," ",$patternDash); // colors (dashes replaced with spaces) + $patternPartial = $patternTypeDash."-".$patternDash; // atoms-colors // set-up the info for the nav $patternInfo = array("patternPath" => $patternPathDash."/".$patternPathDash.".html", @@ -670,11 +671,11 @@ protected function gatherPatternInfo() { // add to patternPaths if ($patternSubtypeSet) { - $patternPath = $patternType."/".$patternSubtype."/".$pattern; // 00-atoms/01-global/00-colors - $patternPathDash = str_replace("/","-",$patternPath); // 00-atoms-01-global-00-colors (file path) + $patternPath = $patternType.$dirSep.$patternSubtype.$dirSep.$pattern; // 00-atoms/01-global/00-colors + $patternPathDash = str_replace($dirSep,"-",$patternPath); // 00-atoms-01-global-00-colors (file path) } else { - $patternPath = $patternType."/".$pattern; // 00-atoms/00-colors - $patternPathDash = str_replace("/","-",$patternPath); // 00-atoms-00-colors (file path) + $patternPath = $patternType.$dirSep.$pattern; // 00-atoms/00-colors + $patternPathDash = str_replace($dirSep,"-",$patternPath); // 00-atoms-00-colors (file path) } // add all patterns to patternPaths From b5db98da63d8259c5ae05fefdbd2ca07bee5260b Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Wed, 16 Oct 2013 00:58:30 -0400 Subject: [PATCH 005/576] more fixes for windows --- core/lib/Mustache/Loader/PatternLoader.php | 12 ++++++------ core/lib/PatternLab/Builder.php | 2 +- core/lib/PatternLab/Generator.php | 3 ++- 3 files changed, 9 insertions(+), 8 deletions(-) diff --git a/core/lib/Mustache/Loader/PatternLoader.php b/core/lib/Mustache/Loader/PatternLoader.php index f3c13e909..c63d8692c 100644 --- a/core/lib/Mustache/Loader/PatternLoader.php +++ b/core/lib/Mustache/Loader/PatternLoader.php @@ -109,7 +109,7 @@ protected function loadFile($name) // get the real file path for the pattern $fileName = $this->getFileName($partialName); - + //print $fileName."\n"; // throw error if path is not found if (!file_exists($fileName)) { throw new Mustache_Exception_UnknownTemplateException($name); @@ -143,29 +143,29 @@ protected function getFileName($name) { $fileName = ""; - + $dirSep = DIRECTORY_SEPARATOR; // test to see what kind of path was supplied $posDash = strpos($name,"-"); - $posSlash = strpos($name,"/"); + $posSlash = strpos($name,$dirSep); if (($posSlash === false) && ($posDash !== false)) { list($patternType,$pattern) = $this->getPatternInfo($name); // see if the pattern is an exact match for patternPaths. if not iterate over patternPaths to find a likely match if (isset($this->patternPaths[$patternType][$pattern])) { - $fileName = $this->baseDir."/".$this->patternPaths[$patternType][$pattern]["patternSrcPath"]; + $fileName = $this->baseDir.$dirSep.$this->patternPaths[$patternType][$pattern]["patternSrcPath"]; } else if (isset($this->patternPaths[$patternType])) { foreach($this->patternPaths[$patternType] as $patternMatchKey=>$patternMatchValue) { $pos = strpos($patternMatchKey,$pattern); if ($pos !== false) { - $fileName = $this->baseDir."/".$patternMatchValue["patternSrcPath"]; + $fileName = $this->baseDir.$dirSep.$patternMatchValue["patternSrcPath"]; break; } } } } else { - $fileName = $this->baseDir."/".$name; + $fileName = $this->baseDir.$dirSep.$name; } if (substr($fileName, 0 - strlen($this->extension)) !== $this->extension) { diff --git a/core/lib/PatternLab/Builder.php b/core/lib/PatternLab/Builder.php index 39f0200ff..8866948f8 100644 --- a/core/lib/PatternLab/Builder.php +++ b/core/lib/PatternLab/Builder.php @@ -595,7 +595,7 @@ protected function gatherPatternInfo() { $pattern = str_replace(".mustache","",$patternFull); // 00-colors if ($patternSubtypeSet) { - $patternPath = $patternType."/".$patternSubtype."/".$pattern; // 00-atoms/01-global/00-colors + $patternPath = $patternType.$dirSep.$patternSubtype.$dirSep.$pattern; // 00-atoms/01-global/00-colors $patternPathDash = str_replace($dirSep,"-",$patternPath); // 00-atoms-01-global-00-colors (file path) } else { $patternPath = $patternType.$dirSep.$pattern; // 00-atoms/00-colors diff --git a/core/lib/PatternLab/Generator.php b/core/lib/PatternLab/Generator.php index c3d336b02..aebfe5fd5 100644 --- a/core/lib/PatternLab/Generator.php +++ b/core/lib/PatternLab/Generator.php @@ -56,7 +56,8 @@ public function generate($enableCSS = false) { // gather all of the various pattern info $this->gatherPatternInfo(); - + + // clean the public directory to remove old files if ($this->cleanPublic == "true") { $this->cleanPublic(); From 5a00d556b7aef5f2714a33bfb3255fff168ddd1c Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Sat, 16 Nov 2013 14:37:24 -0500 Subject: [PATCH 006/576] JSON hinted --- public/styleguide/js/annotations-pattern.js | 42 ++++++++++--------- public/styleguide/js/annotations-viewer.js | 13 +++--- public/styleguide/js/code-pattern.js | 14 ++++--- public/styleguide/js/code-viewer.js | 19 +++++---- public/styleguide/js/data-saver.js | 29 ++++--------- public/styleguide/js/postmessage.js | 24 ++++++----- public/styleguide/js/url-handler.js | 45 +++++++++++---------- 7 files changed, 91 insertions(+), 95 deletions(-) diff --git a/public/styleguide/js/annotations-pattern.js b/public/styleguide/js/annotations-pattern.js index 1855c7137..2d862d6bf 100644 --- a/public/styleguide/js/annotations-pattern.js +++ b/public/styleguide/js/annotations-pattern.js @@ -6,6 +6,8 @@ * */ +var comments = {}; + var annotationsPattern = { commentsOverlayActive: false, @@ -22,8 +24,8 @@ var annotationsPattern = { // make sure this only added when we're on a pattern specific view var body = document.getElementsByTagName("body"); if (!body[0].classList.contains("sg-pattern-list")) { - for (comment in comments.comments) { - var item = comments.comments[comment]; + for(i = 0; i < comments.comments.length; i++) { + var item = comments.comments[i]; var els = document.querySelectorAll(item.el); for (var i = 0; i < els.length; ++i) { els[i].onclick = (function(item) { @@ -59,7 +61,7 @@ var annotationsPattern = { var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; parent.postMessage(obj,targetOrigin); - } + }; })(item); } } @@ -109,10 +111,12 @@ var annotationsPattern = { */ findParent: function(el) { + var parentEl; + if (el.parentNode.classList.contains("sg-pattern")) { return el.parentNode; } else { - var parentEl = annotationsPattern.findParent(el.parentNode); + parentEl = annotationsPattern.findParent(el.parentNode); } return parentEl; @@ -131,7 +135,9 @@ var annotationsPattern = { return; } - if (event.data.commentToggle != undefined) { + if (event.data.commentToggle !== undefined) { + + var i, els, item; // if this is an overlay make sure it's active for the onclick event annotationsPattern.commentsOverlayActive = false; @@ -147,16 +153,16 @@ var annotationsPattern = { // if comments overlay is turned off make sure to remove the has-comment class and pointer if (!annotationsPattern.commentsOverlayActive) { - var els = document.querySelectorAll(".has-comment"); - for (var i = 0; i < els.length; i++) { + els = document.querySelectorAll(".has-comment"); + for (i = 0; i < els.length; i++) { els[i].classList.remove("has-comment"); } } // if comments embedding is turned off make sure to hide the annotations div if (!annotationsPattern.commentsEmbeddedActive) { - var els = document.getElementsByClassName("sg-annotations"); - for (var i = 0; i < els.length; i++) { + els = document.getElementsByClassName("sg-annotations"); + for (i = 0; i < els.length; i++) { els[i].style.display = "none"; } } @@ -164,10 +170,10 @@ var annotationsPattern = { // if comments overlay is turned on add the has-comment class and pointer if (annotationsPattern.commentsOverlayActive) { - for (comment in comments.comments) { - var item = comments.comments[comment]; - var els = document.querySelectorAll(item.el); - for (var i = 0; i < els.length; i++) { + for (i = 0; i < comments.comments.length; i++) { + item = comments.comments[i]; + els = document.querySelectorAll(item.el); + for (i = 0; i < els.length; i++) { els[i].classList.add("has-comment"); } } @@ -175,9 +181,9 @@ var annotationsPattern = { } else if (annotationsPattern.commentsEmbeddedActive && !annotationsPattern.commentsEmbedded) { // if comment embedding is turned on and comments haven't been embedded yet do it - for (comment in comments.comments) { - var item = comments.comments[comment]; - var els = document.querySelectorAll(item.el); + for (i = 0; i < comments.comments.length; i++) { + item = comments.comments[i]; + els = document.querySelectorAll(item.el); if (els.length > 0) { annotationsPattern.embedComments(els[0],item.title,item.comment); } @@ -187,8 +193,8 @@ var annotationsPattern = { } else if (annotationsPattern.commentsEmbeddedActive && annotationsPattern.commentsEmbedded) { // if comment embedding is turned on and comments have been embedded simply display them - var els = document.getElementsByClassName("sg-annotations"); - for (var i = 0; i < els.length; ++i) { + els = document.getElementsByClassName("sg-annotations"); + for (i = 0; i < els.length; ++i) { els[i].style.display = "block"; } diff --git a/public/styleguide/js/annotations-viewer.js b/public/styleguide/js/annotations-viewer.js index ea0fbea09..7c51d4c8e 100644 --- a/public/styleguide/js/annotations-viewer.js +++ b/public/styleguide/js/annotations-viewer.js @@ -55,7 +55,7 @@ var annotationsViewer = { commentContainerInit: function() { - if (document.getElementById("sg-annotation-container") == undefined) { + if (document.getElementById("sg-annotation-container") === undefined) { $('').html('Close

Annotation Title

Here is some comment text
').appendTo('body').css('bottom',-$(document).outerHeight()); } @@ -65,7 +65,7 @@ var annotationsViewer = { $('#sg-annotation-container').show(); } - $('body').delegate('#sg-annotation-close-btn','click',function(e) { + $('body').delegate('#sg-annotation-close-btn','click',function() { annotationsViewer.slideComment($('#sg-annotation-container').outerHeight()); return false; }); @@ -86,9 +86,8 @@ var annotationsViewer = { }, updateComment: function(el,title,msg) { - var $container = $('#sg-annotation-container'), - $title = $('#sg-annotation-title'), - $text = $('#sg-annotation-text'); + var $title = $('#sg-annotation-title'), + $text = $('#sg-annotation-text'); $title.text(title); $text.html(msg); annotationsViewer.slideComment(0); @@ -106,7 +105,7 @@ var annotationsViewer = { return; } - if (event.data.commentOverlay != undefined) { + if (event.data.commentOverlay !== undefined) { if (event.data.commentOverlay == "on") { annotationsViewer.updateComment(event.data.el,event.data.title,event.data.comment); @@ -118,7 +117,7 @@ var annotationsViewer = { } -} +}; $(document).ready(function() { annotationsViewer.onReady(); }); window.addEventListener("message", annotationsViewer.receiveIframeMessage, false); diff --git a/public/styleguide/js/code-pattern.js b/public/styleguide/js/code-pattern.js index 96bfd4ff8..fcd6d6430 100644 --- a/public/styleguide/js/code-pattern.js +++ b/public/styleguide/js/code-pattern.js @@ -23,7 +23,9 @@ var codePattern = { return; } - if (event.data.codeToggle != undefined) { + if (event.data.codeToggle !== undefined) { + + var els, i; // if this is an overlay make sure it's active for the onclick event codePattern.codeOverlayActive = false; @@ -39,8 +41,8 @@ var codePattern = { // if comments embedding is turned off make sure to hide the annotations div if (!codePattern.codeEmbeddedActive && (body[0].classList.contains("sg-pattern-list"))) { - var els = document.getElementsByClassName("sg-code"); - for (var i = 0; i < els.length; i++) { + els = document.getElementsByClassName("sg-code"); + for (i = 0; i < els.length; i++) { els[i].style.display = "none"; } } @@ -49,14 +51,14 @@ var codePattern = { if (codePattern.codeOverlayActive) { var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; - obj = { "codeOverlay": "on", "lineage": lineage, "html": document.getElementById("sg-pattern-html").textContent, "css": document.getElementById("sg-pattern-css").textContent }; + var obj = { "codeOverlay": "on", "lineage": lineage, "html": document.getElementById("sg-pattern-html").textContent, "css": document.getElementById("sg-pattern-css").textContent }; parent.postMessage(obj,targetOrigin); } else if (codePattern.codeEmbeddedActive) { // if code embedding is turned on simply display them - var els = document.getElementsByClassName("sg-code"); - for (var i = 0; i < els.length; ++i) { + els = document.getElementsByClassName("sg-code"); + for (i = 0; i < els.length; ++i) { els[i].style.display = "block"; } diff --git a/public/styleguide/js/code-viewer.js b/public/styleguide/js/code-viewer.js index d0099a40d..c9bf350cd 100644 --- a/public/styleguide/js/code-viewer.js +++ b/public/styleguide/js/code-viewer.js @@ -55,7 +55,7 @@ var codeViewer = { codeContainerInit: function() { - if (document.getElementById("sg-code-container") == undefined) { + if (document.getElementById("sg-code-container") === undefined) { $('').html('Close

HTML

').appendTo('body').css('bottom',-$(document).outerHeight()); } @@ -65,7 +65,7 @@ var codeViewer = { $('#sg-code-container').show(); } - $('body').delegate('#sg-code-close-btn','click',function(e) { + $('body').delegate('#sg-code-close-btn','click',function() { codeViewer.slideCode($('#sg-code-container').outerHeight()); return false; }); @@ -88,20 +88,19 @@ var codeViewer = { updateCode: function(lineage,html,css) { // draw lineage - if (lineage.length != 0) { + if (lineage.length !== 0) { $("#sg-code-lineage").css("display","block"); - var i = 0; var lineageList = ""; - for (pattern in lineage) { - lineageList += (i == 0) ? "" : ", "; - lineageList += ""+lineage[pattern]["lineagePattern"]+""; + for (var i = 0; i < lineage.length; i++) { + lineageList += (i === 0) ? "" : ", "; + lineageList += ""+lineage[i].lineagePattern+""; i++; } $("#sg-code-lineage-fill").html(lineageList); $('#sg-code-lineage-fill a').on("click", function(e){ - e.preventDefault; + e.preventDefault(); document.getElementById("sg-viewport").contentWindow.postMessage( { "path": urlHandler.getFileName($(this).attr("data-patternpartial")) }, urlHandler.targetOrigin); }); } @@ -133,7 +132,7 @@ var codeViewer = { return; } - if (event.data.codeOverlay != undefined) { + if (event.data.codeOverlay !== undefined) { if (event.data.codeOverlay == "on") { codeViewer.updateCode(event.data.lineage,event.data.html,event.data.css); @@ -147,7 +146,7 @@ var codeViewer = { } -} +}; $(document).ready(function() { codeViewer.onReady(); }); window.addEventListener("message", codeViewer.receiveIframeMessage, false); diff --git a/public/styleguide/js/data-saver.js b/public/styleguide/js/data-saver.js index e354e1e79..3d7779ee0 100644 --- a/public/styleguide/js/data-saver.js +++ b/public/styleguide/js/data-saver.js @@ -90,11 +90,7 @@ var DataSaver = { */ addValue: function (name,val) { var cookieVal = $.cookie(this.cookieName); - if ((cookieVal == null) || (cookieVal == "")) { - cookieVal = name+"~"+val; - } else { - cookieVal = cookieVal+"|"+name+"~"+val; - } + cookieVal = ((cookieVal === null) || (cookieVal === "")) ? name+"~"+val : cookieVal+"|"+name+"~"+val; $.cookie(this.cookieName,cookieVal); }, @@ -109,14 +105,10 @@ var DataSaver = { var cookieVals = $.cookie(this.cookieName).split("|"); for (var i = 0; i < cookieVals.length; i++) { var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { + if (fieldVals[0] == name) { fieldVals[1] = val; } - if (i > 0) { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } + updateCookieVals += (i > 0) ? "|"+fieldVals[0]+"~"+fieldVals[1] : fieldVals[0]+"~"+fieldVals[1]; } $.cookie(this.cookieName,updateCookieVals); } else { @@ -133,13 +125,9 @@ var DataSaver = { var cookieVals = $.cookie(this.cookieName).split("|"); var k = 0; for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] != name) { - if (k == 0) { - updateCookieVals += fieldVals[0]+"~"+fieldVals[1]; - } else { - updateCookieVals += "|"+fieldVals[0]+"~"+fieldVals[1]; - } + var fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] != name) { + updateCookieVals += (k === 0) ? fieldVals[0]+"~"+fieldVals[1] : "|"+fieldVals[0]+"~"+fieldVals[1]; k++; } } @@ -155,10 +143,9 @@ var DataSaver = { findValue: function (name) { if ($.cookie(this.cookieName)) { var cookieVals = $.cookie(this.cookieName).split("|"); - var k = 0; for (var i = 0; i < cookieVals.length; i++) { - var fieldVals = cookieVals[i].split("~"); - if (fieldVals[0] == name) { + var fieldVals = cookieVals[i].split("~"); + if (fieldVals[0] == name) { return fieldVals[1]; } } diff --git a/public/styleguide/js/postmessage.js b/public/styleguide/js/postmessage.js index cac192e3a..3ceb029f3 100644 --- a/public/styleguide/js/postmessage.js +++ b/public/styleguide/js/postmessage.js @@ -16,8 +16,8 @@ if (self != top) { // - pattern & view all get a pattern partial, styleguide gets all // - pattern shares lineage var options = { "path": window.location.toString() }; - options.patternpartial = (patternPartial != "") ? patternPartial : "all"; - if (lineage != "") { + options.patternpartial = (patternPartial !== "") ? patternPartial : "all"; + if (lineage !== "") { options.lineage = lineage; } @@ -26,8 +26,8 @@ if (self != top) { // find all links and add an onclick handler for replacing the iframe address so the history works var aTags = document.getElementsByTagName('a'); - for (a in aTags) { - aTags[a].onclick = function(e) { + for (var i = 0; i < aTags.length; i++) { + aTags[i].onclick = function(e) { e.preventDefault(); window.location.replace(this.getAttribute("href")); }; @@ -39,36 +39,38 @@ if (self != top) { var body = document.getElementsByTagName('body'); body[0].onclick = function() { var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; - parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin) + parent.postMessage( { "bodyclick": "bodyclick" }, targetOrigin); }; // watch the iframe source so that it can be sent back to everyone else. function receiveIframeMessage(event) { + var path; + // does the origin sending the message match the current host? if not dev/null the request if ((window.location.protocol != "file:") && (event.origin !== window.location.protocol+"//"+window.location.host)) { return; } // see if it got a path to replace - if (event.data.path != undefined) { + if (event.data.path !== undefined) { - if (patternPartial != "") { + if (patternPartial !== "") { // handle patterns and the view all page - var re = /patterns\/(.*)$/; - var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path; + var re = /patterns\/(.*)$/; + path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace(re,'')+event.data.path; window.location.replace(path); } else { // handle the style guide - var path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path; + path = window.location.protocol+"//"+window.location.host+window.location.pathname.replace("styleguide\/html\/styleguide.html","")+event.data.path; window.location.replace(path); } - } else if (event.data.reload != undefined) { + } else if (event.data.reload !== undefined) { // reload the location if there was a message to do so window.location.reload(); diff --git a/public/styleguide/js/url-handler.js b/public/styleguide/js/url-handler.js index 1cfde3cab..fbfc0acb2 100644 --- a/public/styleguide/js/url-handler.js +++ b/public/styleguide/js/url-handler.js @@ -27,7 +27,7 @@ var urlHandler = { var baseDir = "patterns"; var fileName = ""; - if (name == undefined) { + if (name === undefined) { return fileName; } @@ -36,20 +36,20 @@ var urlHandler = { } var paths = (name.indexOf("viewall-") != -1) ? viewAllPaths : patternPaths; - nameClean = name.replace("viewall-",""); + var nameClean = name.replace("viewall-",""); // look at this as a regular pattern var bits = this.getPatternInfo(nameClean, paths); var patternType = bits[0]; var pattern = bits[1]; - if ((paths[patternType] != undefined) && (paths[patternType][pattern] != undefined)) { + if ((paths[patternType] !== undefined) && (paths[patternType][pattern] !== undefined)) { fileName = paths[patternType][pattern]; - } else if (paths[patternType] != undefined) { + } else if (paths[patternType] !== undefined) { - for (patternMatchKey in paths[patternType]) { + for (var patternMatchKey in paths[patternType]) { if (patternMatchKey.indexOf(pattern) != -1) { fileName = paths[patternType][patternMatchKey]; break; @@ -58,14 +58,14 @@ var urlHandler = { } - if (fileName == "") { + if (fileName === "") { return fileName; } var regex = /\//g; - if ((name.indexOf("viewall-") != -1) && (fileName != "")) { + if ((name.indexOf("viewall-") != -1) && (fileName !== "")) { fileName = baseDir+"/"+fileName.replace(regex,"-")+"/index.html"; - } else if (fileName != "") { + } else if (fileName !== "") { fileName = baseDir+"/"+fileName.replace(regex,"-")+"/"+fileName.replace(regex,"-")+".html"; } @@ -87,12 +87,12 @@ var urlHandler = { var c = patternBits.length; var patternType = patternBits[0]; - while ((paths[patternType] == undefined) && (i < c)) { + while ((paths[patternType] === undefined) && (i < c)) { patternType += "-"+patternBits[i]; i++; } - pattern = name.slice(patternType.length+1,name.length); + var pattern = name.slice(patternType.length+1,name.length); return [patternType, pattern]; @@ -107,12 +107,12 @@ var urlHandler = { // the following is taken from https://developer.mozilla.org/en-US/docs/Web/API/window.location var oGetVars = new (function (sSearch) { - if (sSearch.length > 1) { - for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { - aItKey = aCouples[nKeyId].split("="); - this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : ""; - } - } + if (sSearch.length > 1) { + for (var aItKey, nKeyId = 0, aCouples = sSearch.substr(1).split("&"); nKeyId < aCouples.length; nKeyId++) { + aItKey = aCouples[nKeyId].split("="); + this[unescape(aItKey[0])] = aItKey.length > 1 ? unescape(aItKey[1]) : ""; + } + } })(window.location.search); return oGetVars; @@ -146,18 +146,19 @@ var urlHandler = { */ popPattern: function (e) { + var patternName; var state = e.state; - if (state == null) { + if (state === null) { this.skipBack = false; return; - } else if (state != null) { - var patternName = state.pattern; + } else if (state !== null) { + patternName = state.pattern; } var iFramePath = ""; iFramePath = this.getFileName(patternName); - if (iFramePath == "") { + if (iFramePath === "") { iFramePath = "styleguide/html/styleguide.html"; } @@ -171,7 +172,7 @@ var urlHandler = { } -} +}; /** * handle the onpopstate event @@ -179,4 +180,4 @@ var urlHandler = { window.onpopstate = function (event) { urlHandler.skipBack = true; urlHandler.popPattern(event); -} \ No newline at end of file +}; \ No newline at end of file From 0ec20fefcf11ed221f5bd299571b53ab029bf6a0 Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Sat, 16 Nov 2013 14:37:30 -0500 Subject: [PATCH 007/576] JSON hinted --- public/listeners/synclisteners.js | 34 +++++++++++++++---------------- 1 file changed, 16 insertions(+), 18 deletions(-) diff --git a/public/listeners/synclisteners.js b/public/listeners/synclisteners.js index 5ca64dc75..50f77fe26 100644 --- a/public/listeners/synclisteners.js +++ b/public/listeners/synclisteners.js @@ -17,8 +17,7 @@ var wsn; var wsnConnected = false; var wsc; var wscConnected = false; -var dataPrevious = 0; -var host = (window.location.host != "") ? window.location.host : "127.0.0.1"; +var host = (window.location.host !== "") ? window.location.host : "127.0.0.1"; // handle page updates from one browser to another function connectNavSync() { @@ -29,16 +28,16 @@ function connectNavSync() { wsn = new WebSocket("ws://"+host+":"+navSyncPort+"/navsync"); // when trying to open a connection to WebSocket update the pattern lab nav bar - wsn.onopen = function (event) { + wsn.onopen = function () { wsnConnected = true; $('#navSyncButton').attr("data-state","on"); $('#navSyncButton').addClass("connected"); $('#navSyncButton').addClass("active"); $('#navSyncButton').html(navSyncCopy+' On'); - } + }; // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsn.onclose = function (event) { + wsn.onclose = function () { wsnConnected = false; $('#navSyncButton').attr("data-state","off"); if ($('#navSyncButton').hasClass("connected")) { @@ -46,7 +45,7 @@ function connectNavSync() { $('#navSyncButton').removeClass("active"); } $('#navSyncButton').html(navSyncCopy+' Disabled'); - } + }; // when receiving a message from WebSocket update the iframe source wsn.onmessage = function (event) { @@ -68,10 +67,10 @@ function connectNavSync() { urlHandler.skipBack = false; } - } + }; // when there's an error update the pattern lab nav bar - wsn.onerror = function (event) { + wsn.onerror = function () { wsnConnected = false; $('#navSyncButton').attr("data-state","off"); if ($('#navSyncButton').hasClass("connected")) { @@ -79,7 +78,7 @@ function connectNavSync() { $('#navSyncButton').removeClass("active"); } $('#navSyncButton').html(navSyncCopy+' Disabled'); - } + }; } @@ -91,22 +90,21 @@ function connectContentSync() { if ('WebSocket' in window && window.WebSocket.CLOSING === 2) { - var dc = true; var contentSyncCopy = "Auto-reload"; wsc = new WebSocket("ws://"+host+":"+contentSyncPort+"/contentsync"); // when trying to open a connection to WebSocket update the pattern lab nav bar - wsc.onopen = function (event) { + wsc.onopen = function () { wscConnected = true; $('#contentSyncButton').attr("data-state","on"); $('#contentSyncButton').addClass("connected"); $('#contentSyncButton').addClass("active"); $('#contentSyncButton').html(contentSyncCopy+' On'); - } + }; // when closing a connection (or failing to make a connection) to WebSocket update the pattern lab nav bar - wsc.onclose = function (event) { + wsc.onclose = function () { wscConnected = false; $('#contentSyncButton').attr("data-state","off"); if ($('#contentSyncButton').hasClass("connected")) { @@ -114,17 +112,17 @@ function connectContentSync() { $('#contentSyncButton').removeClass("active"); } $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } + }; // when receiving a message from WebSocket reload the current frame adding the received timestamp // as a request var to, hopefully, bust caches... cachi(?) - wsc.onmessage = function (event) { + wsc.onmessage = function () { var targetOrigin = (window.location.protocol == "file:") ? "*" : window.location.protocol+"//"+window.location.host; document.getElementById('sg-viewport').contentWindow.postMessage( { "reload": true }, targetOrigin); - } + }; // when there's an error update the pattern lab nav bar - wsc.onerror = function (event) { + wsc.onerror = function () { wscConnected = false; $('#contentSyncButton').attr("data-state","off"); if ($('#contentSyncButton').hasClass("connected")) { @@ -132,7 +130,7 @@ function connectContentSync() { $('#contentSyncButton').removeClass("active"); } $('#contentSyncButton').html(contentSyncCopy+' Disabled'); - } + }; } From f4891d4e863da84fd6d5f30360432183bf2512dc Mon Sep 17 00:00:00 2001 From: Dave Olsen Date: Sat, 16 Nov 2013 15:15:11 -0500 Subject: [PATCH 008/576] adding cacheBuster support. we'll see how well it works. --- builder/lib/builder.lib.php | 22 ++++++++++++++++++- builder/lib/watcher.lib.php | 1 + source/_patternlab-files/index.mustache | 18 +++++++-------- .../pattern-header-footer/footer.html | 8 +++---- .../pattern-header-footer/header.html | 4 ++-- source/_patternlab-files/styleguide.mustache | 12 +++++----- source/_patternlab-files/viewall.mustache | 12 +++++----- 7 files changed, 49 insertions(+), 28 deletions(-) diff --git a/builder/lib/builder.lib.php b/builder/lib/builder.lib.php index f058552fd..d69b0f922 100644 --- a/builder/lib/builder.lib.php +++ b/builder/lib/builder.lib.php @@ -31,6 +31,7 @@ class Buildr { protected $enableCSS; // decide if we'll enable CSS parsing protected $patternCSS; // an array to hold the CSS generated for patterns protected $cssRuleSaver; // where css rule saver will be initialized + protected $cacheBuster; // a timestamp used to bust the cache for static assets like CSS and JS /** * When initializing the Builder class or the sub-classes make sure the base properties are configured @@ -75,6 +76,9 @@ public function __construct() { $this->enableCSS = false; $this->patternCSS = array(); + // set cache buster var + $this->setCacheBuster(); + } /** @@ -144,6 +148,10 @@ protected function generateMainPages() { // render the "view all" pages $this->generateViewAllPages(); + // add cacheBuster info + $this->navItems['cacheBuster'] = $this->cacheBuster; + $sd['cacheBuster'] = $this->cacheBuster; + // render the index page and the style guide $r = $this->mfs->render('index',$this->navItems); file_put_contents(__DIR__."/../../public/index.html",$r); @@ -194,6 +202,10 @@ private function generatePatternFile($f) { $rf = $this->renderPattern($f); $fr = file_get_contents(__DIR__.$this->sp."../_patternlab-files/pattern-header-footer/footer.html"); + // find & replace the cacheBuster var in header and footer + $hr = str_replace("{{ cacheBuster }}",$this->cacheBuster,$hr); + $fr = str_replace("{{ cacheBuster }}",$this->cacheBuster,$fr); + // the footer isn't rendered as mustache but we have some variables there any way. find & replace. $pp = $this->getPatternPartial($f); $fr = str_replace("{{ patternPartial }}",$pp,$fr); @@ -241,8 +253,9 @@ protected function generateViewAllPages() { $patternSubType = $subItem["patternSubType"]; // get all the rendered partials that match - $sid = $this->gatherPartialsByMatch($patternType, $patternSubType); + $sid = $this->gatherPartialsByMatch($patternType, $patternSubType); $sid["patternPartial"] = $subItem["patternPartial"]; + $sid["cacheBuster"] = $this->cacheBuster; // render the viewall template $v = $this->mfs->render('viewall',$sid); @@ -790,6 +803,13 @@ protected function getPatternTypesRegex() { } + /** + * Set the cache buster var so it can be used on the query string for file requests + */ + protected function setCacheBuster() { + $this->cacheBuster = time(); + } + /** * Write out the time tracking file so the content sync service will work. A holdover * from how I put together the original AJAX polling set-up. diff --git a/builder/lib/watcher.lib.php b/builder/lib/watcher.lib.php index 715f17237..02748d2f7 100644 --- a/builder/lib/watcher.lib.php +++ b/builder/lib/watcher.lib.php @@ -225,6 +225,7 @@ public function watch() { * @return {String} the final message */ private function updateSite($fileName,$message,$verbose = true) { + $this->setCacheBuster(); $this->gatherData(); $this->gatherPatternPaths(); $this->gatherNavItems(); diff --git a/source/_patternlab-files/index.mustache b/source/_patternlab-files/index.mustache index f8d3709be..f2bdce97a 100644 --- a/source/_patternlab-files/index.mustache +++ b/source/_patternlab-files/index.mustache @@ -4,8 +4,8 @@ Pattern Lab - - + + @@ -32,15 +32,15 @@ - - + + {{> patternPaths }} {{> viewAllPaths }} - + {{> websockets }} - - - - + + + + \ No newline at end of file diff --git a/source/_patternlab-files/pattern-header-footer/footer.html b/source/_patternlab-files/pattern-header-footer/footer.html index ddc55618d..0cdf4ea34 100644 --- a/source/_patternlab-files/pattern-header-footer/footer.html +++ b/source/_patternlab-files/pattern-header-footer/footer.html @@ -20,10 +20,10 @@ {{ patternCSS }} - - - - + + + + diff --git a/source/_patternlab-files/pattern-header-footer/header.html b/source/_patternlab-files/pattern-header-footer/header.html index 54a44f354..6d07f5009 100644 --- a/source/_patternlab-files/pattern-header-footer/header.html +++ b/source/_patternlab-files/pattern-header-footer/header.html @@ -15,13 +15,13 @@ - + - + - \ No newline at end of file From 3459114a44b9c1ceb9f423e74f5babf4ba426f55 Mon Sep 17 00:00:00 2001 From: Andreas Heiberg Date: Sun, 17 Nov 2013 13:41:19 +0100 Subject: [PATCH 011/576] Fixed cut of numbers in .text ol Screenshot of problem http://d.pr/i/srMa --- source/css/scss/objects/_text.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/css/scss/objects/_text.scss b/source/css/scss/objects/_text.scss index 42f1b4705..f323cdd6a 100644 --- a/source/css/scss/objects/_text.scss +++ b/source/css/scss/objects/_text.scss @@ -32,7 +32,7 @@ ol { list-style: decimal; - margin: 0 0 $space 1.2em; + margin: 0 0 $space 1.5em; ol { margin-bottom: 0; @@ -74,4 +74,4 @@ left: 0; z-index: 1; } -} \ No newline at end of file +} From 2f2d0286b495ea07d94e2fe42dc889b944341a39 Mon Sep 17 00:00:00 2001 From: Andreas Heiberg Date: Sun, 17 Nov 2013 13:45:24 +0100 Subject: [PATCH 012/576] Fixed cut of selects Screenshot of problem http://d.pr/i/TzSO --- source/css/scss/base/_forms.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/source/css/scss/base/_forms.scss b/source/css/scss/base/_forms.scss index d121af100..4b24a8a6c 100644 --- a/source/css/scss/base/_forms.scss +++ b/source/css/scss/base/_forms.scss @@ -25,7 +25,7 @@ label { button, input, select, textarea { font-family: inherit; font-size: 100%; - margin: 0; + margin: 0 1px 0; } input, textarea { @@ -135,4 +135,4 @@ input[type="search"]::-webkit-search-decoration { border: 0; border-left: 1px solid $gray; color: $gray; -} \ No newline at end of file +} From 7fd15264c09cce899a0dc4454c48a2381b7575f7 Mon Sep 17 00:00:00 2001 From: Obi Date: Wed, 27 Nov 2013 08:16:54 -0500 Subject: [PATCH 013/576] Allowed for use of Param with Pattern Includes Created two new methods: ::getPatternIncludeData line 185 Which extracts param from pattern include call and ::renderPattern line 278 which replaces param name with actual param value. I also modified the ::loadFile method so that it makes use of both functions before returning patterns. Now you can pass variables to patterns when they are included like this: {{> patternType-patternName(param: param_value, param2 ...) }} For parse to work properly, however, commas and parentheses must be escaped with a back slash (example: This is a \(string\) \, separated with a comma ) --- builder/lib/Mustache/Loader/PatternLoader.php | 126 +++++++++++++++++- 1 file changed, 124 insertions(+), 2 deletions(-) diff --git a/builder/lib/Mustache/Loader/PatternLoader.php b/builder/lib/Mustache/Loader/PatternLoader.php index c552806a9..7a07b1654 100644 --- a/builder/lib/Mustache/Loader/PatternLoader.php +++ b/builder/lib/Mustache/Loader/PatternLoader.php @@ -102,13 +102,26 @@ public function load($name) */ protected function loadFile($name) { - $fileName = $this->getFileName($name); + //get pattern data + $pattern_data = $this->getPatternIncludeData($name); + + //get file path + $fileName = $this->getFileName($pattern_data['file']); + //throw error if path is not found if (!file_exists($fileName)) { throw new Mustache_Exception_UnknownTemplateException($name); } - return file_get_contents($fileName); + //get file as string + $file_str = file_get_contents($fileName); + + //if pattern include was called with param, render param + if (isset($pattern_data['param'])) { + $file_str = $this->renderPattern($file_str, $pattern_data['param']); + } + + return $file_str; } /** @@ -152,6 +165,115 @@ protected function getFileName($name) return $fileName; } + + /** + * Inspects pattern include call for param + * ex: + * {{ > patternType-pattern(param1: value, param2 ...) }} + * + * and returns pattern data array with the following elements + * + * string $file - the file name + * + * array|null $param - an associative array of param ex: param_name => $param_value... or null if none found + * + * @param string $pattern_include_call_str + * @return array returns pattern data array + * + */ + + protected function getPatternIncludeData($pattern_include_call_str) + { + //create an array to store pattern include data + + $pattern_data = array(); + + // $pattern_include_call_str contains pattern name + // followed by param, example: + // patterntype-pattern (param1: value, param2: value2) + + $p_inc_str = $pattern_include_call_str; + + //get param using regex + //first remove all line breaks from string + + $p_inc_str = preg_replace("/[\r\n]*/","",$p_inc_str); + + //now use regex to get everything between parentheses ( ) + //note: this regex call ignores escaped parenteses \( and \) + + $matches = preg_match('/\([^\(\\\\]*(?:\\\\.[^\)\\\\]*)*\)/s', $p_inc_str, $p_inc_param); + + //if no matches are found return file name only, and set + //param to null + + if(!$matches){ + + $pattern_data['file'] = $p_inc_str; + $pattern_data['param'] = null; + return $pattern_data; + } + + //otherwise strip param from string and set file + + else { + + //strip param and add [file] as the include file name + $pattern_data['file'] = trim(preg_replace('/\([^\(\\\\]*(?:\\\\.[^\)\\\\]*)*\)/s', '', $p_inc_str)); + } + + //remove spaces & parentheses from either end of param string + + $p_inc_param = trim($p_inc_param[0], '()'); + + //split param by commas , but ignore escaped commas + + $p_inc_param = preg_split('/(? $v) + { + //replace each instance of {{ param_name }} with actual value + + $pattern_string = preg_replace('/{{([\s]*'.$k .'[\s]*)}}/', $v, $pattern_string); + } + + //return new pattern string + + return $pattern_string; + } private function getPatternInfo($name) { From 0861ec553fe1416d92b34acb076728ecf9dc5ced Mon Sep 17 00:00:00 2001 From: Brad Frost Date: Thu, 28 Nov 2013 16:28:40 -0500 Subject: [PATCH 014/576] Added head.mustache and foot.mustache. Style cleanup --- .../pattern-header-footer/header.html | 1 - source/_patternlab-files/styleguide.mustache | 1 - source/_patternlab-files/viewall.mustache | 1 - .../00-atoms/00-meta/00-head.mustache | 3 + .../00-atoms/00-meta/01-foot.mustache | 3 + source/css/scss/base/_forms.scss | 9 +- source/css/scss/base/_global-classes.scss | 10 +- source/css/scss/base/_media.scss | 2 +- source/css/scss/generic/_variables.scss | 29 +-- source/css/scss/objects/_article.scss | 22 +-- source/css/scss/objects/_buttons.scss | 2 +- source/css/scss/objects/_comments.scss | 2 +- source/css/scss/objects/_text.scss | 45 +---- source/css/style.css | 184 +++++++----------- 14 files changed, 107 insertions(+), 207 deletions(-) create mode 100644 source/_patterns/00-atoms/00-meta/00-head.mustache create mode 100644 source/_patterns/00-atoms/00-meta/01-foot.mustache diff --git a/source/_patternlab-files/pattern-header-footer/header.html b/source/_patternlab-files/pattern-header-footer/header.html index 8b99e0814..433f35bce 100644 --- a/source/_patternlab-files/pattern-header-footer/header.html +++ b/source/_patternlab-files/pattern-header-footer/header.html @@ -22,7 +22,6 @@ Therefore all calls to assets should have the ../../ in order to work in an apache-less environment --> - \ No newline at end of file diff --git a/source/_patternlab-files/styleguide.mustache b/source/_patternlab-files/styleguide.mustache index 6153ddc58..f3629b43c 100644 --- a/source/_patternlab-files/styleguide.mustache +++ b/source/_patternlab-files/styleguide.mustache @@ -60,6 +60,5 @@ - \ No newline at end of file diff --git a/source/_patternlab-files/viewall.mustache b/source/_patternlab-files/viewall.mustache index 0a003dd97..3d1742292 100644 --- a/source/_patternlab-files/viewall.mustache +++ b/source/_patternlab-files/viewall.mustache @@ -60,6 +60,5 @@ - \ No newline at end of file diff --git a/source/_patterns/00-atoms/00-meta/00-head.mustache b/source/_patterns/00-atoms/00-meta/00-head.mustache new file mode 100644 index 000000000..294ded3ba --- /dev/null +++ b/source/_patterns/00-atoms/00-meta/00-head.mustache @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/_patterns/00-atoms/00-meta/01-foot.mustache b/source/_patterns/00-atoms/00-meta/01-foot.mustache new file mode 100644 index 000000000..c618369db --- /dev/null +++ b/source/_patterns/00-atoms/00-meta/01-foot.mustache @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/source/css/scss/base/_forms.scss b/source/css/scss/base/_forms.scss index 4b24a8a6c..0f544d9f1 100644 --- a/source/css/scss/base/_forms.scss +++ b/source/css/scss/base/_forms.scss @@ -1,11 +1,6 @@ /*------------------------------------*\ $FORMS \*------------------------------------*/ - -form > div { - margin-bottom: $space; -} - form ol, form ul { list-style: none; margin-left: 0; @@ -19,7 +14,7 @@ fieldset { label { display: block; - padding-bottom: $space-quarter; + padding-bottom: $space-half; } button, input, select, textarea { @@ -73,7 +68,7 @@ input[type="search"]::-webkit-search-decoration { } input[type=submit], button, .btn { - font-size: $font-size-slightly-smaller; + font-size: $font-size-small-2; padding: 0.65rem 1.3rem; background: $gray-dark; position: absolute; diff --git a/source/css/scss/base/_global-classes.scss b/source/css/scss/base/_global-classes.scss index f327ab459..532e70367 100644 --- a/source/css/scss/base/_global-classes.scss +++ b/source/css/scss/base/_global-classes.scss @@ -80,7 +80,7 @@ } } -// +//States .valid { color: $valid; } @@ -89,8 +89,16 @@ color: $error; } +.warning { + color: $warning; +} + .info { + color: $info; +} +.font-secondary { + font-family: $font-secondary; } diff --git a/source/css/scss/base/_media.scss b/source/css/scss/base/_media.scss index db9023b12..ec74c8ffc 100644 --- a/source/css/scss/base/_media.scss +++ b/source/css/scss/base/_media.scss @@ -15,7 +15,7 @@ iframe { figure { margin-bottom: $space; img { - margin-bottom: $space-quarter; + margin-bottom: $space-half; } } figcaption { diff --git a/source/css/scss/generic/_variables.scss b/source/css/scss/generic/_variables.scss index a183647fd..29caf7e5a 100644 --- a/source/css/scss/generic/_variables.scss +++ b/source/css/scss/generic/_variables.scss @@ -7,48 +7,39 @@ $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; +$warning : #fff664; +$info : #a2dfdd; -$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-small : 0.75em; +$font-size-small-2 : 0.875em; +$font-size-med : 1em; +$font-size-med-2: 1.0625em; $font-size-large : 1.4375em; -//Layout -$max-width: 72rem; -$offset-left-1: 4.5rem; -$l-sidebar-width: 19.75rem; +//Layout +$max-width: 72em; //Defaults -$space : 1rem; +$space : 1em; $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 : 1em; $pad-and-half : $pad*1.5; $pad-double : $pad*2; $pad-half : $pad/2; diff --git a/source/css/scss/objects/_article.scss b/source/css/scss/objects/_article.scss index 3324811bb..55387309e 100644 --- a/source/css/scss/objects/_article.scss +++ b/source/css/scss/objects/_article.scss @@ -6,29 +6,11 @@ } .byline { - font-size: $font-size-slightly-smaller; + font-size: $font-size-small-2; 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; @@ -36,7 +18,7 @@ li { float: left; - margin-right: $space-quarter; + margin-right: $space-half; } a { diff --git a/source/css/scss/objects/_buttons.scss b/source/css/scss/objects/_buttons.scss index 46fb60d5c..4b39a7f65 100644 --- a/source/css/scss/objects/_buttons.scss +++ b/source/css/scss/objects/_buttons.scss @@ -17,7 +17,7 @@ &.disabled { background: $gray-light-2; - color: $gray-light-4; + color: $gray-light-3; } } diff --git a/source/css/scss/objects/_comments.scss b/source/css/scss/objects/_comments.scss index c42fe91e8..ab443eb66 100644 --- a/source/css/scss/objects/_comments.scss +++ b/source/css/scss/objects/_comments.scss @@ -21,7 +21,7 @@ } .comment-name { - font-size: $font-size-sm; + font-size: $font-size-small; } .comment-text { diff --git a/source/css/scss/objects/_text.scss b/source/css/scss/objects/_text.scss index f323cdd6a..a7c89dd0b 100644 --- a/source/css/scss/objects/_text.scss +++ b/source/css/scss/objects/_text.scss @@ -1,11 +1,6 @@ -/* Global Font Classes */ -.font-secondary { - font-family: $font-secondary; -} - //Intro text .intro { - font-size: $font-size-slightly-larger; + font-size: $font-size-med-2; font-weight: bold; } @@ -15,7 +10,7 @@ font-size: $font-size-large; } -//Text Passages +//Passages of text .text { a { text-decoration: underline; @@ -39,39 +34,3 @@ } } } - -/* 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; - } -} diff --git a/source/css/style.css b/source/css/style.css index 8ee193ced..d3f936674 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -116,15 +116,15 @@ header, footer, nav, section, article, hgroup, figure { /* Floats */ .right { float: right; - padding: 0 0 1rem 1rem; } + padding: 0 0 1em 1em; } .right-search { float: right; - padding: 0 0 1rem 0; } + padding: 0 0 1em 0; } .left { float: left; - padding: 0 1rem 1rem 0; } + padding: 0 1em 1em 0; } /* Text-Align */ .align-right { @@ -155,6 +155,15 @@ header, footer, nav, section, article, hgroup, figure { .error { color: red; } +.warning { + color: #fff664; } + +.info { + color: #a2dfdd; } + +.font-secondary { + font-family: Georgia, Times, "Times New Roman", serif; } + body { background: white; font: 100%/1.5 "HelveticaNeue", "Helvetica", "Arial", sans-serif; @@ -187,22 +196,22 @@ h3, .gamma { /* Text-Related Elements */ p { - margin-bottom: 1rem; } + margin-bottom: 1em; } /* Blockquote */ blockquote { font-style: italic; border-left: 1px solid gray; color: gray; - padding-left: 1rem; - margin-bottom: 1rem; } + padding-left: 1em; + margin-bottom: 1em; } /* Horizontal Rule */ hr { border: 0; height: 2px; background: #eeeeee; - margin: 2rem 0; } + margin: 2em 0; } abbr { border-bottom: 1px dotted gray; @@ -216,7 +225,7 @@ ol, ul { /* Definition Lists */ dl { overflow: hidden; - margin: 0 0 1rem; } + margin: 0 0 1em; } dt { font-weight: bold; } @@ -233,12 +242,12 @@ img, video, object { height: auto; } iframe { - margin-bottom: 1rem; } + margin-bottom: 1em; } figure { - margin-bottom: 1rem; } + margin-bottom: 1em; } figure img { - margin-bottom: 0.25rem; } + margin-bottom: 0.5em; } figcaption { font-style: italic; } @@ -246,9 +255,6 @@ figcaption { /*------------------------------------*\ $FORMS \*------------------------------------*/ -form > div { - margin-bottom: 1rem; } - form ol, form ul { list-style: none; margin-left: 0; } @@ -260,23 +266,23 @@ fieldset { label { display: block; - padding-bottom: 0.25rem; } + padding-bottom: 0.5em; } button, input, select, textarea { font-family: inherit; font-size: 100%; - margin: 0; } + margin: 0 1px 0; } input, textarea { width: 100%; border: 1px solid gray; - padding: 0.5rem 0.65rem; } + padding: 0.5em 0.65rem; } input[type=text], input[type=search], input[type=url], input[type=number], textarea { -webkit-appearance: none; } button, input[type="submit"] { - padding: 0.5rem; + padding: 0.5em; background: #333333; border: 1px solid gray; cursor: pointer; } @@ -295,7 +301,7 @@ input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } .field-container { - margin-bottom: 1rem; } + margin-bottom: 1em; } .inline-form fieldset, .inline-form .inline-container { position: relative; } @@ -389,9 +395,9 @@ td { \*------------------------------------*/ /* Layout Container */ .lc, .header, [role=main] { - max-width: 72rem; + max-width: 72em; margin: 0 auto; - padding: 0.5rem; } + padding: 0.5em; } /*------------------------------------*\ $TEMPLATES @@ -401,7 +407,7 @@ td { .l-two-col .l-main { float: left; width: 70%; - padding-right: 1rem; } } + padding-right: 1em; } } @media all and (max-width: 50em) { .l-two-col .l-sidebar { clear: both; } } @@ -409,7 +415,7 @@ td { .l-two-col .l-sidebar { float: left; width: 30%; - padding: 0 0 0 1rem; } } + padding: 0 0 0 1em; } } /*------------------------------------*\ $GRIDS @@ -417,11 +423,11 @@ td { /* Grid Container */ .g { overflow: hidden; - margin: 0 -0.5rem; } + margin: 0 -0.5em; } /* Grid Item */ .gi { - padding: 0.5rem; } + padding: 0.5em; } .gi img { display: block; } @media all and (min-width: 46.8em) { @@ -596,7 +602,7 @@ td { max-height: 0; } .nav a { display: block; - padding: 1rem; + padding: 1em; border-top: 1px solid #eeeeee; } .nav.active { max-height: 40em; } @@ -618,13 +624,13 @@ td { .pagination li:last-child { border: 0; } .pagination a { - padding: 1rem; } + padding: 1em; } /*------------------------------------*\ $MAIN CONTENT AREA \*------------------------------------*/ [role=main] { - padding: 0.5rem 0.5rem 2rem; + padding: 0.5em 0.5em 2em; overflow: hidden; } /*------------------------------------*\ @@ -637,12 +643,12 @@ td { color: white; line-height: 1.2; } .footer .lc, .footer .header, .footer [role=main] { - padding: 1rem 1rem 0; } + padding: 1em 1em 0; } .footer a { color: #f9f9f9; } .nav-footer { - margin: -1rem -1rem 1rem; } + margin: -1em -1em 1em; } .nav-footer li { border-bottom: 1px solid #333333; } @media all and (min-width: 46.8em) { @@ -651,7 +657,7 @@ td { float: left; } } .nav-footer a { display: block; - padding: 1rem; } + padding: 1em; } @media all and (min-width: 46.8em) { .copyright { @@ -660,10 +666,6 @@ td { /*------------------------------------*\ $TEXT Styles \*------------------------------------*/ -/* Global Font Classes */ -.font-secondary { - font-family: Georgia, Times, "Times New Roman", serif; } - .intro { font-size: 1.0625em; font-weight: bold; } @@ -676,44 +678,15 @@ td { text-decoration: underline; } .text ul { list-style: disc; - margin: 0 0 1rem 1.2em; } + margin: 0 0 1em 1.2em; } .text ul ul { margin-bottom: 0; } .text ol { list-style: decimal; - margin: 0 0 1rem 1.2em; } + margin: 0 0 1em 1.5em; } .text ol 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: #333333; - color: white; - padding: 0.2em; - display: inline-block; - margin-bottom: 0.5rem; } - -.eyebrow-image { - position: relative; } - .eyebrow-image img { - position: relative; - z-index: 0; } - .eyebrow-image .eyebrow { - position: absolute; - top: 0; - left: 0; - z-index: 1; } - /*------------------------------------*\ $COMPONENTS \*------------------------------------*/ @@ -822,14 +795,14 @@ td { .icon-play-box { display: block; - margin-left: 2rem; } + margin-left: 2em; } .icon-play-box:before { - padding: 0.25rem; + padding: 0.25em; background: gray; color: white; margin-left: -1.7rem; - margin-right: 0.5rem; } + margin-right: 0.5em; } /*------------------------------------*\ $BUTTONS @@ -840,20 +813,20 @@ td { color: white; line-height: 1; font-weight: bold; - padding: 1rem; + padding: 1em; border: 0; text-align: center; } .btn:hover, .btn:focus { color: white; } .btn.disabled { background: #eeeeee; - color: #bbbbbb; } + color: #dddddd; } .btn-small { - padding: 0.5rem; } + padding: 0.5em; } .btn-large { - padding: 0.5rem; + padding: 0.5em; text-transform: uppercase; background: gray; font-size: 1.4rem; @@ -865,7 +838,7 @@ td { /* Generic Placeholder Brick: REMOVE FOR PRODUCTION */ .brick { background: #dcdddc; - padding: 2rem; + padding: 2em; text-align: center; font-weight: bold; border-bottom: 1px solid #eeeeee; } @@ -881,7 +854,7 @@ td { /* Hero Block */ .block-hero { - margin-bottom: 0.5rem; } + margin-bottom: 0.5em; } .block-hero .b-thumb img { display: block; } @media all and (min-width: 50em) { @@ -894,7 +867,7 @@ td { width: 100%; background: rgba(0, 0, 0, 0.5); color: white; - padding: 1.5rem; } } + padding: 1.5em; } } /* Block Thumbnail with Headline */ .block-thumb { @@ -919,12 +892,12 @@ td { .block-thumb .b-text { display: table-cell; width: 70%; - padding: 0 1rem; } } + padding: 0 1em; } } /* Block Headline Summary */ .block-headline-summary a { display: block; - padding: 0.5rem; } + padding: 0.5em; } /* Block Inset */ .block-inset { @@ -937,7 +910,7 @@ td { /* Hero Block */ .block-inset { - margin-bottom: 0.5rem; + margin-bottom: 0.5em; position: relative; } .block-inset .headline { font-size: 1.1em; } @@ -948,7 +921,7 @@ td { width: 100%; background: rgba(0, 0, 0, 0.5); color: white; - padding: 0.5rem; } + padding: 0.5em; } /* Block Thumb with Summary */ .block-thumb-summary .b-thumb { @@ -956,31 +929,31 @@ td { width: 50%; } .block-thumb-summary .b-text { margin-left: 50%; - padding: 0.5rem; } + padding: 0.5em; } .inline-list li { display: inline-block; } /* Social List */ .social-list li { - margin: 0 0.4rem 1rem 0; } + margin: 0 0.4rem 1em 0; } .social-list a { font-size: 1.6em; } /* Headline List */ .headline-list { - margin-bottom: 1rem; } + margin-bottom: 1em; } .headline-list.flush { margin: 0; } .headline-list h4 { font-weight: normal; } .headline-list li { - padding: 0.25rem 0; + padding: 0.25em 0; border-top: 1px solid #dddddd; } /* Post List */ .post-list li { - margin-bottom: 1rem; } + margin-bottom: 1em; } /* Bullet List */ .bullet-list { @@ -988,14 +961,14 @@ td { margin: 0 0 1em 1.2em; line-height: 1.3; } .bullet-list li { - margin-bottom: 1rem; } + margin-bottom: 1em; } /* Text List */ .text-list { margin: 0 0 1em; line-height: 1.3; } .text-list li { - margin-bottom: 1rem; } + margin-bottom: 1em; } .tooltip-container { display: inline-block; @@ -1012,7 +985,7 @@ td { top: 1.5em; left: 0; width: 18em; - padding: 1rem; + padding: 1em; background: white; border: 1px solid gray; box-shadow: 0.3em 0.3em 1em 0 rgba(0, 0, 0, 0.2); } @@ -1029,7 +1002,7 @@ td { width: 30em; } } .accordion { - margin-bottom: 1rem; } + margin-bottom: 1em; } .acc-handle { background: #131313; @@ -1038,7 +1011,7 @@ td { font-weight: bold; display: block; position: relative; - padding: 0.5rem; + padding: 0.5em; border-bottom: 1px solid #dddddd; } .acc-handle:after { content: "+"; @@ -1064,7 +1037,7 @@ td { border-right: 0; } .tabs a { display: block; - padding: 0.5rem; + padding: 0.5em; background: gray; } .tabs a:hover, .tabs a:focus { background: #dddddd; } @@ -1073,10 +1046,10 @@ td { color: white; } .section { - margin: 0 0 1rem; } + margin: 0 0 1em; } .section-title { - margin-bottom: 0.5rem; } + margin-bottom: 0.5em; } .article-header h1 { font-size: 2.5em; } @@ -1084,39 +1057,28 @@ td { .byline { font-size: 0.875em; font-style: italic; - margin-bottom: 0.5rem; } - -/* Wordpress Caption */ -.wp-caption-text { - font-style: italic; } - -.review-summary .grade { - width: 4.5em; - float: left; - margin: 0 0.5rem 0 0; } -.review-summary .summary-text { - margin-left: 5em; } + margin-bottom: 0.5em; } .social-share { overflow: hidden; - margin-bottom: 1rem; } + margin-bottom: 1em; } .social-share li { float: left; - margin-right: 0.25rem; } + margin-right: 0.5em; } .social-share a { background: #333333; color: white; display: block; - padding: 0.5rem; } + padding: 0.5em; } .social-share a:hover { background: gray; } .comments li { - margin-bottom: 1rem; } + margin-bottom: 1em; } .comment-container { overflow: hidden; - margin-bottom: 1rem; } + margin-bottom: 1em; } .comment-meta { float: left; @@ -1124,7 +1086,7 @@ td { .comment-meta img { display: block; border: 1px solid #eeeeee; - margin-bottom: 0.5rem; } + margin-bottom: 0.5em; } .comment-name { font-size: 0.75em; } From 694c91dc22470a8a0dc6af972fa826c85e9f6023 Mon Sep 17 00:00:00 2001 From: Brad Frost Date: Thu, 28 Nov 2013 17:31:17 -0500 Subject: [PATCH 015/576] Styleguide.css cleanup. Firefox sg-control style bug fixed. --- public/styleguide/css/styleguide.css | 158 ++++++++-------- public/styleguide/css/styleguide.scss | 208 ++++++++++------------ source/css/scss/base/_global-classes.scss | 4 +- source/css/scss/generic/_variables.scss | 2 +- source/css/scss/objects/_buttons.scss | 3 +- source/css/scss/objects/_comments.scss | 1 + source/css/scss/objects/_footer.scss | 11 +- source/css/scss/objects/_text.scss | 5 + source/css/style.css | 15 +- 9 files changed, 190 insertions(+), 217 deletions(-) diff --git a/public/styleguide/css/styleguide.css b/public/styleguide/css/styleguide.css index 40ec4a27f..f8909dfd1 100644 --- a/public/styleguide/css/styleguide.css +++ b/public/styleguide/css/styleguide.css @@ -1,9 +1,9 @@ /*------------------------------------*\ - $STYLE GUIDE CONTAINER STYLES + $PATTERN LAB STYLES \*------------------------------------*/ /** - * NOTE: These styles are specific to the style guide container and should not be modified. - * Use style.scss for all content styles that don't pertain to the style guide container. + * 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 */ @@ -18,14 +18,13 @@ * -----Defaults * -----Breakpoints * MIXINS---------------------------------Sass mixins - * RESET----------------------------------Set reset defaults * GLOBAL ELEMENTS------------------------Establish global styles * -----Main * -----Headings * -----Text-related elements (p, blockquote, lists) * -----Defaults * -----Breakpoints - * STYLE GUIDE INTERFACE------------------CSS for the Style Guide Container. Should not influence the containing styles at all. + * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container. * -----Header * -----Navigation * -----Controls @@ -33,9 +32,10 @@ * -----Viewport * -----Section Headers * -----Code View + * -----Icon Fonts */ /*------------------------------------*\ - $STYLE GUIDE VARIABLES + $PATTERN LAB VARIABLES \*------------------------------------*/ /*Fonts*/ /* Style Guide Interface Colors */ @@ -44,10 +44,10 @@ /* Dimensions */ /* Breakpoints */ /*------------------------------------*\ - $STYLE GUIDE MIXINS + $PATTERN LAB MIXINS \*------------------------------------*/ /*------------------------------------*\ - $STYLE GUIDE INTERFACE + $PATTERN LAB INTERFACE \*------------------------------------*/ #patternlab-html, #patternlab-body { margin: 0; @@ -68,8 +68,16 @@ border: 0; 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; } + /*------------------------------------*\ - $STYLE GUIDE HEADER + $PATTERN LAB HEADER \*------------------------------------*/ /* Header */ .sg-header { @@ -208,25 +216,26 @@ min-width: 0; } .sg-controls .sg-nav-phases .sg-acc-panel.active { max-height: none; } + @media all and (min-width: 69.5em) { + .sg-controls { + width: 41.5em; } } .sg-control-trigger { border-bottom: 1px solid rgba(255, 255, 255, 0.05); } @media all and (min-width: 44em) { .sg-control-trigger { border: 0; } } - @media all and (min-width: 65em) { + @media all and (min-width: 69.5em) { .sg-control-trigger { float: left; width: 6em; } } -@media all and (min-width: 44em) { - .sg-control > li { - float: left; - border-bottom: 0; - border-left: 1px solid rgba(255, 255, 255, 0.05); } } - .sg-control > li { float: left; } + @media all and (min-width: 44em) { + .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; @@ -239,24 +248,6 @@ background: #f7f7f7; color: #000; } -@media all and (max-width: 65em) { - .sg-quarter { - float: left; - width: 25%; - border-left: 1px solid rgba(255, 255, 255, 0.05); - text-align: center; } - .sg-quarter:first-child { - border-left: 0; } } - -@media all and (max-width: 65em) { - .sg-half { - float: left; - width: 50%; - border-left: 1px solid rgba(255, 255, 255, 0.05); - text-align: center; } - .sg-half:nth-child(odd) { - border-left: 0; } } - .sg-current-size { font-size: 70%; color: gray; @@ -264,21 +255,20 @@ .sg-current-size:hover .sg-input { background: #f7f7f7; color: #000; } - @media all and (min-width: 65em) { + @media all and (min-width: 69.5em) { .sg-current-size { float: left; } } -.sg-size-options { - max-width: 10em; } - @media all and (min-width: 65em) { - .sg-size-options { - 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); } } +@media all and (min-width: 69.5em) { + .sg-size-options { + float: left; + position: static; + max-height: none; + max-width: none; } + .sg-size-options > li { + display: inline-block; + border: 0; + border-left: 1px solid rgba(255, 255, 255, 0.05); } } #sg-form { margin: 0; @@ -310,7 +300,7 @@ margin-right: 0.4em; } /*------------------------------------*\ - $STYLE GUIDE VIEWPORT + $PATTERN LAB VIEWPORT \*------------------------------------*/ /* Viewport */ #sg-vp-wrap { @@ -393,12 +383,11 @@ transition: width 0.8s ease-out; } /*------------------------------------*\ - $STYLE GUIDE CONTENT + $PATTERN LAB CONTENT \*------------------------------------*/ /* Section Pattern */ .sg-pattern { - margin-bottom: 2em; - overflow: hidden; } + margin-bottom: 2em; } /* Section Head */ .sg-pattern-head { @@ -420,39 +409,6 @@ .sg-clean .sg-main { padding: 0; } -.sg-code, .sg-annotations { - clear: both; - background: #dddddd; - color: #222222; - padding: 1em 0.5em; - margin: 1em 0; } - .sg-code a, .sg-annotations 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 rgba(0, 0, 0, 0.1); - 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: #f7f7f7; - position: relative; - top: -2px; } - -.sg-code-head { - color: gray; - font-size: 1em; } - .demo { overflow: hidden; margin-bottom: 1rem; } @@ -528,7 +484,6 @@ width: 100%; padding: 1em; } -/* Annotations */ #sg-annotation-container, #sg-code-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -572,6 +527,40 @@ .has-comment, .has-comment a { cursor: help !important; } +.sg-code, .sg-annotations { + clear: both; + background: #dddddd; + color: #222222; + padding: 1em 0.5em; + margin: 1em 0; } + .sg-code a, .sg-annotations 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 rgba(0, 0, 0, 0.1); + 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: #f7f7f7; + position: relative; + top: -2px; } + +.sg-code-head { + color: gray; + font-size: 1em; } + +/* Pattern Lab icon fonts */ @font-face { font-family: 'icons'; src: url("../assets/icons.eot"); @@ -579,7 +568,6 @@ font-weight: normal; font-style: normal; } -/* Pattern Lab icon fonts */ .icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .sg-header .sg-nav-toggle, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye { font-family: 'icons'; speak: none; diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss index 80178908c..71857392c 100644 --- a/public/styleguide/css/styleguide.scss +++ b/public/styleguide/css/styleguide.scss @@ -1,9 +1,9 @@ /*------------------------------------*\ - $STYLE GUIDE CONTAINER STYLES + $PATTERN LAB STYLES \*------------------------------------*/ /** - * NOTE: These styles are specific to the style guide container and should not be modified. - * Use style.scss for all content styles that don't pertain to the style guide container. + * 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 */ @@ -20,14 +20,13 @@ * -----Defaults * -----Breakpoints * MIXINS---------------------------------Sass mixins - * RESET----------------------------------Set reset defaults * GLOBAL ELEMENTS------------------------Establish global styles * -----Main * -----Headings * -----Text-related elements (p, blockquote, lists) * -----Defaults * -----Breakpoints - * STYLE GUIDE INTERFACE------------------CSS for the Style Guide Container. Should not influence the containing styles at all. + * STYLE GUIDE INTERFACE------------------CSS for the Pattern Lab Container. * -----Header * -----Navigation * -----Controls @@ -35,6 +34,7 @@ * -----Viewport * -----Section Headers * -----Code View + * -----Icon Fonts */ @@ -42,7 +42,7 @@ /*------------------------------------*\ - $STYLE GUIDE VARIABLES + $PATTERN LAB VARIABLES \*------------------------------------*/ /*Fonts*/ $sg-font : "HelveticaNeue", "Helvetica", "Arial", sans-serif; @@ -76,7 +76,7 @@ $offset-top: 2em; $sg-bp-small : 24em; $sg-bp-small-2 : 30em; $sg-bp-med : 44em; -$sg-bp-large : 65em; +$sg-bp-large : 69.5em; $sg-bp-xl : 80em; $animate-quick: 0.2s; @@ -86,7 +86,7 @@ $animate-quick: 0.2s; /*------------------------------------*\ - $STYLE GUIDE MIXINS + $PATTERN LAB MIXINS \*------------------------------------*/ @mixin sg-transition($transition-property, $transition-time, $method) { -webkit-transition: $transition-property $transition-time $method; @@ -102,7 +102,7 @@ $animate-quick: 0.2s; /*------------------------------------*\ - $STYLE GUIDE INTERFACE + $PATTERN LAB INTERFACE \*------------------------------------*/ #patternlab-html, #patternlab-body { @@ -128,10 +128,24 @@ $animate-quick: 0.2s; } +//Clearfix +.sg-cf { + *zoom: 1; + + &:before, &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + /*------------------------------------*\ - $STYLE GUIDE HEADER + $PATTERN LAB HEADER \*------------------------------------*/ /* Header */ .sg-header { @@ -187,10 +201,10 @@ $animate-quick: 0.2s; ol{ li{ //3rd level nav item - a { - padding-left: 2em; - text-transform: none; - } + a { + padding-left: 2em; + text-transform: none; + } } } } @@ -318,6 +332,10 @@ $animate-quick: 0.2s; max-height: none; } } + + @media all and (min-width: $sg-bp-large) { + width: 41.5em; + } } .sg-control-trigger { @@ -335,21 +353,13 @@ $animate-quick: 0.2s; .sg-control { > li { + float: left; + @media all and (min-width: $sg-bp-med) { - float: left; border-bottom: 0; border-left: 1px solid $sg-tint; } } -} - - - - -.sg-control { - > li { - float: left; - } .sg-input { padding: 0.1em; @@ -367,59 +377,33 @@ $animate-quick: 0.2s; } } -.sg-quarter { - @media all and (max-width: $sg-bp-large) { - float: left; - width: 25%; - border-left: 1px solid $sg-tint; - text-align: center; +.sg-current-size { + font-size: 70%; + color: $sg-secondary; + padding: 0.8em 0.95em; - &:first-child { - border-left: 0; + &:hover { + .sg-input { + background: $sg-quinary; + color: #000; } } -} -.sg-half { - @media all and (max-width: $sg-bp-large) { + @media all and (min-width: $sg-bp-large) { float: left; - width: 50%; - border-left: 1px solid $sg-tint; - text-align: center; - - &:nth-child(odd) { - border-left: 0; - } } } -.sg-current-size { - font-size: 70%; - color: $sg-secondary; - padding: 0.8em 0.95em; - - &:hover { - .sg-input { - background: $sg-quinary; - color: #000; - } - } - - @media all and (min-width: $sg-bp-large) { - float: left; - } - } - .sg-size-options { - max-width: 10em; @media all and (min-width: $sg-bp-large) { + float: left; position: static; max-height: none; max-width: none; > li { - float: left; + display: inline-block; border: 0; border-left: 1px solid $sg-tint; } @@ -473,7 +457,7 @@ $animate-quick: 0.2s; /*------------------------------------*\ - $STYLE GUIDE VIEWPORT + $PATTERN LAB VIEWPORT \*------------------------------------*/ /* Viewport */ @@ -580,13 +564,13 @@ $animate-quick: 0.2s; /*------------------------------------*\ - $STYLE GUIDE CONTENT + $PATTERN LAB CONTENT \*------------------------------------*/ /* Section Pattern */ .sg-pattern { margin-bottom: $sg-doublespace; - overflow: hidden; + @extend .sg-cf; } /* Section Head */ @@ -615,51 +599,6 @@ $animate-quick: 0.2s; padding: 0; } - -// Code View Blocks -.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; -} - // Demo to show grid system - in this stylesheet because it shouldn't be included in the production styles .demo { overflow: hidden; @@ -755,7 +694,7 @@ $animate-quick: 0.2s; line-height: 1; } -//Annotation +//Annotations and code view #sg-annotation-container { position: fixed; bottom: 0; @@ -766,7 +705,6 @@ $animate-quick: 0.2s; } -/* Annotations */ #sg-annotation-container, #sg-code-container { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; @@ -794,6 +732,7 @@ $animate-quick: 0.2s; } } +// Code #sg-code-container pre { max-height: 300px; padding: 0 1em; @@ -817,8 +756,51 @@ $animate-quick: 0.2s; cursor: help !important; } -// Icon Font +.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; +} + + +/* Pattern Lab icon fonts */ @font-face { font-family: 'icons'; src:url('../assets/icons.eot'); @@ -830,7 +812,7 @@ $animate-quick: 0.2s; font-style: normal; } -/* Pattern Lab icon fonts */ + .icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .icon-checkbox-checked, .icon-eye { font-family: 'icons'; speak: none; diff --git a/source/css/scss/base/_global-classes.scss b/source/css/scss/base/_global-classes.scss index 532e70367..2e13f8858 100644 --- a/source/css/scss/base/_global-classes.scss +++ b/source/css/scss/base/_global-classes.scss @@ -93,8 +93,8 @@ color: $warning; } -.info { - color: $info; +.information { + color: $information; } .font-secondary { diff --git a/source/css/scss/generic/_variables.scss b/source/css/scss/generic/_variables.scss index 29caf7e5a..3e7ccbcba 100644 --- a/source/css/scss/generic/_variables.scss +++ b/source/css/scss/generic/_variables.scss @@ -16,7 +16,7 @@ $dim : rgba(0,0,0,0.5); $error : #f00; $valid : #089e00; $warning : #fff664; -$info : #a2dfdd; +$information : #000db5; //Typography diff --git a/source/css/scss/objects/_buttons.scss b/source/css/scss/objects/_buttons.scss index 4b39a7f65..0ae2805e1 100644 --- a/source/css/scss/objects/_buttons.scss +++ b/source/css/scss/objects/_buttons.scss @@ -12,12 +12,13 @@ text-align: center; &:hover, &:focus { + background: $gray; color: $white; } &.disabled { background: $gray-light-2; - color: $gray-light-3; + color: $gray; } } diff --git a/source/css/scss/objects/_comments.scss b/source/css/scss/objects/_comments.scss index ab443eb66..9959b7abf 100644 --- a/source/css/scss/objects/_comments.scss +++ b/source/css/scss/objects/_comments.scss @@ -7,6 +7,7 @@ .comment-container { overflow: hidden; margin-bottom: $space; + list-style: none; } .comment-meta { diff --git a/source/css/scss/objects/_footer.scss b/source/css/scss/objects/_footer.scss index 884d584a3..850f94bf4 100644 --- a/source/css/scss/objects/_footer.scss +++ b/source/css/scss/objects/_footer.scss @@ -8,16 +8,9 @@ color: $white; line-height: 1.2; - .lc { - padding: $pad $pad 0; - } - - a { color: $gray-light; } - - } //Footer Nav @@ -41,6 +34,6 @@ .copyright { @media all and (min-width: $bp-med) { - float: right; - } + float: right; + } } \ No newline at end of file diff --git a/source/css/scss/objects/_text.scss b/source/css/scss/objects/_text.scss index a7c89dd0b..d645f5646 100644 --- a/source/css/scss/objects/_text.scss +++ b/source/css/scss/objects/_text.scss @@ -10,6 +10,11 @@ font-size: $font-size-large; } +//Caption +.caption { + font-style: italic; +} + //Passages of text .text { a { diff --git a/source/css/style.css b/source/css/style.css index d3f936674..9a53bf9b9 100644 --- a/source/css/style.css +++ b/source/css/style.css @@ -158,8 +158,8 @@ header, footer, nav, section, article, hgroup, figure { .warning { color: #fff664; } -.info { - color: #a2dfdd; } +.information { + color: #000db5; } .font-secondary { font-family: Georgia, Times, "Times New Roman", serif; } @@ -642,8 +642,6 @@ td { background: #131313; color: white; line-height: 1.2; } - .footer .lc, .footer .header, .footer [role=main] { - padding: 1em 1em 0; } .footer a { color: #f9f9f9; } @@ -674,6 +672,9 @@ td { font-family: Georgia, Times, "Times New Roman", serif; font-size: 1.4375em; } +.caption { + font-style: italic; } + .text a { text-decoration: underline; } .text ul { @@ -817,10 +818,11 @@ td { border: 0; text-align: center; } .btn:hover, .btn:focus { + background: gray; color: white; } .btn.disabled { background: #eeeeee; - color: #dddddd; } + color: gray; } .btn-small { padding: 0.5em; } @@ -1078,7 +1080,8 @@ td { .comment-container { overflow: hidden; - margin-bottom: 1em; } + margin-bottom: 1em; + list-style: none; } .comment-meta { float: left; From 3b708dcabe51538802116f09eaf699b2f1c44a56 Mon Sep 17 00:00:00 2001 From: Brad Frost Date: Thu, 28 Nov 2013 17:36:12 -0500 Subject: [PATCH 016/576] Styleguide.css style changes Menu toggle --- public/styleguide/css/styleguide.css | 10 ++++++---- public/styleguide/css/styleguide.scss | 6 ++++-- source/_patternlab-files/index.mustache | 2 +- 3 files changed, 11 insertions(+), 7 deletions(-) diff --git a/public/styleguide/css/styleguide.css b/public/styleguide/css/styleguide.css index f8909dfd1..ddf4ac8e4 100644 --- a/public/styleguide/css/styleguide.css +++ b/public/styleguide/css/styleguide.css @@ -128,13 +128,15 @@ text-transform: none; } /* Navigation */ -.sg-header .sg-nav-toggle { +.sg-nav-toggle { padding: 1em; + display: inline-block !important; border-bottom: 1px solid rgba(0, 0, 0, 0); position: relative; + text-transform: uppercase !important; z-index: 2; } @media all and (min-width: 44em) { - .sg-header .sg-nav-toggle { + .sg-nav-toggle { display: none; } } @media all and (max-width: 44em) { @@ -568,7 +570,7 @@ font-weight: normal; font-style: normal; } -.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .sg-header .sg-nav-toggle, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye { +.icon-reload, .icon-cog, .icon-minus, .icon-plus, .icon-menu, .icon-checkbox-unchecked, .sg-checkbox, .icon-checkbox-checked, .sg-checkbox.active, .icon-eye { font-family: 'icons'; speak: none; font-style: normal; @@ -590,7 +592,7 @@ .icon-plus:before { content: "\e004"; } -.icon-menu:before, .sg-header .sg-nav-toggle:before { +.icon-menu:before { content: "\e005"; } .icon-checkbox-unchecked:before, .sg-checkbox:before { diff --git a/public/styleguide/css/styleguide.scss b/public/styleguide/css/styleguide.scss index 71857392c..94a90565f 100644 --- a/public/styleguide/css/styleguide.scss +++ b/public/styleguide/css/styleguide.scss @@ -178,6 +178,7 @@ $animate-quick: 0.2s; list-style: none; border-bottom: 1px solid $sg-tint; } + a { font-size: $sg-font-size-sm; color: $sg-secondary; @@ -217,11 +218,12 @@ $animate-quick: 0.2s; /* Navigation */ -.sg-header .sg-nav-toggle { - @extend .icon-menu; +.sg-nav-toggle { padding: $sg-pad; + display: inline-block !important; border-bottom: 1px solid rgba(0,0,0,0); position: relative; + text-transform: uppercase !important; z-index: 2; @media all and (min-width: $sg-bp-med) { display: none; diff --git a/source/_patternlab-files/index.mustache b/source/_patternlab-files/index.mustache index f2bdce97a..5c3a407ac 100644 --- a/source/_patternlab-files/index.mustache +++ b/source/_patternlab-files/index.mustache @@ -12,7 +12,7 @@ >