Merge branch 'develop'

# Conflicts: # .gitignore # _jekyll/_layouts/default.html
canonical · Feb 8, 2017 · 603247e · 603247e
2 parents 4438bc4 + 3b6d908
commit 603247e
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 131 deletions.
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,5 @@ node_modules/
 demo.html
 /.firebaserc
 /firebase.json
-/docs/css
 /Gemfile.lock
 /_jekyll/_site/
diff --git a/.travis.yml b/.travis.yml
@@ -1,19 +1,23 @@
 language: node_js
 node_js:
   - "6.6.0"
+before_install:
+  - rvm install 2.2.5
+install:
+  - gem install jekyll
+  - gem install percy-cli
+  - npm install
 before_script:
-  - npm i
   - node_modules/gulp/bin/gulp.js build
 script:
+  - jekyll build
   - node_modules/gulp/bin/gulp.js test
+  - percy snapshot --widths "375,768,1280" _jekyll/_site/ --baseurl "/vanilla-framework"
 notifications:
   irc:
     channels:
       - "chat.freenode.net#vanilla-framework"
       - "chat.freenode.net#canonical-webteam"
     on_success: change
     on_failure: always
-  webhooks:
-    urls:
-      - "https://webhooks.gitter.im/e/9898d67dfc1dd39f9cb2"
     on_success: change
diff --git a/docs/patterns/_matrix.md b/docs/patterns/_matrix.md
@@ -3,94 +3,96 @@ collection: patterns
 title: Matrix
 ---
 
+Matrix items will display in one column on small screens. At resolutions above `$breakpoint-medium`, the matrix switches to three items per row.
+
 <ul class="p-matrix u-clearfix">
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
 </ul>
 
 ```html
 <ul class="p-matrix u-clearfix">
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
-    <li class="p-matrix__item">
-        <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
-        <div class="p-matrix__content">
-            <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
-            <p class="p-matrix__desc">Short description</p>
-        </div>
-    </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
+  <li class="p-matrix__item">
+    <img class="p-matrix__img" src="http://placehold.it/60x60" alt="icon">
+    <div class="p-matrix__content">
+      <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Title</a></h3>
+      <p class="p-matrix__desc">Short description</p>
+    </div>
+  </li>
 </ul>
 ```
diff --git a/docs/utilities/_text-align.md → docs/utilities/_align.md b/docs/utilities/_text-align.md → docs/utilities/_align.md
@@ -1,9 +1,9 @@
 ---
 collection: utilities
-title: Text align
+title: Align
 ---
 
-You can use these utilities to force the text inside an element to align center, left or right.
+You can use these utilities to force the content inside an element to align center, left or right.
 
 ## Center
 

diff --git a/gulp/styles.js b/gulp/styles.js
@@ -28,7 +28,6 @@ gulp.task('sass:develop', function() {
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
     .pipe(sourcemaps.write('maps/'))
     .pipe(gulp.dest('build/css/'))
-    .pipe(gulp.dest('jekyll/css/'));
 });
 
 // Build Sass for production
@@ -41,6 +40,7 @@ gulp.task('sass:build', function() {
       onError: throwSassError
     }))
     .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1'))
+    .pipe(gulp.dest('build/css/'))
     .pipe(cssnano())
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest('build/css/'));

diff --git a/scss/_patterns_lists.scss b/scss/_patterns_lists.scss
@@ -3,7 +3,6 @@
   @include vf-p-list;
   @include vf-p-list-divided;
   @include vf-p-list-item-state;
-  @include vf-p-combined-list;
   @include vf-p-inline-list;
   @include vf-p-inline-list-middot;
   @include vf-p-stepped-list;
@@ -54,44 +53,6 @@
   }
 }
 
-// Displays split as one on small screens
-@mixin vf-p-combined-list {
-  .combined-list {
-    ul,
-    div {
-      margin-bottom: 0;
-    }
-
-    .last-item {
-      border-bottom: 1px dotted $color-mid-light;
-      padding-bottom: 10px;
-    }
-
-    .last-col {
-      margin-bottom: 20px;
-
-      .last-item {
-        border-bottom: 0;
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  @media only screen and (min-width: $breakpoint-medium) {
-    .combined-list {
-      ul,
-      div {
-        margin-bottom: 1.25rem;
-      }
-
-      .last-item {
-        border-bottom: 0;
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-
 // Displays a list inline with spacing
 @mixin vf-p-inline-list {
   .p-inline-list {