Getting Started

To make sure your interface follows WFP guidelines with ease, you should use the provided UI kit in your web pages and applications. We offer a number of ways to include WFP UI in your projects.

Bower

You can easily install WFP UI using Bower. Our Bower package contains everything to get you started, from important variables, mixins and defaults available through SCSS, to minified and optimised distributable CSS.

Notice

It's best to compile WFP UI directly to your SCSS main file, in order to benefit from a smaller overall CSS file size, and having a single file to load and render by the web browser. This is because CSS is considered a render blocking resource.

# Install the latest release
$ bower install wfp-ui --save
# Install any particular release
$ bower install wfp-ui#0.7.0 --save

Now, add WFP UI as a dependency to your main SCSS file:

// Import WFP UI
@import "bower_components/wfp-ui/scss/wfpui";
// Import WFP UI + Grid
@import "bower_components/wfp-ui/scss/wfpui+grid";

You can also reference a preprocessed WFP UI library directly in your markup:

<!-- WFP UI -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/css/wfpui.css">
<!-- WFP UI + Grid System -->
<link rel="stylesheet" href="bower_components/wfp-ui/dist/css/wfpui+grid.css">

Grids

WFP UI is available in two flavours: vanilla WFP UI, or WFP UI with Grid System. To find out more about grids in WFP UI, check out information about grids.

Content Delivery Network

Alternatively, you can load WFP UI from our CDN, denoting a version number (i.e.: v0.8.0) in the URL:

<!-- WFP UI -->
<link href="http://cdn.wfp.org/libraries/wfpui/v0.14.0/css/wfpui.css" rel="stylesheet">
<!-- WFP UI + Grid System -->
<link href="http://cdn.wfp.org/libraries/wfpui/v0.14.0/css/wfpui+grid.css" rel="stylesheet">

Offline Use

If your application or website is not able to connect to the Internet, you can use the WFP UI offline. Easiest way to start is to install it with Bower, as per above instructions.

You can also download any particular release of WFP UI from GitHub, copying contents of dist/css directory to your project’s own css, and referencing wfpui.css contained inside.

Notice

The WFP UI is intended to be plug & play, and integrate seamlessly with any front-end framework unobtrusively. Whether you use BootStrap, Foundation, Skeleton, or any other framework, you should easily be able to apply WFP UI styles to your projects.