🔖 Release v0.15.0

Merge branch 'release-v0.15.0' # Conflicts: # scss/components/_buttons.scss
wfp · Jan 20, 2017 · 36f1c00 · 36f1c00
2 parents 9f22391 + d471c74
commit 36f1c00
Show file tree

Hide file tree

Showing 14 changed files with 237 additions and 31 deletions.
diff --git a/docs/_config.yml b/docs/_config.yml
@@ -3,7 +3,7 @@ title: "WFP UI Guidelines"
 email: "[email protected]"
 description: ""
 url: "https://cdn.wfp.org" # WFP CDN
-version: "v0.14.0"
+version: "v0.15.0"
 quiet: true
 
 exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

diff --git a/docs/basics-5-getting-started.md b/docs/basics-5-getting-started.md
@@ -21,7 +21,7 @@ You can easily install _WFP UI_ using [Bower](http://bower.io/). Our Bower packa
 # Install the latest release
 $ bower install wfp-ui --save
 # Install any particular release
-$ bower install wfp-ui#0.7.0 --save
+$ bower install wfp-ui#{{ site.version }} --save
 {% endhighlight %}
 
 Now, add _WFP UI_ as a dependency to your main SCSS file:
@@ -63,3 +63,44 @@ You can also download any particular release of [WFP UI from GitHub](https://git
   <h2 class="title">Notice</h2>
   <p>The <i>WFP UI</i> is intended to be plug &amp; play, and integrate seamlessly with any front-end framework unobtrusively. Whether you use <i>BootStrap</i>, <i>Foundation</i>, <i>Skeleton</i>, or any other framework, you should easily be able to apply WFP UI styles to your projects.</p>
 </div>
+
+### Documentation
+WFP UI uses [Grunt](http://gruntjs.com) as standard compile assets, however you can use other task runners such as [Gulp](http://gulpjs.com).
+
+<div class="notice">
+  <h2 class="title">Notice</h2>
+  <p>WFP UI uses external Sass dependencies so it is necessary that the the dependencies are linked using the native Sass <code>includePaths</code> option.</p>
+</div>
+
+###### Gulp `includePaths` implementation:
+{% highlight javascript %}
+const SASS_INCLUDE_PATHS = [path.join(__dirname, 'bower_components/mathsass/dist')];
+gulp.task('sass', function() {
+  gulp.src([path.join(DIRS.css, 'main.scss')])
+    .pipe(echo())
+    .pipe(sass({
+      includePaths: SASS_INCLUDE_PATHS
+    }).on('error', sass.logError))
+    .pipe(sourcemaps.init())
+    .pipe(minifyCSS())
+    .pipe(rename({extname: '.min.css'}))
+    .pipe(sourcemaps.write())
+    .pipe(gulp.dest(DIRS.css));
+});
+{% endhighlight %}
+
+###### Grunt task `includePaths` implementation (default in `gruntfile.js`):
+{% highlight javascript %}
+sass: {
+  options: {
+    outputStyle: 'expanded',
+    sourceMap: true,
+    indentedSyntax: true,
+    sassDir: 'scss',
+    cssDir: 'dist/css',
+    includePaths: [
+      'bower_components/mathsass/dist'
+    ]
+  }
+}
+{% endhighlight %}
diff --git a/docs/component-0-grids.md → docs/component-0-grid.md b/docs/component-0-grids.md → docs/component-0-grid.md
@@ -1,7 +1,7 @@
 ---
 layout: page
-title: Grids
-permalink: /components/grids/
+title: Grid
+permalink: /components/grid/
 resource: true
 categories: Components
 ---

diff --git a/docs/component-0-header.md b/docs/component-0-header.md
@@ -37,8 +37,11 @@ If the vertical space is limited (i.e.: on smaller viewports), you can substitut
         <ul class="menu--group">
           <li class="menu--item"><a href="#" class="menu--link active">Who we are</a></li>
           <li class="menu--item"><a href="#" class="menu--link">Our work</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Where we work</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Get involved</a></li>
+          <div class="header--misc">
+            <div class="header--search">
+              <input type="search" class="header--input" placeholder="Search">
+            </div>
+          </div>
         </ul>
       </nav>
     </div>
@@ -60,8 +63,11 @@ If the vertical space is limited (i.e.: on smaller viewports), you can substitut
         <ul class="menu--group">
           <li class="menu--item"><a href="#" class="menu--link active">Who we are</a></li>
           <li class="menu--item"><a href="#" class="menu--link">Our work</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Where we work</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Get involved</a></li>
+          <div class="header--misc">
+            <div class="header--search">
+              <input type="search" class="header--input" placeholder="Search">
+            </div>
+          </div>
         </ul>
       </nav>
     </div>

diff --git a/docs/js/subnav.js b/docs/js/subnav.js
@@ -1,4 +1,4 @@
-/*!
+/** !
  * WFP.org Subnavigation Handler
  * Copyright 2016 WFP/MADBIT Co.
  */

diff --git a/docs/js/tools.js b/docs/js/tools.js
@@ -1,7 +1,8 @@
-/*!
+/** !
  * WFP.org Tools
  * Copyright 2016 WFP/MADBIT Co.
  */
+/* eslint-disable no-unused-vars */
 /**
  * forEach polyfil
  * @param {Array} array - an array of elements to process

diff --git a/readme.md b/readme.md
@@ -80,6 +80,24 @@ cd dist/docs
 sudo python -m SimpleHTTPServer 80
 ```
 
+## Drafting a new release
+1. Wrap up all major additions on `develop` branch and branch out to `release-vX.Y.Z`, depending on your release cycle.
+2. Bump version numbers inside following files:
+  - `/docs/_config.yml`
+  - `/scss/bootstrap-theme.scss`
+  - `/scss/wfpui.scss`
+  - `/scss/wfpui+grid.scss`
+  - `/scss/wfpui+grid.scss`
+3. Run `grunt test` and fix any errors that fail the build process.
+4. If you added or altered any assets, run `grunt dist-assets`.
+5. Run `grunt dist` to build all static project sources (mainly CSs & JS).
+6. Commit your changes and push to remote.
+7. Merge your release branch to `master` with a commit message `Release vX.Y.Z` (no `fast-forward`).
+8. Merge your release branch to `develop` using `fast-forward` strategy.
+9. Tag latest merge commit on `master` using a new version number.
+10. Push all changes to remote.
+11. Draft a new release on GitHub including a changelog.
+
 ## Authors & Contributors
 - [Matthew Morek](https://github.com/matthewmorek)
 - [James Home](https://github.com/jrah)

diff --git a/scss/bootstrap-theme.scss b/scss/bootstrap-theme.scss
@@ -1,5 +1,5 @@
 /*!
- * WFP UI Bootstrap Theme, v0.14.0
+ * WFP UI Bootstrap Theme, v0.15.0
  * Copyright 2016 WFP/MADBIT Co.
  * License: https://github.com/wfp/ui/blob/master/LICENSE
  */

diff --git a/scss/components/_buttons.scss b/scss/components/_buttons.scss
@@ -69,16 +69,69 @@ $color-gplus: #dc4e41;
     background-color: darken($primary, 12%);
 
     &:hover {
+      color: $white;
       background-color: darken($primary, 20%);
+      border-color: rbga($black, 0.25);
     }
 
     &.active,
     &:active,
     &.active:hover,
     &.active:active,
     &.active:focus {
-      background-color: darken($blue-darker, 15%);
-      border-color: darken($blue-darker, 15%);
+      background-color: darken($primary, 20%);
+      border-color: darken($primary, 25%);
+      color: $white;
+    }
+
+  } @else if $type == hollow {
+    color: $white;
+    background-color: transparent;
+    border: 2px solid $white;
+    box-shadow: none;
+    transition: 0.125s ease-in box-shadow,
+                0.125s ease-in background,
+                0.125s ease-in color;
+
+    &:hover {
+      color: darken($primary, 12%);
+      background-color: $white;
+      border-color: $white;
+      box-shadow: 0 1px 6px 0 rgba($black, 0.4);
+    }
+
+    &.active,
+    &:active,
+    &.active:hover,
+    &.active:active,
+    &.active:focus {
+      color: $white;
+      background-color: darken($primary, 12%);
+    }
+
+  } @else if $type == reverse {
+    color: darken($primary, 12%);
+    background-color: $white;
+    border: 2px solid $white;
+    transition: 0.125s ease-in box-shadow,
+                0.125s ease-in background,
+                0.125s ease-in color;
+
+    &:hover {
+      color: darken($primary, 25%);
+      background-color: $blue-lightest;
+      border-color: $blue-lightest;
+      box-shadow: 0 1px 6px 0 rgba($black, 0.4);
+    }
+
+    &.active,
+    &:active,
+    &.active:hover,
+    &.active:active,
+    &.active:focus {
+      color: darken($primary, 20%);
+      background-color: $white;
+      border: 2px solid $white;
     }
 
   } @else if $type == negative {
@@ -178,6 +231,12 @@ $color-gplus: #dc4e41;
   }
 }
 
+a {
+  &.wfp-btn {
+    @include button;
+  }
+}
+
 .wfp-btn {
   @include button;
 }
@@ -186,32 +245,100 @@ $color-gplus: #dc4e41;
   @include button(primary);
 }
 
