Skip to content

undp/design-system-starter-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

UNDP Design System starter template

Boilerplate project for sites using UNDP Design System

What's included?

Baseline stylesheet (17KB minified and gzipped)

  • Grid system
  • UNDP official web typefaces: ProximaNova and Söhne
  • basic HTML elements styling:
  • 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>