This styleguide no longer accurately reflects the Common Design.
Refer to Common Design demo for Drupal 8 and for generic Common Design styles and markup.
This site is an evolving list of components and resources for OCHA websites.
The guide is a living document created to meet the needs of OCHA's developers and designers. If you have any feedback, questions or comment please contact [email protected]
The Common Design is a unified design system for OCHA platforms.
OCHA Basic is a minimal starter theme for Drupal incorporating the Common Design header and footer.
The individual component libraries are intended to document the front end for the project.
- None at the moment
UNOCHA Graphics Style Book (pdf)
The styleguide uses the following tools:
Additionally, using RVM and NVM (Ruby/Node Version Manager) makes it easy to stay on the right version of Ruby and Node without disrupting your other projects.
git clone [email protected]:UN-OCHA/styleguide.git
rvm use
bundle install
If you run into issues installing nokogiri
try following the package installation/upgrade commands for your system in this nokogiri GitHub issue.
nvm use
npm install
gulp --tasks-simple
: Get a full command listinggulp dev
: Run the site in development mode. It will compile everything (including Jekyll), launch browser-sync for multi-device testing, and watch the filesystem for new changes:
Default URL is http://localhost:4000/
There's a local config file _config.dev.yml
which upon completing npm install
should be ignored by version control. You can add any local-specific Jekyll config there for testing, and leave _config.yml
for production values.
If we ever want to set defaults in the dev config run the following command to allow git to "notice" the changes, commit them, then run npm postinstall
to reset the working tree so that the file will continue being ignored.
# https://stackoverflow.com/a/43535767/175551
git update-index --no-skip-worktree _config.dev.yml
Gulp is used to generate CSS from Sass. You can use gulp dev
as an all-in-one command for regular development, but here are a few single commands you might find useful:
gulp sass
will generate:
- OCHA Basic extras styles (
gulp dev:sass:ochaextras
) - Common Design styles (
gulp dev:sass:commondesign
) - Styleguide styles (
gulp dev:sass:styleguide
)
There are Sass sourcemaps included for developer convenience, but they should be excluded when finalizing changes. There is an npm task that allows a "production" compile to run, which then presents the changes for review:
npm run deploy
Since this repo is public, each user on GitHub is permitted to fork the repository to their personal account. When you want to stage something for review, there is a different procedure than when submitting changes for inclusion in the official styleguide.
- Navigate to https://github.com/un-ocha/styleguide and use the "Fork" button in the upper-right. Fork it to your personal account.
- Once the repo appears, copy the fork's URL using the Clone or Download widget.
- If you already have a local copy of the styleguide you need to add this URL as a
remote
using the following command:git remote add YOURNAME YOUR-REPO-URL
. - If you never cloned the styleguide before now, it will automatically name the remote
origin
and for now you don't have to worry about where your code ends up when pushing.
- Create a copy of the
master
branch and call itgh-pages
— then push this to your personal fork in order to allow PRs to be staged:git co master; git co -b gh-pages; git push -u YOURNAME gh-pages
🔗 GitHub provides up-to-date docs for deploying GitHub Pages websites.
Using the link as a guide, we recommend you configure your repository to build off of gh-pages
so that you aren't merging to master when staging changes. Doing so would require force pushing or other git gymnastics later on once the work has been merged to UN-OCHA/styleguide
and you pull those changes into your master.
In the personal fork, you may create PRs against one of two base branches:
Deploying: Create a PR against UN-OCHA/styleguide
:master
that will be sent immediately to production upon merging.
Staging for review: Create a PR against YOU/styleguide
:gh-pages
to provide others with a staging URL for review or QA. See your repo's Settings to find out where the staging URL is located.
The OCHA Basic section uses styles from the OCHA Basic repository.
||Filename||File format||Dimensions||Reference||
|logo.png|PNG|60x60|see logo: https://pocam-sandbox.dev.unocha.org |
|favicon.ico|ICO|48x48|[https://raw.githubusercontent.com/UN-OCHA/ocha_basic/master/favicon.ico]|
|favicon-16x16.png|PNG|16x16|[https://github.com/UN-OCHA/ocha_basic/blob/master/favicon-16x16.png]|
|favicon-32x32.png|PNG|32x32|[https://github.com/UN-OCHA/ocha_basic/blob/master/favicon-32x32.png]|
|safari-pinned-tab.svg|SVG|see ref >|[https://github.com/UN-OCHA/ocha_basic/blob/master/safari-pinned-tab.svg]|
|apple-touch-icon.png|PNG|180x180|[https://github.com/UN-OCHA/ocha_basic/blob/master/apple-touch-icon.png]|
|android-chrome-192x192.png|PNG|192x192|[https://github.com/UN-OCHA/ocha_basic/blob/master/android-chrome-192x192.png]|
|android-chrome-512x512.png|PNG|512x512|[https://github.com/UN-OCHA/ocha_basic/blob/master/android-chrome-512x512.png]|
|mstile-70x70.png|PNG|70x70|[https://github.com/UN-OCHA/ocha_basic/blob/master/mstile-70x70.png]|
|mstile-144x144.png|PNG|144x144|[https://github.com/UN-OCHA/ocha_basic/blob/master/mstile-144x144.png]|
|mstile-150x150.png|PNG|150x150|[https://github.com/UN-OCHA/ocha_basic/blob/master/mstile-150x150.png]|
|mstile-310x150.png|PNG|310x150|[https://github.com/UN-OCHA/ocha_basic/blob/master/mstile-310x150.png]|
|mstile-310x310.png|PNG|310x310|[https://github.com/UN-OCHA/ocha_basic/blob/master/mstile-310x310.png]|\