http://cfpb.github.io/design-manual/
Development is in progress; content and design are not final.
This is the repository for CFPB's Design Manual for developing print and web products. It contains both the assets and the content for the site.
The Manual is an open-source resource built to help employees and contractors efficiently produce consistent print and web products. The guides and assets included in the Manual put our Design Principles into practice, helping CFPB build clear, consistent and accessible products.
The Manual will include CFPB's design goals and principles, guidelines for user experience, identity standards, and code snippets for common user interface elements. Our internal design and development team collaboratively developed the Manual over the past six months, but it will grow and change as we design new products and add staff.
Releasing the Manual to the public increases transparency and allows you to help us make improvements. The Manual is open source, so we’d love for other agencies, developers, or groups to adapt it for their own use. Many style guides influenced the Manual, including Mozilla's, MailChimp's, BBC's, but our primary inspiration is the UK's Government Digital Service's Government Service Design Manual. We hope ours is one small step towards unified, quality, user-centric design across all US government websites.
The site is built using Bower, Grunt, Jekyll, and LESS.
We use NodeJS, Node Packaged Modules and Grunt to help make lots of development tasks easier within our Design Manual. Let's get those installed if you don't have them already.
Install NodeJS however you'd like. We use Homebrew. That's:
brew install node
Install Node Packaged Modules:
npm install
Install Grunt, a JavaScript task runner:
npm install -g grunt-cli
Now, on to Jekyll. Jekyll generates and serves our Design Manual as a website.
Be sure to have Jekyll and redcarpet installed.
gem install jekyll
gem install redcarpet
Fork and clone the repo:
git clone git@github.com:cfpb/design-manual.git
cd design-manual
Run Jekyll:
jekyll serve --watch --baseurl ''
Options within the _config.yml file allow you to control the site's title, subtitle, logo, author information, and the left column navigation.
This is an excerpt from the Jekyll docs on configuring your URL for Project Pages.
Sometimes it's nice to preview your Jekyll site before you push your gh-pages branch to GitHub. However, the subdirectory-like URL structure GitHub uses for Project Pages complicates the proper resolution of URLs. Here is an approach to utilizing the GitHub Project Page URL structure (username.github.io/project-name/) whilst maintaining the ability to preview your Jekyll site locally.
- In
_config.yml, set thebaseurloption to/project-name-- note the leading slash and the absence of a trailing slash. - When referencing JS or CSS files, do it like this:
{{ site.baseurl }}/path/to/css.css-- note the slash immediately following the variable (just before "path"). - When doing permalinks or internal links, do it like this:
{{ site.baseurl }}{{ post.url }}-- note that there is no slash between the two variables. - Finally, if you'd like to preview your site before committing/deploying using
jekyll serve, be sure to pass an empty string to the--baseurloption, so that you can view everything atlocalhost:4000normally (without/project-nameat the beginning):jekyll serve --baseurl ''
This way you can preview your site locally from the site root on localhost, but when GitHub generates your pages from the gh-pages branch all the URLs will start with /project-name and resolve properly.
The project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the CC0 1.0 Universal public domain dedication.
All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest.
