Merge pull request #120 from wfp/release-v0.13.0

Release v0.13.0
wfp · Sep 16, 2016 · b8c80f8 · b8c80f8
2 parents 4c644c7 + ac00438
commit b8c80f8
Show file tree

Hide file tree

Showing 39 changed files with 596 additions and 452 deletions.
diff --git a/bower.json b/bower.json
@@ -6,7 +6,8 @@
   ],
   "description": "WFP UI",
   "main": [
-    "scss/wfpui.scss"
+    "scss/wfpui.scss",
+    "scss/wfpui+grid.scss"
   ],
   "keywords": [
     "ui",
@@ -33,7 +34,6 @@
   ],
   "devDependencies": {
     "bootstrap-sass": "~3.3.5",
-    "normalize-scss": "^3.0.3",
     "mathsass": "^0.9.5"
   }
 }
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.12.1"
+version: "v0.13.0"
 quiet: true
 
 exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

diff --git a/docs/_includes/footer.html b/docs/_includes/footer.html
@@ -1,10 +1,10 @@
     <footer class="wfp-footer--mini">
-      <div class="wfp-grid wfp-wrapper">
-        <div class="wfp-u-1 wfp-u-md-2-3 footer--panel left">
-          <h3 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h3>
+      <div class="wfp-grid wfp-wrapper pv2">
+        <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+          <p class="fs6 bold">{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
         </div>
-        <div class="wfp-u-1 wfp-u-md-1-3 footer--panel right">
-          <h3 class="footer--label">WFP UI {{ site.version }}</h3>
+        <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
+          <p class="fs6 bold">WFP UI {{ site.version }}</p>
         </div>
       </div>
     </footer>
diff --git a/docs/_includes/header.html b/docs/_includes/header.html
@@ -4,7 +4,7 @@
       <h1 class="header--title"><a href="{{ base }}/" class="header--logo">{{ site.title }}</a></h1>
     </div>
     <div class="wfp-u-2-5 wfp-u-md-2-3 header--nav">
-      <button class="header--btn small" id="js-nav-trigger">Menu</button>
+      <button class="header--btn" id="js-nav-trigger">Menu</button>
       <div class="main-nav flyout closed">
         <button class="nav-close" id="js-nav-close"><span class="close-icon">&#x2715;</span>Close</button>
         <nav class="wfp-menu-inverse">

diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
@@ -1,4 +1,4 @@
-<nav class="wfp-menu">
+<nav class="wfp-menu dn db-md pv2 pr2-md">
 {% for category in site.category-list %}
   <div class="menu--group">
     <h2 class="menu--heading"><span class="menu--item">{{ category }}</span></h2>

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -7,10 +7,10 @@
     {% include header.html %}
 
     <div class="wfp-grid wfp-wrapper" role="main">
-      <aside class="wfp-u-1 wfp-u-md-1-4 wfp-u-xl-1-4 wfp-box--flat side-nav">
+      <aside class="wfp-u-1 wfp-u-md-1-4 wfp-u-xl-1-4 side-nav pv3-md pr2-md">
         {% include sidebar.html %}
       </aside>
-      <article class="wfp-u-1 wfp-u-md-3-4 wfp-u-xl-5-8 wfp-box--flat">
+      <article class="wfp-u-1 wfp-u-md-3-4 wfp-u-xl-5-8 pv2 ph3 pl4-md pr0-md pv4-md">
         {{ content }}
       </article>
     </div>

diff --git a/docs/_sass/_layout.scss b/docs/_sass/_layout.scss
@@ -1,19 +1,3 @@
-.side-nav {
-  display: none;
-  // @todo: Confirm removal: Creates invisible page break
-  // visibility: hidden;
-
-  @include media-query($md-screen) {
-    display: inline-block;
-    visibility: visible;
-  }
-}
-
-.page-header {
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
 .page-content {
   > h1, h2, h3, h4, h5, h6 {
     + p { margin-top: 0.25em; }

diff --git a/docs/component-1-footer.md b/docs/component-1-footer.md
@@ -14,15 +14,15 @@ Not every footer needs to be extensive. Sometimes a very simple footer is all yo
 
 ###### Preview
 <footer class="wfp-footer--mini">
-  <div class="wfp-grid wfp-wrapper">
-    <div class="wfp-u-1 wfp-u-md-2-3 footer--panel left">
-      <h3 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h3>
+  <div class="wfp-grid wfp-wrapper pv2">
+    <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+      <p class="fs6 bold">{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
     </div>
-    <div class="wfp-u-1 wfp-u-md-1-3 footer--panel right">
-      <ul class="footer--links">
-        <li class="link"><a href="#">Donate</a></li>
-        <li class="link"><a href="#">Privacy</a></li>
-        <li class="link"><a href="#">Terms of Use</a></li>
+    <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
+      <ul class="nl fs6 mv2 pa0">
+        <li class="dib ma0 ml1"><a href="#">Donate</a></li>
+        <li class="dib ma0 ml1"><a href="#">Privacy</a></li>
+        <li class="dib ma0 ml1"><a href="#">Terms of Use</a></li>
       </ul>
     </div>
   </div>
@@ -31,15 +31,15 @@ Not every footer needs to be extensive. Sometimes a very simple footer is all yo
 ###### Source
 {% highlight html %}
 <footer class="wfp-footer--mini">
-  <div class="wfp-grid wfp-wrapper">
-    <div class="wfp-u-1 wfp-u-md-2-3 footer--panel left">
-      <h3 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h3>
+  <div class="wfp-grid wfp-wrapper pv2">
+    <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+      <p class="fs6 bold">{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
     </div>
-    <div class="wfp-u-1 wfp-u-md-1-3 footer--panel right">
-      <ul class="footer--links">
-        <li class="link"><a href="#">Donate</a></li>
-        <li class="link"><a href="#">Privacy</a></li>
-        <li class="link"><a href="#">Terms of Use</a></li>
+    <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
+      <ul class="nl fs6 mv2 pa0">
+        <li class="dib ma0 ml1"><a href="#">Donate</a></li>
+        <li class="dib ma0 ml1"><a href="#">Privacy</a></li>
+        <li class="dib ma0 ml1"><a href="#">Terms of Use</a></li>
       </ul>
     </div>
   </div>
@@ -52,26 +52,26 @@ This type of footer forms a simple layout containing social links, WFP logo, a c
 ###### Preview
 <footer class="wfp-footer--compact">
   <div class="footer--top">
-    <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-2 footer--panel left">
+    <div class="wfp-grid wfp-wrapper pv2">
+      <div class="wfp-u-1 wfp-u-md-1-2 tc tl-md">
         <h5 class="footer--heading">Follow WFP on social networks</h5>
         <ul class="footer--links">
           <li class="link"><a href="#" class="wfp-btn--twitter xsmall">Twitter</a></li>
           <li class="link"><a href="#" class="wfp-btn--facebook xsmall">Facebook</a></li>
           <li class="link"><a href="#" class="wfp-btn--gplus xsmall">Google+</a></li>
         </ul>
       </div>
-      <div class="wfp-u-1 wfp-u-md-1-2 footer--panel right">
+      <div class="wfp-u-1 wfp-u-md-1-2 tc tr-md">
         <img src="{{ base }}/img/logos/dark/png/1x/en-full.png" srcset="{{ base }}/img/logos/dark/png/1x/en-full.png 1x, {{ base }}/img/logos/dark/png/2x/en-full.png 2x" class="footer--logo" alt="WFP Logo">
       </div>
     </div>
   </div>
-  <div class="footer--bottom">
+  <div class="footer--bottom fs6">
     <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-3 footer--panel left">
-        <h4 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h4>
+      <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+        <p>{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-3 footer--panel right">
+      <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
         <ul class="footer--links">
           <li class="link"><a href="#">Donate</a></li>
           <li class="link"><a href="#">Privacy</a></li>
@@ -88,26 +88,26 @@ This type of footer forms a simple layout containing social links, WFP logo, a c
 {% highlight html %}
 <footer class="wfp-footer--compact">
   <div class="footer--top">
-    <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-2 footer--panel left">
+    <div class="wfp-grid wfp-wrapper pv2">
+      <div class="wfp-u-1 wfp-u-md-1-2 tc tl-md">
         <h5 class="footer--heading">Follow WFP on social networks</h5>
         <ul class="footer--links">
           <li class="link"><a href="#" class="wfp-btn--twitter xsmall">Twitter</a></li>
           <li class="link"><a href="#" class="wfp-btn--facebook xsmall">Facebook</a></li>
           <li class="link"><a href="#" class="wfp-btn--gplus xsmall">Google+</a></li>
         </ul>
       </div>
-      <div class="wfp-u-1 wfp-u-md-1-2 footer--panel right">
-        <img src="{{ base }}/img/logos/dark/png/1x/en-full.png" srcset="{{ base }}/img/logos/dark/png/1x/en-full.png 1x, {{ base }}/img/logos/dark/png/2x/en-full.png 2x" class="footer--logo" alt="WFP Logo">
+      <div class="wfp-u-1 wfp-u-md-1-2 tc tr-md">
+        <img src="img/logos/dark/png/1x/en-full.png" srcset="img/logos/dark/png/1x/en-full.png 1x, img/logos/dark/png/2x/en-full.png 2x" class="footer--logo" alt="WFP Logo">
       </div>
     </div>
   </div>
-  <div class="footer--bottom">
+  <div class="footer--bottom fs6">
     <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-3 footer--panel left">
-        <h4 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h4>
+      <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+        <p>{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-3 footer--panel right">
+      <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
         <ul class="footer--links">
           <li class="link"><a href="#">Donate</a></li>
           <li class="link"><a href="#">Privacy</a></li>
@@ -133,8 +133,8 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
 ###### Preview
 <footer class="wfp-footer--std">
   <div class="footer--top">
-    <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-3-5 footer--panel left">
+    <div class="wfp-grid wfp-wrapper pv2">
+      <div class="wfp-u-1 wfp-u-md-3-5 tc tl-md">
         <nav class="wfp-menu-plain wfp-grid">
           <div class="menu--group wfp-u-1 wfp-u-md-1-2">
             <h6 class="menu--heading">Get Involved</h6>
@@ -156,11 +156,11 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
           </div>
         </nav>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-5 footer--panel right">
-        <div class="wfp-logo-wrapper">
+      <div class="wfp-u-1 wfp-u-md-2-5 tc tr-md">
+        <div class="pa1">
           <img src="{{ base }}/img/logos/dark/png/1x/en-standard.png" srcset="{{ base }}/img/logos/dark/png/1x/en-standard.png 1x, {{ base }}/img/logos/dark/png/2x/en-standard.png 2x" class="footer--logo" alt="WFP Logo">
         </div>
-        <div class="wfp-content-wrapper">
+        <div class="pa1">
           <ul class="footer--links">
             <li class="link"><a href="#" class="wfp-btn--twitter xsmall">Twitter</a></li>
             <li class="link"><a href="#" class="wfp-btn--facebook xsmall">Facebook</a></li>
@@ -170,13 +170,13 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
       </div>
     </div>
   </div>
-  <div class="footer--bottom">
+  <div class="footer--bottom fs6">
     <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-3 footer--panel left">
-        <h4 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h4>
+      <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+        <p>{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-3 footer--panel right">
-        <h4 class="footer--label">Via Cesare Giulio Viola 68-70, 00148 Rome, Italy</h4>
+      <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
+        <p>Via Cesare Giulio Viola 68-70, 00148 Rome, Italy</p>
       </div>
     </div>
   </div>
@@ -186,14 +186,14 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
 {% highlight html %}
 <footer class="wfp-footer--std">
   <div class="footer--top">
-    <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-3-5 footer--panel left">
+    <div class="wfp-grid wfp-wrapper pv2">
+      <div class="wfp-u-1 wfp-u-md-3-5 tc tl-md">
         <nav class="wfp-menu-plain wfp-grid">
           <div class="menu--group wfp-u-1 wfp-u-md-1-2">
             <h6 class="menu--heading">Get Involved</h6>
             <ul class="menu--wrapper">
               <li class="menu--item"><a href="#" class="menu--link">Make a donation</a></li>
-              <li class="menu--item"><a href="#" class="menu--link">Join "One Future" community</a></li>
+              <li class="menu--item"><a href="#" class="menu--link">Join the community</a></li>
               <li class="menu--item"><a href="#" class="menu--link">Spread the word</a></li>
               <li class="menu--item"><a href="#" class="menu--link">Careers at WFP</a></li>
             </ul>
@@ -209,11 +209,11 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
           </div>
         </nav>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-5 footer--panel right">
-        <div class="wfp-logo-wrapper">
-          <img src="{{ base }}/img/logos/dark/png/1x/en-standard.png" srcset="{{ base }}/img/logos/dark/png/1x/en-standard.png 1x, {{ base }}/img/logos/dark/png/2x/en-standard.png 2x" class="footer--logo" alt="WFP Logo">
+      <div class="wfp-u-1 wfp-u-md-2-5 tc tr-md">
+        <div class="pa1">
+          <img src="img/logos/dark/png/1x/en-standard.png" srcset="img/logos/dark/png/1x/en-standard.png 1x, img/logos/dark/png/2x/en-standard.png 2x" class="footer--logo" alt="WFP Logo">
         </div>
-        <div class="wfp-content-wrapper">
+        <div class="pa1">
           <ul class="footer--links">
             <li class="link"><a href="#" class="wfp-btn--twitter xsmall">Twitter</a></li>
             <li class="link"><a href="#" class="wfp-btn--facebook xsmall">Facebook</a></li>
@@ -223,13 +223,13 @@ This flagship footer variant, builds up on top of `wfp-footer--compact` pattern.
       </div>
     </div>
   </div>
-  <div class="footer--bottom">
+  <div class="footer--bottom fs6">
     <div class="wfp-grid wfp-wrapper">
-      <div class="wfp-u-1 wfp-u-md-1-3 footer--panel left">
-        <h4 class="footer--label">{{ site.time | date: '%Y' }} &copy; World Food Programme</h4>
+      <div class="wfp-u-1 wfp-u-md-1-3 tc tl-md">
+        <p>{{ site.time | date: '%Y' }} &copy; World Food Programme</p>
       </div>
-      <div class="wfp-u-1 wfp-u-md-2-3 footer--panel right">
-        <h4 class="footer--label">Via Cesare Giulio Viola 68-70, 00148 Rome, Italy</h4>
+      <div class="wfp-u-1 wfp-u-md-2-3 tc tr-md">
+        <p>Via Cesare Giulio Viola 68-70, 00148 Rome, Italy</p>
       </div>
     </div>
   </div>

diff --git a/gruntfile.js b/gruntfile.js
@@ -45,7 +45,6 @@ module.exports = function(grunt) {
         sassDir: 'scss',
         cssDir: 'dist/css',
         includePaths: [
-          'bower_components/normalize-scss',
           'bower_components/mathsass/dist'
         ]
       },
@@ -255,7 +254,7 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/js/responsive-nav.min.js': ['js/responsive-nav.js']
+          'dist/js/responsive-nav.min.js': ['js/lib/responsive-nav.js']
         }
       },
       docs: {
@@ -269,7 +268,7 @@ module.exports = function(grunt) {
           screwIE8: true
         },
         files: {
-          'docs/js/lib/responsive-nav.js': ['js/responsive-nav.js']
+          'docs/js/lib/responsive-nav.js': ['js/lib/responsive-nav.js']
         }
       }
     },
@@ -339,8 +338,10 @@ module.exports = function(grunt) {
   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 all assets for distribution
+  grunt.registerTask('dist-assets', ['gen-svg', 'gen-icons']);
   // Build a dist-ready WFP UI with all stati resources
-  grunt.registerTask('dist', ['gen-svg', 'gen-icons', 'sass:dist', 'postcss:dist', 'uglify:dist']);
+  grunt.registerTask('dist', ['sass:dist', 'postcss:dist', 'uglify:dist']);
   // Run build and dist task in sequence (for Travis CI)
   grunt.registerTask('test', ['eslint', 'sasslint', 'htmlaudit:ci']);
   // Set default grunt task to `dist`

diff --git a/scss/_core.scss b/scss/_core.scss
@@ -36,9 +36,11 @@
 @import "modules/layout/widths";
 @import "modules/layout/max-widths";
 @import "modules/layout/heights";
+@import "modules/layout/max-heights";
 
 // Elements
 @import "modules/elements/headings";
 
 // Theme
 @import "modules/theme/colours";
+@import "modules/theme/box-shadow";