UNDP Design System starter template

Boilerplate project for sites using UNDP Design System

What's included?

Baseline stylesheet (13.3KB minified and gzipped)

• Grid system
• UNDP official web typefaces: ProximaNova and Söhne
• Design System variables available as CSS custom properties (variables)
• basic HTML elements styling:
  • H1-6 headings
  • Paragraph text & links
  • Inline elements (abbr, blockuote, cite, code, mark, quotation)
  • Image and Video default styling, including captions and credit
  • Table
• served via jsDelivr CDN with <20ms latency

Ready to use static site generator

Inspired by ZURB Template

• Sass compilaton. Using DartSass library with source maps support.
• Javascript compilation. Transpiled with Babel, bundling is handled via Webpack
• Assets copying for distribution. Image compressed and optimized using imagemin
• Page compilation. Based on flat file compiler Panini using Handlebars template language
• Development mode with BrowserSync server, file watching and on the fly compilation
• Content decoupled from layout for easy translation via data files

Dependencies (referenced from external CDN)

• jQuery
• GSAP with ScrollTrigger and EasePack plugins - animations and transitions
• Swiper - carousels and sliders

Usage

Clone project repo locally To manually set up the template, first download it with Git:

git clone https://github.com/undp/design-system-starter-template projectname
cd projectname

Install dependencies

npm install

Run development server (at http://localhost:8000)

npm run start

When ready for publication build production ready assets (published to /docs directory)

npm run build

Don't forget to relink Git to your own repository:

git remote set-url origin <remote_url>