🔖 Release v0.14.0

Merge branch 'release-v0.14.0' into `master`.

Signed-off-by: Matthew Morek <[email protected]>

dist/assets/icons/ui/preview.html

@@ -70,8 +70,12 @@ <h1>CUSTOM PREVIEW - you can change this in the previewTemplate option</h1>
 			<pre><code>.icon-favorite-false-light:</code></pre><div class="icon-favorite-false-light" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-favorite-true-dark:</code></pre><div class="icon-favorite-true-dark" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-favorite-true-light:</code></pre><div class="icon-favorite-true-light" style="width: 24px; height: 24px;" ></div><hr/>
+			<pre><code>.icon-file-dark:</code></pre><div class="icon-file-dark" style="width: 24px; height: 24px;" ></div><hr/>
+			<pre><code>.icon-file-light:</code></pre><div class="icon-file-light" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-flag-dark:</code></pre><div class="icon-flag-dark" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-flag-light:</code></pre><div class="icon-flag-light" style="width: 24px; height: 24px;" ></div><hr/>
+			<pre><code>.icon-folder-dark:</code></pre><div class="icon-folder-dark" style="width: 24px; height: 24px;" ></div><hr/>
+			<pre><code>.icon-folder-light:</code></pre><div class="icon-folder-light" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-grade-neg-dark:</code></pre><div class="icon-grade-neg-dark" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-grade-neg-light:</code></pre><div class="icon-grade-neg-light" style="width: 24px; height: 24px;" ></div><hr/>
 			<pre><code>.icon-grade-pos-dark:</code></pre><div class="icon-grade-pos-dark" style="width: 24px; height: 24px;" ></div><hr/>

dist/assets/icons/ui/ui-icons.fallback.css

@@ -94,10 +94,18 @@
 
 .icon-favorite-true-light { background-image: url('png/favorite-true-light.png'); background-repeat: no-repeat; }
 
+.icon-file-dark { background-image: url('png/file-dark.png'); background-repeat: no-repeat; }
+
+.icon-file-light { background-image: url('png/file-light.png'); background-repeat: no-repeat; }
+
 .icon-flag-dark { background-image: url('png/flag-dark.png'); background-repeat: no-repeat; }
 
 .icon-flag-light { background-image: url('png/flag-light.png'); background-repeat: no-repeat; }
 
+.icon-folder-dark { background-image: url('png/folder-dark.png'); background-repeat: no-repeat; }
+
+.icon-folder-light { background-image: url('png/folder-light.png'); background-repeat: no-repeat; }
+
 .icon-grade-neg-dark { background-image: url('png/grade-neg-dark.png'); background-repeat: no-repeat; }
 
 .icon-grade-neg-light { background-image: url('png/grade-neg-light.png'); background-repeat: no-repeat; }

docs/_config.yml

@@ -3,7 +3,7 @@ title: "WFP UI Guidelines"
 email: "[email protected]"
 description: ""
 url: "https://cdn.wfp.org" # WFP CDN
-version: "v0.13.0"
+version: "v0.14.0"
 quiet: true
 
 exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

docs/basics-5-getting-started.md

@@ -49,9 +49,9 @@ You can also reference a preprocessed _WFP UI_ library directly in your markup:
 Alternatively, you can load _WFP UI_ from our CDN, denoting a version number (i.e.: `v0.8.0`) in the URL:
 {% highlight html %}
 <!-- WFP UI -->
-<link href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/css/wfpui.css" rel="stylesheet">
+<link href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/css/wfpui.css" rel="stylesheet">
 <!-- WFP UI + Grid System -->
-<link href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/css/wfpui+grid.css" rel="stylesheet">
+<link href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/css/wfpui+grid.css" rel="stylesheet">
 {% endhighlight %}
 
 ### Offline Use

docs/component-0-header.md

@@ -25,13 +25,15 @@ If the vertical space is limited (i.e.: on smaller viewports), you can substitut
 
 ###### Preview
 <header class="wfp-header-ext">
