wfp / designsystem Goto Github PK
View Code? Open in Web Editor NEWWorld Food Programme User Interface Kit. Developer kit for implementing WFP web style guideline.
Home Page: http://www.wfp.org/UIGuide
License: Apache License 2.0
World Food Programme User Interface Kit. Developer kit for implementing WFP web style guideline.
Home Page: http://www.wfp.org/UIGuide
License: Apache License 2.0
wfp/ui
Over the past year, we've been trying to create a fairly universal package/library of UI styles and components for inclusion in both, offline, and online web projects, such as WFP Give, or WFP.org.
Due to the fact that no web project is made equal, and some use a lot of different ways of including sources, we cannot continue to ship this package with precompiled or minified files, ready for production, because this creates an enormous amount of work for maintainers (currently, only me).
In addition, it has no real benefits for others, since the static precompiled CSS and JS (in the future), would end up on CDN anyway, which currently is done manually with a Shell script.
In order to solve the above issue, and focus on providing a stable UI framework in a handy package, we should:
bower.json
);Gruntfile.js
);wfp/ui
as a Bower-only package, and use a separate repo for CDN-only builds (this could include .sh
files and other bits);wfp/ui
into a universal package for both, inclusion in web projects (via Bower), and for building/deploying CDN-only static sources (via NPM/Grunt);Feel free to chip in with your comments and observations.
This repository needs a readme.md
file, to ensure people who intend to use it, know how to perform all the things this package can/will do.
It has been noted that there are several sizes of icons which are not being supported by the UI Kit at present.
For example:
Add automated TravisCI tests for the following aspects of the UI Guide HTML:
src
's to ensure they are valid (use broken link detector)In order to quickly assess and test the UI Kit implementation, we should create add a basic, single HTML page which implements all of the components of the UI Kit.
The HTML page should reference the built, local CSS files.
test.html.txt is basic attempt I made (warts and all) based on a previous version of the UI Kit which could be used as a starting point / suggested approach.
In order to get an overview of the UI Kit files and structure,it would be useful to have:
build
sass
map, process it via PostCSS (with a supporting map).dist
sass
map, process it via PostCSS (without a map), and get its JavaScript checked via JSHint.watch
grunt-contrib-watch
module.Bower installs to _components
.
.bowerrc
Using the form components from: http://cdn.wfp.org/guides/ui/v0.8.0/components/forms/
I adding required="required"
to the following fields:
This was the output:
required
fields do not look significantly clear that they are required to be completed.select
lists and others too).required="required"
being used on the UI Guide.From Marco:
When checkboxes and radios are rendered with labels displayed after inputs (instead of inputs being wrapped inside labels), they are not being displayed inline.
<input type="checkbox" id="edit-user-email-verification" name="user_email_verification" value="1" checked="checked" class="form-checkbox">
<label for="edit-user-email-verification" class="option">Require email verification when a visitor creates an account</label>
@andrewholgate suggested using ESLint instead for JSHint for testing, and I totally back that up, as ESLint seem to be the new standard, but also surpasses JSHint in several areas:
Note
Please, port the initial configuration from JSHint to ESLint during the implementation.
Based on the all new tests implemented via sasslint
, we need to fix issues outlined by this tool in the codebase.
Some issues are not directly fixable, as the depend on third-party components, such as grunt-datauri
. Such issues should be omitted and/or reported to a given tool maintainer, if they haven't been reported already.
# Use the following command to test SCSS without rebuilding all sources
$ grunt sasslint
To improve compatibility with other frameworks, we need to prefix all classes with wfp-
. This applies to:
We should look into moving all CSS class declarations into a separate SCSS document, and apply the prefix globally via SCSS.
This issue depends on #5 to be completed first.
Since WFP UI is full of useful resources, we should prepare and add all variants of the WFP logo.
srcset
attribute inside img
tagIcon fonts pose a huge accessibility issue for people with certain vision deficiencies.
People with dyslexia often have special software or fonts installed on their operating system, which override web fonts specified by websites and applications, in order to increase their readability.
More on the issue:
checkbox
references an invalid path;checkbox
should be available in the input itself and documented;The project is using different and outdated file comments. These should be updated and standardise project-wide
For example, the following are different and one is out-of-date:
The standard file comment format we propose to use is (as an example for wfpui+grid.css
):
/*!
* WFP UI with grids, v0.7.0
* Copyright 2016 WFP/Matthew Morek
* License: https://github.com/wfp/ui/blob/master/LICENSE
*/
The 0.7.0 documentation makes reference to the Responsive Nav JS library.
This library is not available in the repo nor part of the grunt build.
Grids are an important part of this package and need to be documented, in order for implementers to be able to use them effectively.
Static files needs to be gone, in order for us to be able to introduce dynamic build toolkit via Grunt.
wfpui.css
wfpui.min.css
wfpui.min.scss
Currently, certain icons give little to no indication of their general purpose, such as query-builder
instead of time
, etc.
Icon names should be scrutinised and adjusted if necessary.
We'll have three patterns for the footer:
The style and hover effect applied makes it seem as if the ellipsis is clickable (like the numbered pagination buttons).
As the ellipsis is not clickable, it should look distinct from the numbered pagination buttons. See wfp/wfp-theme-d8#21 for details.
As a UN organisation, we need to be accessible.
This example looks good: https://playbook.cio.gov/designstandards/visual-style/#text-accessibility
More research is needed to gather all the facts.
Marco has suggested moving assets
directory under dist
, as these resources are fairly static, and could be easily referenced from outside wfp-ui
.
In this way we can just copy the content of the the
dist
folder without the need of picking in different place all the needed files to havewfp/ui
working correctly. โ Marco
I am regularly having to send links with references specific sections of the guide, such as http://cdn.wfp.org/guides/ui/v0.7.0/components/navigation/#inline-menu
The issue is that I need to manually add the target anchor id to the end (eg. #inline-menu
).
It would be useful to implement anchor markers, as per this example for quick linking to the specific heading of the guide.
This pattern is not entirely consistent across different implementation. We need to radically improve this pattern with the following principles in mind:
The following style should be adopted (and possibly improved upon):
To make sure all our releases are ready for prime time, it would be great to integrate this repository with Travis CI. This will let other developers using our repository know, that it is stable and well-maintained for integration with their projects.
The following Grunt tasks will have to be tested:
grunt build
grunt dist
grunt docs-build
grunt docs-dist
This issue should be re-opened, if any additional tasks/checks need to be added to the Travis CI build.
WFP UI Bootstrap theme needs an update, to ensure visual similarity to WFP UI.
bootstrap.html
;This will be tricky, because markup changes are by nature volatile and not backwards-compatible.
"Look and feel" changes should be considered for the major version change, when it comes to the UI kit. I would treat this with a bit more complexity:
This needs to be defined, possibly on the homepage, and in the readme.md
for future reference.
To ensure we can use spacing elements that conform to the same sizing standards as buttons (for example, for pagination [...]
ellipsis elements, we need a totally transparent button, using following spec:
.not-button {
color: #404040;
border-color: transparent;
background-color: transparent;
}
We need documentation to use relative paths, to avoid problems when juggling URLs and paths on CDN.
Reference:
http://ricostacruz.com/til/relative-paths-in-jekyll.html
Following the addition of automated build tests via Travis CI, it would be good to add automatic deployments to the CDN to the stack for the master
branch.
/guides/ui
;/dist/docs
;docs-dist
;/docs/_config.yml
;/libraries/wfpui/{tag}
;/dist
, excluding /dist/docs
;dist
;The idea to merge wfp/ui-guide
into wfp/ui
could be implemented in the following way:
wfp/ui-guide
to a docs
directory in the root of wfp/ui
;wfp/ui
as a guide to what's available and what is not;dist/docs
directory, ready for upload to the CDN.Some components from the UI Guide should get reimplemented in the UI kit, such as the offscreen navigation.
New UI icons are needed. If any more are required, please add them to the list below.
share
eg.: https://design.google.com/icons/#ic_sharelink
eg.: https://design.google.com/icons/#ic_linklink-external
eg.: https://design.google.com/icons/#ic_open_in_newdownload
eg.: https://design.google.com/icons/#ic_file_downloadupload
eg.: https://design.google.com/icons/#ic_file_uploadedit
eg.: https://design.google.com/icons/#ic_mode_editUse the following packages for inclusion in devDependencies
:
autoprefixer-core
bower
;grunt
;grunt-cli
;grunt-postcss
;grunt-sass
;node-sass
;grunt-contrib-jshint
;grunt-contrib-watch
;private
set to true
;.gitignore
:
node_modules
;dist
(future temp dir for pushing dist-ready CSS to CDN);ignore
list in bower.json
;bower.json
docs;This is quite important, as essentially, WFP UI Kit runs on PureCSS, so there's no need for additional override classes.
The library is stable enough for us to absorb it fully and lose pure-
namespace prefix from CSS classes, in favour of wfp-
, giving us more control over the way things work, look, and feel about this UI kit as a result.
The initial version to integrate is the latest stable: v0.6.0
: https://github.com/yahoo/pure/releases/tag/v0.6.0
Buttons need a visual overhaul, as there have been concerns about their similarity to other form elements, especially inputs. In addition, we need to bring back some slight affordances to make those buttons stand out more from other UI elements. This will positively impact accessibility.
Header for public-facing sites, including the WFP logo, etc. Use extended, standard and emblem logos depending on media query.
Depends on #45.
.wfp-header-ext
Currently the wfp/ui
does not have a hide class that is supported by screen readers.
Bootstrap solution:
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
However, there are more comprehensive options shown in the third source:
.element-invisible {
position: absolute !important;
height: 1px; width: 1px;
overflow: hidden;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
_utility.scss
Source:
http://getbootstrap.com/
http://stackoverflow.com/questions/1755656/displaynone-vs-visibilityhidden-vs-text-indent9999-how-screen-reader-behave-w
http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
Due to how much some developers like to use Bootstrap as their main framework, we need to ensure they can benefit from having similar, if not the same UI without using WFP UI Kit. This is because both frameworks are not entirely compatible.
Fortunately, Bootstrap has use of bootstrap-theme.css
which acts like a "skin" for the framework, and if loaded after the main bootstrap.css
, it overrides Bootstrap's original styles.
The best way to include it in the build process, might be to use a separate SCSS file (bootstrap-theme.scss
), which would depend on the WFP UI Kit.
In order to benefit from consistent implementation of UI and Thematic icons in WFP UI, Grunticon seems to be the best tool for managing our SVG-based workflow, out of many different approaches.
Currently, footer--links
subcomponent is only available inside footer--compact
and footer--std
, but it should be available also within footer--mini
.
This is to ensure consistency in displaying links, even within smaller footers.
Check and add/update all CDN references to the following resources/assets:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.