Skip to content

Commit 3652077

Browse files
author
Matthew Morek
committed
Release v0.11.0
Merge branch 'release-0.11.0' into `master` Signed-off-by: Matthew Morek <me@matthewmorek.com>
2 parents 7de3557 + d9b255e commit 3652077

58 files changed

Lines changed: 800 additions & 698 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎dist/css/bootstrap-theme.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/wfpui+grid.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/css/wfpui.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/_config.yml‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
title: "WFP UI Guidelines"
33
email: "me@matthewmorek.com"
44
description: ""
5-
# baseurl: "/guides/ui/v0.5.0" # WFP CDN
65
url: "https://cdn.wfp.org" # WFP CDN
7-
version: "v0.10.1"
6+
version: "v0.11.0"
87
quiet: true
98

109
exclude: ["*.sublime-*", "*.sh", "*.yml", "*.DS_*"]

‎docs/_sass/_layout.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
}
1111

1212
.page-header {
13-
margin-top: 1em;
14-
margin-bottom: 2em;
13+
margin-top: 1.5rem;
14+
margin-bottom: 1.5rem;
1515
}
1616

1717
.page-content {

‎docs/example.html‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -195,25 +195,25 @@ <h3 class="section-title"><code>.valid</code></h3>
195195
<h2 class="section-title"><code>.wfp-menu</code></h2>
196196

197197
<nav class="wfp-menu">
198-
<h2 class="menu--heading">Navigation</h2>
198+
<h2 class="menu--heading"><span class="menu--item">Navigation</span></h2>
199199
<ul class="menu--wrapper">
200200
<li class="menu--item">
201-
<a href="#" class="menu--link"><span class="icon-email-dark"></span> Inbox</a>
201+
<a href="#" class="menu--link"><span class="icon-email-closed-dark"></span> Inbox</a>
202202
</li>
203203
<li class="menu--item">
204204
<a href="#" class="menu--link"><span class="icon-account-circle-dark"></span> Account</a>
205205
</li>
206206
<li class="menu--item">
207-
<a href="#" class="menu--link"><span class="icon-exit-to-app-dark"></span> Sign Out</a>
207+
<a href="#" class="menu--link"><span class="icon-close-circle-dark"></span> Sign Out</a>
208208
</li>
209209
</ul>
210210
</nav>
211211

212212
<nav class="wfp-menu">
213213
<div class="menu--group">
214-
<h2 class="menu--heading">About</h2>
214+
<h6 class="menu--heading"><span class="menu--item">About</span></h6>
215215
<ul class="menu--wrapper">
216-
<li class="menu--item"><a href="#" class="menu--link">Executive Director</a></li>
216+
<li class="menu--item"><a href="#" class="menu--link current">Executive Director</a></li>
217217
<li class="menu--item"><a href="#" class="menu--link">Senior Leadership</a></li>
218218
<li class="menu--item"><a href="#" class="menu--link">Corporate Information</a></li>
219219
<li class="menu--item"><a href="#" class="menu--link">Funding</a></li>
@@ -223,7 +223,7 @@ <h2 class="menu--heading">About</h2>
223223

224224
<nav class="wfp-menu wfp-grid">
225225
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
226-
<h2 class="menu--heading">Our Programmes</h2>
226+
<h2 class="menu--heading"><span class="menu--item">Our Programmes</span></h2>
227227
<ul class="menu--wrapper">
228228
<li class="menu--item"><a class="menu--link" href="#">Cash and Vouchers</a></li>
229229
<li class="menu--item"><a class="menu--link" href="#">Foods for Assets</a></li>
@@ -232,7 +232,7 @@ <h2 class="menu--heading">Our Programmes</h2>
232232
</ul>
233233
</div>
234234
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
235-
<h2 class="menu--heading">Our Expertise</h2>
235+
<h2 class="menu--heading"><span class="menu--item">Our Expertise</span></h2>
236236
<ul class="menu--wrapper">
237237
<li class="menu--item"><a class="menu--link" href="#">Preparedness: Being Ready</a></li>
238238
<li class="menu--item"><a class="menu--link" href="#">Responding to Emergencies</a></li>
@@ -241,7 +241,7 @@ <h2 class="menu--heading">Our Expertise</h2>
241241
</ul>
242242
</div>
243243
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
244-
<h2 class="menu--heading">Our Operations</h2>
244+
<h2 class="menu--heading"><span class="menu--item">Our Operations</span></h2>
245245
<ul class="menu--wrapper">
246246
<li class="menu--item"><a class="menu--link" href="#">Current Emergencies</a></li>
247247
<li class="menu--item"><a class="menu--link" href="#">Emergency Operations</a></li>
@@ -296,6 +296,9 @@ <h2 class="section-title"><code>.wfp-pagination</code></h2>
296296
<li class="pagination--item">
297297
<a href="#" class="pagination--btn">3</a>
298298
</li>
299+
<li class="pagination--item ellipsis">
300+
<span class="pagination--btn ">&hellip;</span>
301+
</li>
299302
<li class="pagination--item">
300303
<a href="#" class="pagination--btn">Next</a>
301304
</li>
@@ -484,34 +487,35 @@ <h2 class="section-title"><code>.wfp-footer--std</code></h2>
484487
<div class="wfp-grid wfp-wrapper">
485488
<div class="wfp-u-1 wfp-u-md-2-3 footer--panel left">
486489
<nav class="wfp-menu-plain wfp-grid">
487-
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
488-
<h2 class="menu--heading">Get Involved</h2>
489-
<ul class="menu--wrapper">
490-
<li class="menu--item"><a href="#" class="menu--link">Make a donation</a></li>
491-
<li class="menu--item"><a href="#" class="menu--link">Join the community</a></li>
492-
<li class="menu--item"><a href="#" class="menu--link">Spread the word</a></li>
493-
<li class="menu--item"><a href="#" class="menu--link">Careers at WFP</a></li>
494-
</ul>
495-
</div>
496-
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
497-
<h2 class="menu--heading">Media &amp; Library</h2>
498-
<ul class="menu--wrapper">
499-
<li class="menu--item"><a href="#" class="menu--link">Newsroom</a></li>
500-
<li class="menu--item"><a href="#" class="menu--link">Publications</a></li>
501-
<li class="menu--item"><a href="#" class="menu--link">Data and statistics</a></li>
502-
<li class="menu--item"><a href="#" class="menu--link">Social media</a></li>
503-
</ul>
504-
</div>
505-
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
506-
<h2 class="menu--heading">Get Involved</h2>
507-
<ul class="menu--wrapper">
508-
<li class="menu--item"><a href="#" class="menu--link">Make a donation</a></li>
509-
<li class="menu--item"><a href="#" class="menu--link">Join the community</a></li>
510-
<li class="menu--item"><a href="#" class="menu--link">Spread the word</a></li>
511-
<li class="menu--item"><a href="#" class="menu--link">Careers at WFP</a></li>
512-
</ul>
513-
</div>
514-
</nav>
490+
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
491+
<h6 class="menu--heading">Our Programmes</h6>
492+
<ul class="menu--wrapper">
493+
<li class="menu--item"><a href="#" class="menu--link">Cash and Vouchers</a></li>
494+
<li class="menu--item"><a href="#" class="menu--link">Foods for Assets</a></li>
495+
<li class="menu--item"><a href="#" class="menu--link current">HIV / AIDS</a></li>
496+
<li class="menu--item"><a href="#" class="menu--link">Purchase for Progress</a></li>
497+
</ul>
498+
</div>
499+
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
500+
<h6 class="menu--heading">Our Expertise</h6>
501+
<ul class="menu--wrapper">
502+
<li class="menu--item"><a href="#" class="menu--link">Preparedness: Being Ready</a></li>
503+
<li class="menu--item"><a href="#" class="menu--link">Responding to Emergencies</a></li>
504+
<li class="menu--item"><a href="#" class="menu--link">Food Security Analysis</a></li>
505+
<li class="menu--item"><a href="#" class="menu--link">Buying the Food</a></li>
506+
</ul>
507+
</div>
508+
<div class="menu--group wfp-u-1 wfp-u-md-1-3">
509+
<h6 class="menu--heading">Our Operations</h6>
510+
<ul class="menu--wrapper">
511+
<li class="menu--item"><a href="#" class="menu--link">Current Emergencies</a></li>
512+
<li class="menu--item"><a href="#" class="menu--link">Emergency Operations</a></li>
513+
<li class="menu--item"><a href="#" class="menu--link">Relief & Recovery Operations</a></li>
514+
<li class="menu--item"><a href="#" class="menu--link">Special Operations</a></li>
515+
</ul>
516+
</div>
517+
</nav>
518+
515519
</div>
516520
<div class="wfp-u-1 wfp-u-md-1-3 footer--panel right">
517521
<div class="wfp-logo-wrapper text-right">

‎docs/resources-5-icons-ui.md‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -49,37 +49,40 @@ Add UI icons to your interfaces using `<span>` element with a class `icon-{icon-
4949
<p>UI icons can be used alongside other UI elements; within menus, buttons, etc, as long as there is a descriptive label next to it. <strong>Do not use icons on their own on actionable UI elements, such as links or buttons.</strong></p>
5050
</div>
5151

52+
<nav class="wfp-menu">
53+
<div class="menu--group">
54+
<h6 class="menu--heading"><span class="menu--item">About</span></h6>
55+
<ul class="menu--wrapper">
56+
<li class="menu--item"><a href="#" class="menu--link current">Executive Director</a></li>
57+
<li class="menu--item"><a href="#" class="menu--link">Senior Leadership</a></li>
58+
<li class="menu--item"><a href="#" class="menu--link">Corporate Information</a></li>
59+
<li class="menu--item"><a href="#" class="menu--link">Funding</a></li>
60+
</ul>
61+
</div>
62+
</nav>
5263

5364
###### Preview
5465
<nav class="wfp-menu">
55-
<h6 class="menu--heading">Navigation</h6>
56-
<ul class="menu--wrapper">
57-
<li class="menu--item">
58-
<a href="#" class="menu--link"><span class="icon-email-dark"></span> Inbox</a>
59-
</li>
60-
<li class="menu--item">
61-
<a href="#" class="menu--link"><span class="icon-account-circle-dark"></span> Account</a>
62-
</li>
63-
<li class="menu--item">
64-
<a href="#" class="menu--link"><span class="icon-exit-to-app-dark"></span> Sign Out</a>
65-
</li>
66-
</ul>
66+
<div class="menu--group">
67+
<h6 class="menu--heading"><span class="menu--item">Navigation</span></h6>
68+
<ul class="menu--wrapper">
69+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-email-closed-dark"></span> Inbox</a></li>
70+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-account-circle-dark"></span> Account</a></li>
71+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-close-circle-dark"></span> Sign Out</a></li>
72+
</ul>
73+
</div>
6774
</nav>
6875

6976
{% highlight html %}
7077
<nav class="wfp-menu">
71-
<h6 class="menu--heading">Navigation</h6>
72-
<ul class="menu--wrapper">
73-
<li class="menu--item">
74-
<a href="#" class="menu--link"><i class="icon-email-dark"></i> Inbox</a>
75-
</li>
76-
<li class="menu--item">
77-
<a href="#" class="menu--link"><i class="icon-account-circle-dark"></i> Account</a>
78-
</li>
79-
<li class="menu--item">
80-
<a href="#" class="menu--link"><i class="icon-exit-to-app-dark"></i> Sign Out</a>
81-
</li>
82-
</ul>
78+
<div class="menu--group">
79+
<h6 class="menu--heading"><span class="menu--item">Navigation</span></h6>
80+
<ul class="menu--wrapper">
81+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-email-closed-dark"></span> Inbox</a></li>
82+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-account-circle-dark"></span> Account</a></li>
83+
<li class="menu--item"><a href="#" class="menu--link"><span class="icon-close-circle-dark"></span> Sign Out</a></li>
84+
</ul>
85+
</div>
8386
</nav>
8487
{% endhighlight %}
8588

‎gruntfile.js‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ module.exports = function(grunt) {
55
pkg: grunt.file.readJSON('package.json'),
66
watch: {
77
sass: {
8-
files: 'scss/**/*.scss',
8+
files: 'scss/**/**/*.scss',
99
tasks: ['build', 'docs']
1010
},
1111
eslint: {
@@ -23,7 +23,7 @@ module.exports = function(grunt) {
2323
},
2424
pure_grids: {
2525
responsive: {
26-
dest: 'scss/modules/_grid-units.scss',
26+
dest: 'scss/css/_grid-units.scss',
2727
options: {
2828
units: [5,12,24],
2929
includeOldIEWidths: false,
@@ -206,7 +206,7 @@ module.exports = function(grunt) {
206206
},
207207
files: [{
208208
src: 'icons/ui/dist/light/**/*.svg',
209-
dest: 'scss/modules/icons/_icons-light.scss'
209+
dest: 'scss/icons/_icons-light.scss'
210210
}]
211211
},
212212
dark: {
@@ -216,7 +216,7 @@ module.exports = function(grunt) {
216216
},
217217
files: [{
218218
src: 'icons/ui/dist/dark/**/*.svg',
219-
dest: 'scss/modules/icons/_icons-dark.scss'
219+
dest: 'scss/icons/_icons-dark.scss'
220220
}]
221221
},
222222
primary: {
@@ -226,7 +226,7 @@ module.exports = function(grunt) {
226226
},
227227
files: [{
228228
src: 'icons/ui/dist/primary/**/*.svg',
229-
dest: 'scss/modules/icons/_icons-primary.scss'
229+
dest: 'scss/icons/_icons-primary.scss'
230230
}]
231231
}
232232
},
@@ -266,7 +266,7 @@ module.exports = function(grunt) {
266266
}
267267
},
268268
eslint: {
269-
target: ['js/**/*.js'],
269+
target: ['js/**/**/*.js'],
270270
options: {
271271
ignorePattern: ['js/lib/**/*.js']
272272
}
@@ -275,7 +275,7 @@ module.exports = function(grunt) {
275275
options: {
276276
config: '.sass-lint.yml',
277277
},
278-
target: ['scss/**/*.scss']
278+
target: ['scss/**/**/*.scss']
279279
},
280280
htmlaudit: {
281281
default: {
@@ -295,11 +295,18 @@ module.exports = function(grunt) {
295295
},
296296
src: './dist/docs/*.html'
297297
}
298+
},
299+
copy: {
300+
docs: {
301+
src: './js/lib/responsive-nav.js',
302+
dest: './docs/js/lib/responsive-nav.js'
303+
}
298304
}
299305
});
300306

301307
grunt.loadNpmTasks('grunt-contrib-watch');
302308
grunt.loadNpmTasks('grunt-contrib-clean');
309+
grunt.loadNpmTasks('grunt-contrib-copy');
303310
grunt.loadNpmTasks('grunt-contrib-uglify');
304311
grunt.loadNpmTasks('grunt-datauri');
305312
grunt.loadNpmTasks('grunt-eslint');
@@ -319,9 +326,9 @@ module.exports = function(grunt) {
319326
// Build WFP UI Docs locally
320327
grunt.registerTask('docs', ['sass:docs', 'postcss:docs', 'uglify:docs', 'jekyll']);
321328
// Build WFP UI Docs
322-
grunt.registerTask('docs-build', ['sasslint', 'sass:docs', 'uglify:docs', 'postcss:docs', 'jekyll']);
329+
grunt.registerTask('docs-build', ['sasslint', 'sass:docs', 'copy:docs', 'uglify:docs', 'postcss:docs', 'jekyll']);
323330
// Build dist-ready WFP UI Docs
324-
grunt.registerTask('docs-dist', ['sass:docsDist', 'postcss:docsDist', 'uglify:docs', 'jekyll']);
331+
grunt.registerTask('docs-dist', ['sass:docsDist', 'copy:docs', 'postcss:docsDist', 'uglify:docs', 'jekyll']);
325332
// Build WFP UI
326333
grunt.registerTask('build', ['eslint', 'sasslint', 'sass:dev', 'postcss:dev']);
327334
// Build a dist-ready WFP UI with all stati resources

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
"grunt": "~0.4.5",
1515
"grunt-cli": "~1.2.0",
1616
"grunt-contrib-clean": "~1.0.0",
17+
"grunt-contrib-copy": "^1.0.0",
1718
"grunt-contrib-uglify": "~1.0.1",
1819
"grunt-contrib-watch": "~1.0.0",
1920
"grunt-datauri": "~0.4.0",

‎scss/_core.scss‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Dependencies
2+
@import "math.scss";
3+
4+
// Variables
5+
@import "init";
6+
7+
// Base modules
8+
@import "modules/mixins";
9+
@import "modules/flexbox";
10+
@import "modules/icons";
11+
@import "modules/utility";
12+
@import "modules/grid";
13+
14+
// Typography
15+
@import "modules/typography/alignment";
16+
@import "modules/typography/decoration";
17+
@import "modules/typography/leading";
18+
@import "modules/typography/size";
19+
@import "modules/typography/style";
20+
@import "modules/typography/tracking";
21+
@import "modules/typography/transform";
22+
@import "modules/typography/vertical-align";
23+
@import "modules/typography/weight";
24+
@import "modules/typography/white-space";
25+
26+
// Layout
27+
@import "modules/layout/box-sizing";
28+
@import "modules/layout/clearfix";
29+
@import "modules/layout/floats";
30+
@import "modules/layout/position";
31+
@import "modules/layout/spacing";
32+
@import "modules/layout/display";
33+
@import "modules/layout/widths";
34+
@import "modules/layout/max-widths";
35+
@import "modules/layout/heights";
36+
37+
// Elements
38+
@import "modules/elements/headings";
39+
40+
// Theme
41+
@import "modules/theme/colours";

0 commit comments

Comments
 (0)