-  <div class="wfp-grid wfp-wrapper">
+  <div class="wfp-grid wfp-wrapper" role="banner">
     <div class="wfp-u-2-3 wfp-u-sm-1-4 header--container">
-      <h1 class="header--title">
-        <a href="#" class="header--logo">
-          <img src="{{ base }}/img/logos/light/png/1x/en-standard.png" srcset="{{ base }}/img/logos/light/png/1x/en-standard.png 1x, {{ base }}/img/logos/light/png/2x/en-standard.png 2x" alt="UN World Food Programme">
-        </a>
-      </h1>
+      <a href="#" class="header--logo db pv2 mv1">
+        <picture class="db w-100">
+          <source srcset="{{ base }}/img/logos/light/png/1x/en-standard.png 1x, {{ base }}/img/logos/light/png/2x/en-standard.png 2x" media="(max-width: 767px)">
+          <source srcset="{{ base }}/img/logos/light/png/1x/en-full.png 1x, {{ base }}/img/logos/light/png/2x/en-full.png 2x" media="(min-width: 768px)">
+          <img src="{{ base }}/img/logos/light/png/1x/en-standard.png" alt="UN World Food Programme">
+        </picture>
+      </a>
     </div>
     <div class="wfp-u-1-3 wfp-u-sm-3-4 header--nav">
       <button class="header--toggle" id="js-menu-ext-trigger">Menu</button>
@@ -42,42 +44,32 @@ If the vertical space is limited (i.e.: on smaller viewports), you can substitut
           <li class="menu--item"><a href="#" class="menu--link">Navlink #3</a></li>
         </ul>
       </nav>
-      <div class="header--misc">
-        <div class="header--search">
-          <input type="search" class="header--input" placeholder="Search">
-        </div>
-      </div>
     </div>
   </div>
 </header>
 
 ###### Source
 {% highlight html %}
 <header class="wfp-header-ext">
-  <div class="wfp-grid wfp-wrapper">
+  <div class="wfp-grid wfp-wrapper" role="banner">
     <div class="wfp-u-2-3 wfp-u-sm-1-4 header--container">
-      <h1 class="header--title">
-        <a href="#" class="header--logo">
-          <img src="en-standard.png" srcset="en-standard.png 1x, [email protected] 2x" alt="UN World Food Programme">
-        </a>
-      </h1>
+      <a href="#" class="header--logo db pv2 mv1">
+        <picture class="db w-100">
+          <source srcset="{{ base }}/img/logos/light/png/1x/en-standard.png 1x, {{ base }}/img/logos/light/png/2x/en-standard.png 2x" media="(max-width: 767px)">
+          <source srcset="{{ base }}/img/logos/light/png/1x/en-full.png 1x, {{ base }}/img/logos/light/png/2x/en-full.png 2x" media="(min-width: 768px)">
+          <img src="{{ base }}/img/logos/light/png/1x/en-standard.png" alt="UN World Food Programme">
+        </picture>
+      </a>
     </div>
-    <div class="wfp-u-1-3 wfp-u-sm-3-4 header--nav">
-      <button class="header--toggle" id="js-example-menu-trigger">Menu</button>
-      <nav class="header--menu" id="js-example-menu">
+    <div class="wfp-u-1-3 wfp-u-sm-3-4 header--nav pv3-lg pr2 pr0-lg">
+      <button class="header--toggle" id="js-menu-ext-trigger">Menu</button>
+      <nav class="header--menu" id="js-menu-ext">
         <ul class="menu--group">
           <li class="menu--item"><a href="#" class="menu--link active">Navlink #1</a></li>
           <li class="menu--item"><a href="#" class="menu--link">Navlink #2</a></li>
           <li class="menu--item"><a href="#" class="menu--link">Navlink #3</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Navlink #4</a></li>
-          <li class="menu--item"><a href="#" class="menu--link">Navlink #5</a></li>
         </ul>
       </nav>
-      <div class="header--misc">
-        <div class="header--search">
-          <input type="search" class="header--input" placeholder="Search">
-        </div>
-      </div>
     </div>
   </div>
 </header>