+a {
+  &.wfp-btn--primary {
+    @include button(primary);
+  }
+}
+
+.wfp-btn--hollow {
+  @include button(hollow);
+}
+
+a {
+  &.wfp-btn--hollow {
+    @include button(hollow);
+  }
+}
+
+.wfp-btn--reverse {
+  @include button(reverse);
+}
+
+a {
+  &.wfp-btn--reverse {
+    @include button(reverse);
+  }
+}
+
 .wfp-btn--negative {
   @include button(negative);
 }
 
+a {
+  &.wfp-btn--negative {
+    @include button(negative);
+  }
+}
+
 .wfp-btn--positive {
   @include button(positive);
 }
 
+a {
+  &.wfp-btn--positive {
+    @include button(positive);
+  }
+}
+
 .wfp-btn--warning {
   @include button(warning);
 }
 
+a {
+  &.wfp-btn--warning {
+    @include button(warning);
+  }
+}
+
 // Social buttons
 .wfp-btn--twitter {
   @include button(social, $color-twitter);
 }
 
+a {
+  &.wfp-btn--twitter {
+    @include button(social, $color-twitter);
+  }
+}
+
 .wfp-btn--facebook {
   @include button(social, $color-facebook);
 }
 
+a {
+  &.wfp-btn--facebook {
+    @include button(social, $color-facebook);
+  }
+}
+
 .wfp-btn--gplus {
   @include button(social, $color-gplus);
 }
 
