Merge pull request #30 from bixgomez/28--sass-partials-uswds-typography

28  sass partials uswds typography

.gitignore

@@ -1 +1,2 @@
 design-library/node_modules
+.idea

design-library/.gitignore

@@ -3,3 +3,4 @@ export/*
 public/*
 source/styleguide/*
 vendor/*
+debug.log

design-library/gulpfile.js

@@ -7,9 +7,12 @@ var concat = require('gulp-concat');
 var minify = require('gulp-minify-css');
 var merge = require('merge-stream');
 var shell = require('gulp-shell');
+var sassGlob = require('gulp-sass-glob');
 
 // Directories for storing sass and css files
-var sassFiles = ['source/_patterns/**/*.scss','source/scss/*.scss'];
+// var sassFiles = ['source/_patterns/**/*.scss','source/scss/scss.scss'];
+var sassFiles = ['source/**/*.scss'];
+
 var cssDir    = 'source/css';
 var jsDir     = 'source/js/*.js';
 
@@ -39,6 +42,7 @@ gulp.task('sass', function() {
     return gulp.src(sassFiles)
     // Initialize sourcemaps
         //.pipe(sourcemaps.init())
+        .pipe(sassGlob())
         // Run Sass
         .pipe(sass({
             outputStyle: 'compressed',

design-library/package.json

@@ -19,13 +19,14 @@
   "devDependencies": {
     "breakpoint-sass": "^2.7.1",
     "gulp-autoprefixer": "^3.1.1",
+    "gulp-concat": "^2.6.0",
     "gulp-eslint": "^3.0.1",
+    "gulp-minify-css": "^1.2.1",
     "gulp-sass": "^3.0.0",
+    "gulp-sass-glob": "^1.0.8",
     "gulp-sass-lint": "^1.3.2",
-    "gulp-sourcemaps": "^1.9.1",
-    "gulp-concat": "^2.6.0",
-    "gulp-minify-css": "^1.2.1",
     "gulp-shell": "^0.6.3",
+    "gulp-sourcemaps": "^1.9.1",
     "merge-stream": "^1.0.0",
     "susy": "^2.2.12",
     "typey": "^1.1.1"

design-library/source/_patterns/01-atoms/01-list-title/_list-title.scss

@@ -0,0 +1,9 @@
+h3.list-title {
+  font-size: 2em;
+  a {
+    color: black;
+    &:hover {
+      color: $link-color--hover;
+    }
+  }
+}

design-library/source/_patterns/01-atoms/02-list-body/list-body.scss → design-library/source/_patterns/01-atoms/02-list-body/_list-body.scss

@@ -1,6 +1,6 @@
 div.list-body {
-  font-size: 18px;
-  margin-bottom: 40px;
+  font-size: 1.125em;
+  margin-bottom: 2em;
 
   a {
     font-weight: bold;

design-library/source/_patterns/01-atoms/03-list-image/list-image.json

@@ -1,3 +1,3 @@
 {
-  "image_url": "http://nerdstein.net/sites/default/files/nerdstein_11.png"
+  "image_url": "/images/dog-cello.jpg"
 }

design-library/source/_patterns/01-atoms/03-list-image/list-image.twig

@@ -1 +1,3 @@
-<img src="{{ image_url }}" class="list-image" />
+<div class="list-image--wrapper">
+    <img src="{{ image_url }}" class="list-image" />
+</div>

design-library/source/_patterns/01-atoms/04-blog-tag/_blog-tag.scss

@@ -0,0 +1,3 @@
+.highlight-title {
+  @include button-profile;
+}

design-library/source/_patterns/01-atoms/05-list-posted-on/_list-posted-on.scss

@@ -0,0 +1,5 @@
+.posted-on {
+  color: $medium-gray;
+  margin: 0 0 1em 0;
+  line-height: 1;
+}

design-library/source/_patterns/01-atoms/06-section-heading/_section-heading.scss

@@ -0,0 +1,3 @@
+.section-heading {
+  @include button-profile;
+}

design-library/source/_patterns/01-atoms/07-section-content/section-content.scss → design-library/source/_patterns/01-atoms/07-section-content/_section-content.scss

@@ -1,6 +1,6 @@
 .section-content {
   background-color: #fff;
-  border: 2px solid #EDEDED;
+  border: 2px solid $light-gray;
   margin-bottom: 30px;
   font-size: 16px;
   .ul {

design-library/source/_patterns/02-molecules/01-blog-tags/_blog-tags.scss

@@ -0,0 +1,4 @@
+.blog-tags {
+  border-bottom: 1px solid $light-gray;
+  margin-bottom: 1.5em;
+}

design-library/source/_patterns/02-molecules/02-list-element/list-element.scss → design-library/source/_patterns/02-molecules/02-list-element/_list-element.scss

@@ -3,12 +3,18 @@
   margin-bottom: 15px;
 
   .list-element-body {
+    display: block;
     .list-element-image {
       float: left;
       clear: left;
       margin: 15px;
       margin-left: 0px;
       margin-top: 0px;
     }
+    &:after {
+      content:" ";
+      display:block;
+      clear:both;
+    }
   }
 }

design-library/source/_patterns/02-molecules/02-list-element/list-element.json

@@ -8,6 +8,9 @@
     },
     "2": {
       "tag_name": "Drupal"
+    },
+    "3": {
+      "tag_name": "Cats"
     }
   },
   "posted_date": "January 5, 2017"

design-library/source/_patterns/02-molecules/02-list-element/list-element~1-image.json

@@ -1,7 +1,7 @@
 {
   "title": "The category manager enforces our risk appetites.",
-  "link_url": "http://nerdstein.net",
-  "image_url": "http://nerdstein.net/sites/default/files/nerdstein_11.png",
+  "link_url": "http://thecatapi.com/",
+  "image_url": "/images/dog-cello.jpg",
   "body": "The preemptive commitment leads to an agile feedback, while the game changer connects the dots to the end game. Our under-the-radar business platforms energize the market thinker.",
   "tag_list": [ ],
   "posted_date": "February 10, 2017"

design-library/source/_patterns/03-organisms/01-blog-list/blog-list.json

@@ -26,7 +26,7 @@
           "tag_name": "DevOps"
         }
       },
-      "image_url": "http://nerdstein.net/sites/default/files/nerdstein_11.png",
+      "image_url": "/images/dog-cello.jpg",
       "posted_date": "March 19, 2017"
     },
     "3": {

design-library/source/_patterns/04-pages/01-sidebar/sidebar.twig

@@ -37,7 +37,7 @@
     "tag_name": "DevOps"
     }
     },
-    "image_url": "http://nerdstein.net/sites/default/files/nerdstein_11.png",
+    "image_url": "/images/dog-cello.jpg",
     "posted_date": "March 19, 2017"
     },
     "3": {

design-library/source/scss/base/_basics.scss

@@ -0,0 +1,49 @@
+html {
+  font-size: 16px;
+}
+
+body {
+  @include font-profile--base;
+  overflow-x: hidden; /* Prevent scroll on narrow devices */
+  background-color: #fff;
+  color: $base-font-color;
+}
+
+a {
+  color: $link-color;
+  text-decoration: none;
+
+  &:hover {
+    color: $link-color--hover;
+    text-decoration: underline;
+  }
+
+  &:visited {
+    text-decoration: none;
+  }
+}
+
+h1, h2, h3, h4 {
+  @include font-profile--heading;
+  padding: 0;
+  line-height: 1.2;
+  margin: 0 0 .5em 0;
+}
+
+h1 {
+  font-size: 2em;
+}
+
+h2 {
+  font-size: 1.67em;
+}
+
+h3 {
+  font-size: 1.33em;
+}
+
+h4 {
+  font-size: 1em;
+}
+
+

design-library/source/scss/base/_variables.scss

@@ -0,0 +1,44 @@
+
+$base-font-family: "PT Sans", "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
+$heading-font-family: $base-font-family;
+
+$base-font-color: #4c4c4c;
+
+$key-color-1--base: #ed6300;
+$key-color-1--lighter: lighten($key-color-1--base, 30%);
+$key-color-1--darker: darken($key-color-1--base, 30%);
+
+$key-color-2--base: #0fa620;
+$key-color-2--lighter: lighten($key-color-2--base, 30%);
+$key-color-2--darker: darken($key-color-2--base, 30%);
+
+$link-color: $key-color-1--base;
+$link-color--hover: $key-color-2--base;
+
+$light-gray: #EDEDED;
+$medium-gray: rgb(150, 150, 150);
+
+@mixin font-profile--base {
+  font-family: $base-font-family;
+  font-size: 1em;
+  line-height: 1.5;
+  font-weight: normal;
+}
+
+@mixin font-profile--heading {
+  font-family: $heading-font-family;
+  line-height: 1.3;
+  font-weight: bold;
+}
+
+@mixin button-profile {
+  @include font-profile--heading;
+  display: inline-block;
+  line-height: 1;
+  color: #fff;
+  background-color: $link-color;
+  padding: .5em .75em;
+  &:hover {
+    background-color: $link-color--hover;
+  }
+}

design-library/source/scss/base/base.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'basics';

design-library/source/scss/scss.scss

@@ -0,0 +1,2 @@
+@import 'base/base';
+@import '../_patterns/**/*.scss';

html/.gitkeep

@@ -1 +1 @@
-Holding file for public/ directory
+After you generate Pattern Lab for the first time your source files will be placed here.