Merge pull request #115 from wfp/release-v0.12.0

Release v0.12.0 Fix #113 Fix #87
wfp · Aug 10, 2016 · 9a5838e · 9a5838e
2 parents 3652077 + 896c1f7
commit 9a5838e
Show file tree

Hide file tree

Showing 62 changed files with 251 additions and 288 deletions.
diff --git a/dist/css/bootstrap-theme.css b/dist/css/bootstrap-theme.css
diff --git a/dist/css/wfpui+grid.css b/dist/css/wfpui+grid.css
diff --git a/dist/css/wfpui.css b/dist/css/wfpui.css
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.11.0"
+version: "v0.12.0"
 quiet: true
 
 exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

diff --git a/docs/_sass/_mixins.scss b/docs/_sass/_mixins.scss
@@ -1,4 +1,3 @@
 // Mixins
 // Project: WFPUI Guide
-// Author: Matthew Morek ([email protected])
-// URL: http://matthewmorek.com
+
diff --git a/docs/_sass/_vars.scss b/docs/_sass/_vars.scss
@@ -1,4 +1,4 @@
 // Project Variables
 // Project: WFPUI Guide
-// Author: Matthew Morek ([email protected])
-// URL: http://matthewmorek.com
+
+
diff --git a/docs/bootstrap.html b/docs/bootstrap.html
@@ -4,9 +4,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <title>Theme Template for Bootstrap</title>
-
+    <title>WFP UI Bootstrap Theme</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
     <link rel="shortcut icon" href="http://cdn.wfp.org/favicon.ico">
     <link rel="stylesheet" href="http://cdn.wfp.org/libraries/webfonts/lato/lato.css">
@@ -58,7 +56,7 @@
 
       <!-- Main jumbotron for a primary marketing message or call to action -->
       <div class="jumbotron">
-        <h1>Theme example</h1>
+        <h1>Bootstrap Theme Example</h1>
         <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
       </div>
 

diff --git a/docs/example.html b/docs/example.html
@@ -62,12 +62,12 @@ <h2 class="menu--heading">Menu</h2>
 
     <section class="wfp-box">
 
-      <h1 id="home">Header One</h1>
-      <h2>Header Two</h2>
-      <h3>Header Three</h3>
-      <h4>Header Four</h4>
-      <h5>Header Five</h5>
-      <h6>Header Six</h6>
+      <h1 id="home">Header #1</h1>
+      <h2>Header #2</h2>
+      <h3>Header #3</h3>
+      <h4>Header #4</h4>
+      <h5>Header #5</h5>
+      <h6>Header #6</h6>
       <p>The Zero Hunger Challenge, launched by UN Secretary General Ban Ki-moon, encourages everyone - whether in government, business or civil society - to focus their energies on ending hunger in our lifetimes. By <a href="#">partnering with WFP</a> and supporting its work, major global companies such as Unilever, DSM and MasterCard have already started to do this, joining with governments and civil society in the quest for zero hunger.</p>
 
       <blockquote>The Zero Hunger Challenge, launched by UN Secretary General Ban Ki-moon, encourages everyone - whether in government, business or civil society - to focus their energies on ending hunger in our lifetimes. By partnering with WFP and supporting its work, major global companies such as Unilever, DSM and MasterCard have already started to do this, joining with governments and civil society in the quest for zero hunger.</blockquote>
@@ -270,14 +270,44 @@ <h2 class="section-title"><code>.wfp-seg-control</code></h2>
       </ul>
     </div>
 
-    <h2 class="section-title"><code>.wfp-breadcrumbs</code></h2>
+    <h2 class="section-title"><code>.wfp-breadcrumbs-light</code></h2>
 
     <div class="wfp-content-wrapper wfp-text-center">
-      <ul class="wfp-breadcrumbs">
-        <li class="breadcrumbs--item"><a href="#home" class="breadcrumbs--link home"><span class="icon-home-dark"></span><span>Home</span></a></li>
-        <li class="breadcrumbs--item"><a href="#email" class="breadcrumbs--link">Careers</a></li>
-        <li class="breadcrumbs--item"><span class="breadcrumbs--last">Internships</span></li>
-      </ul>
+      <nav class="wfp-breadcrumbs">
+        <ol class="breadcrumbs--wrapper">
+          <li class="breadcrumbs--item">
+            <a href="#home" class="breadcrumbs--link home">
+              <span class="icon-home-dark xsmall"></span><span>Home</span>
+            </a>
+          </li>
+          <li class="breadcrumbs--item">
+            <a href="#email" class="breadcrumbs--link">Careers</a>
+          </li>
+          <li class="breadcrumbs--item">
+            <span class="breadcrumbs--last">Internships</span>
+          </li>
+        </ol>
+      </nav>
+    </div>
+
+    <h2 class="section-title"><code>.wfp-breadcrumbs-dark</code></h2>
+
+    <div class="wfp-content-wrapper wfp-text-center">
+      <nav class="wfp-breadcrumbs--dark">
+        <ol class="breadcrumbs--wrapper">
+          <li class="breadcrumbs--item">
+            <a href="#home" class="breadcrumbs--link home">
+              <span class="icon-home-light xsmall"></span><span>Home</span>
+            </a>
+          </li>
+          <li class="breadcrumbs--item">
+            <a href="#email" class="breadcrumbs--link">Careers</a>
+          </li>
+          <li class="breadcrumbs--item">
+            <span class="breadcrumbs--last">Internships</span>
+          </li>
+        </ol>
+      </nav>
     </div>
 
     <h2 class="section-title"><code>.wfp-pagination</code></h2>