+a {
+  &.wfp-btn--gplus {
+    @include button(social, $color-gplus);
+  }
+}
+
 // Header buttons
 .wfp-btn--head {
   @include button(head);
 }
+
+a {
+  .wfp-btn--head {
+    @include button(head);
+  }
+}
diff --git a/scss/css/_base.scss b/scss/css/_base.scss
@@ -36,10 +36,6 @@ body {
   line-height: 1.500;
   background-color: $background-color;
   color: $text-color;
-
-  @include media-query($xl-screen) {
-    font-size: $base-font-size * 1.125;
-  };
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -49,27 +45,42 @@ h1, h2, h3, h4, h5, h6 {
 }
 
 h1 {
-  @include h1;
+  @include font-size(3);
+  @include tracking(tight);
+  @include lh-scale(0.66);
+  @include margin(0.5rem 0);
 }
 
 h2 {
-  @include h2;
+  @include margin(0.25rem 0);
+  @include lh-scale(0.875);
+  @include font-size(2.5);
+  letter-spacing: -0.025rem;
 }
 
 h3 {
-  @include h3;
+  @include margin(0.25rem 0);
+  @include lh-scale(0.875);
+  @include font-size(2.25);
+  letter-spacing: -0.025rem;
 }
 
 h4 {
-  @include h4;
+  @include font-size(2);
+  @include lh-scale(0.875);
+  @include margin(0.25rem 0);
 }
 
 h5 {
-  @include h5;
+  @include font-size(1.75);
+  @include lh-body;
+  @include margin(0.25rem 0);
 }
 
 h6 {
-  @include h6;
+  @include font-size(1.5);
+  @include lh-body;
+  @include margin(0.25rem 0);
 }
 
 // Fluid image to fit a lfuid parent container while maintaining aspect ratio