@@ -136,13 +128,13 @@ Internal header features a simple navigation, which works on both smaller and bi
 
 <div class="notice">
   <h2 class="title">Header Position</h2>
-  <p>You can also set header component to stay fixed to the top of your page, by adding <code>wfp-header-spacer--narrow</code> class to your <code>body</code> tag (for extra spacing), and class <code>fixed</code> to <code>header-int</code> element.</p>
+  <p>You can also set header component to stay fixed to the top of your page, by adding <code>hs--int</code> (for <code>header-int</code>) or <code>hs--ext</code> (for <code>header-ext</code>) class to your <code>body</code> tag (for extra spacing), and class <code>fixed</code> to <code>header-int</code> element.</p>
 </div>
 
 To ensure the navigation works correctly, include our fork of `responsive-nav` library to the bottom of your page, before the closing `body` tag. You can load it locally, from WFP UI `dist` directory, or from our CDN:
 
 {% highlight html %}
-<script src="http://cdn.wfp.org/libraries/wfpui/v0.8.0/js/responsive-nav.min.js" defer></script>
+<script src="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/js/responsive-nav.min.js" defer></script>
 <script>
   var nav = responsiveNav("#js-nav", {
     customToggle: "js-nav-trigger", // menu toggle

docs/modules-02-typography.md

@@ -0,0 +1,151 @@
+---
+layout: page
+title: Typography
+permalink: /modules/typography/
+resource: true
+categories: Modules
+---
+{% include base.html %}
+
+
+The following CSS classes allow you to control typography. Most of them are available in responsive variants.
+
+### Text Alignment
+Use to alignment inline elements.
+
+- **Responsive:** Yes
+
+{% highlight scss %}
+.tl {
+  text-align: left;
+}
+.tc {
+  text-align: center;
+}
+.tr {
+  text-align: right;
+}
+{% endhighlight %}
+
+###  Font Weight
+Use on elements to control the font thickness. Increases incrementally from `1` to `9`, in addition shortcut classes are `normal` and `bold`.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.normal { font-weight: normal; }
+.bold   { font-weight: bold; }
+
+.fw1 { font-weight: 100; }
+.fw2 { font-weight: 200; }
+.fw3 { font-weight: 300; }
+.fw4 { font-weight: 400; }
+.fw5 { font-weight: 500; }
+.fw6 { font-weight: 600; }
+.fw7 { font-weight: 700; }
+.fw8 { font-weight: 800; }
+.fw9 { font-weight: 900; }
+{% endhighlight %}
+
+###  Font Size
+Predefined font size values to maintain typography hierarchy.
+
+- **Responsive:** Yes
+
+{% highlight scss %}
+.fs1 { font-size: 3rem;}
+.fs2 { font-size: 2.25rem;}
+.fs3 { font-size: 1.5rem;}
+.fs4 { font-size: 1.25rem;}
+.fs5 { font-size: 1rem;}
+.fs6 { font-size: 0.875rem;}
+{% endhighlight %}
+
+###  Font Style
+Use predefined styles on elements to control the font style.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.fst-normal {
+  font-style: normal;
+}
+.fst-i {
+  font-style: italics;
+}
+{% endhighlight %}
+
+###  Text Decoration
+Use predefined styles on elements to control the font decoration style.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.strike { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.no-decor { text-decoration: none; }
+
+{% endhighlight %}
+
+###  Text Transform
+Use predefined styles on elements to control the font transform style.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.t-caps     { text-transform: capitalize; }
+.t-allcaps  { text-transform: uppercase; }
+.t-lowcase  { text-transform: lowercase; }
+.t-firstcap { text-transform: capitalize; }
+{% endhighlight %}
+
+###  Vertical Alignment
+Use predefined styles on elements to control the vertical alignment (including table) style.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.va-base        { vertical-align: baseline; }
+.va-sub         { vertical-align: sub; }
+.va-sup         { vertical-align: super; }
+.va-texttop     { vertical-align: text-top; }
+.va-textbottom  { vertical-align: text-bottom; }
+
+// Table Alignment
+.va-mid    { vertical-align: text-middle; }
+.va-top    { vertical-align: text-top; }
+.va-bottom { vertical-align: text-bottom; }
+{% endhighlight %}
+
+###  White space
+Use predefined styles on elements to provide white space.
+
+- **Responsive:** No
+
+{% highlight scss %}
+.ws-normal { white-space: normal; }
+.ws-nowrap { white-space: nowrap; }
+.ws-pre    { white-space: pre; }
+{% endhighlight %}
+
+###  Tracking
+Use predefined styles on elements to provide tracking (letter spacing).
+
+-  **Responsive:** No
+
+{% highlight scss %}
+.tr-tight  { letter-spacing: -0.03em; }
+.tr-loose  { letter-spacing: 0.16em; }
+.tr-xloose { letter-spacing: 0.32em; }
+{% endhighlight %}
+
+###  Leading (`line-height`)
+Use predefined styles to provide standard, uniformed _line height_ styles for typography.
+
+-  **Responsive:** Yes
+
+{% highlight scss %}
+.lh-default { line-height: 1; }
+.lh-heading { line-height: 1.250; }
+.lh-body    { line-height: 1.500; }
+{% endhighlight %}

docs/resources-0-logos.md

@@ -133,9 +133,9 @@ Loading logos from a Content Delivery Network can be done easily by referencing
 
 {% highlight html %}
 <!-- SVG  -->
-<img src="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/logos/dark/svg/en-standard.svg" alt="WFP Logo (English)">
+<img src="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/logos/dark/svg/en-standard.svg" alt="WFP Logo (English)">
 <!-- PNG -->
-<img src="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/logos/dark/png/1x/en-full.png" alt="WFP Logo (English)">
+<img src="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/logos/dark/png/1x/en-full.png" alt="WFP Logo (English)">
 {% endhighlight %}
 
 <div class="notice">

docs/resources-4-icons-thematic.md

@@ -29,11 +29,11 @@ You can check [support for `base64`](http://caniuse.com/#feat=atob-btoa) and [SV
 ###### CDN
 {% highlight html %}
 <!-- For modern browsers with SVG support -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.svg.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/thematic/thematic-icons.svg.css">
 <!-- For browsers without SVG support -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.png.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/thematic/thematic-icons.png.css">
 <!-- IE8-9 Fallback -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/thematic/thematic-icons.fallback.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/thematic/thematic-icons.fallback.css">
 {% endhighlight %}
 
 Add thematic icons to your website using `<span>` element with a class `thematic-{icon-name}`, where `{icon-name}` means a corresponding name of an icon, listed in a preview below (or in the package).

docs/resources-5-icons-ui.md

@@ -31,11 +31,11 @@ You can check [support for `base64`](http://caniuse.com/#feat=atob-btoa) and [SV
 ###### CDN
 {% highlight html %}
 <!-- For modern browsers with SVG support -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/ui/ui-icons.svg.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/ui/ui-icons.svg.css">
 <!-- For browsers without SVG support -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/ui/ui-icons.png.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/ui/ui-icons.png.css">
 <!-- IE8-9 Fallback -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/assets/icons/ui/ui-icons.fallback.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/assets/icons/ui/ui-icons.fallback.css">
 {% endhighlight %}
 
 Add UI icons to your interfaces using `<span>` element with a class `icon-{icon-name}`, where `{icon-name}` means a corresponding name of the icon listed in a preview below (or in the package).

docs/resources-6-bootstrap.md

@@ -13,7 +13,7 @@ As part of WFP UI, we maintain our own `bootstrap-theme.css`, which is a drop-in
 <!-- Bower -->
 <link rel="stylesheet" href="bower_components/wfp-ui/dist/css/bootstrap-theme.css">
 <!-- WFP CDN -->
-<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/v0.8.0/css/bootstrap-theme.css">
+<link rel="stylesheet" href="http://cdn.wfp.org/libraries/wfpui/{{ site.version }}/css/bootstrap-theme.css">
 {% endhighlight %}
 
 <div class="notice">