diff --git a/docs/js/lib/responsive-nav.min.js b/docs/js/lib/responsive-nav.min.js
diff --git a/gruntfile.js b/gruntfile.js
@@ -72,15 +72,17 @@ module.exports = function(grunt) {
       },
       docs: {
         files: {
-          'docs/css/main.css': 'docs/_sass/main.scss'
+          'docs/css/main.css': 'docs/_sass/main.scss',
+          'docs/css/bootstrap-theme.css': 'scss/bootstrap-theme.scss'
         }
       },
       docsDist: {
         options: {
           sourceMap: false
         },
         files: {
-          'docs/css/main.css': 'docs/_sass/main.scss'
+          'docs/css/main.css': 'docs/_sass/main.scss',
+          'docs/css/bootstrap-theme.css': 'scss/bootstrap-theme.scss'
         }
       }
     },
@@ -112,6 +114,12 @@ module.exports = function(grunt) {
         src: 'dist/css/*.css'
       },
       docs: {
+        options: {
+          processors: [
+            require('autoprefixer')({ browsers: ['last 2 version'] }),
+            require('pixrem')()
+          ]
+        },
         src: 'docs/css/*.css'
       },
       docsDist: {
@@ -280,9 +288,9 @@ module.exports = function(grunt) {
     htmlaudit: {
       default: {
         options: {
-          baseUri: 'http://cdn.wfp.org/guides/ui/v0.8.0/'
+          baseUri: 'http://cdn.wfp.org/guides/ui/v0.11.0/'
         },
-        src: './dist/docs/**/*.html'
+        src: './dist/docs/*.html'
       },
       ci: {
         options: {
@@ -297,9 +305,9 @@ module.exports = function(grunt) {
       }
     },
     copy: {
-      docs: {
-        src: './js/lib/responsive-nav.js',
-        dest: './docs/js/lib/responsive-nav.js'
+      docsJS: {
+        src: './dist/js/responsive-nav.min.js',
+        dest: './docs/js/lib/responsive-nav.min.js'
       }
     }
   });
@@ -324,11 +332,11 @@ module.exports = function(grunt) {
   // Build Grunticon Icons
   grunt.registerTask('gen-icons', ['clean:grunticon', 'grunticon']);
   // Build WFP UI Docs locally
-  grunt.registerTask('docs', ['sass:docs', 'postcss:docs', 'uglify:docs', 'jekyll']);
+  grunt.registerTask('docs', ['sass:docs', 'copy', 'postcss:docs', 'uglify:docs', 'jekyll']);
   // Build WFP UI Docs
-  grunt.registerTask('docs-build', ['sasslint', 'sass:docs', 'copy:docs', 'uglify:docs', 'postcss:docs', 'jekyll']);
+  grunt.registerTask('docs-build', ['sasslint', 'sass:docs', 'copy', 'uglify:docs', 'postcss:docs', 'jekyll']);
   // Build dist-ready WFP UI Docs
-  grunt.registerTask('docs-dist', ['sass:docsDist', 'copy:docs', 'postcss:docsDist', 'uglify:docs', 'jekyll']);
+  grunt.registerTask('docs-dist', ['sass:docsDist', 'copy', 'postcss:docsDist', 'uglify:docs', 'jekyll']);
   // Build WFP UI
   grunt.registerTask('build', ['eslint', 'sasslint', 'sass:dev', 'postcss:dev']);
   // Build a dist-ready WFP UI with all stati resources

diff --git a/scss/_core.scss b/scss/_core.scss
@@ -1,3 +1,6 @@
+// Core SCSS-only
+// Project: WFP UI
+
 // Dependencies
 @import "math.scss";
 

diff --git a/scss/_css-core.scss b/scss/_css-core.scss
@@ -1,4 +1,6 @@
 // Core CSS
+// Project: WFP UI
+
 @import "core";
 @import "css/base";
 @import "css/typography";

diff --git a/scss/_init.scss b/scss/_init.scss
@@ -1,7 +1,5 @@
 // Project Variables
 // Project: WFP UI
-// Author: Matthew Morek ([email protected])
-// URL: http://matthewmorek.com
 
 $sans-serif-stack:    "lato", -apple-system, BlinkMacSystemFont, system, sans-serif;
 $serif-stack:         "aleo", -apple-system, BlinkMacSystemFont, system, serif;
@@ -12,14 +10,9 @@ $small-font-size:     $base-font-size * 0.875; // 14px
 
 $spacing-unit:        0.25rem;
 
-$text-color:          #404040 !default;
-$background-color:    #ffffff !default;
-
 $primary:             #2a93fc;
 $accent:              #1f6ebc;
 
-$black:               #000000;
-
 // Greys gradation
 $grey:                #8c8c8c;
 $grey-darkest:        darken($grey, 42%);
@@ -40,12 +33,16 @@ $blue-lightest:       lighten($blue, 30%);
 
 $grey-contrast:       #eaeaea;
 
+$black:               #000000;
 $white:               #ffffff;
 $red:                 #ff5252;
 $orange:              #ffc759;
 $yellow:              #fcdc5d;
 $green:               #00a878;
 
+$text-color:          transparentize($grey-darkest, 0.1) !default;
+$background-color:    transparentize($white, 0.1) !default;
+
 // Width of the content area
 $content-width:       1000px !default;
 $max-content-width:   1200px !default;