Updating this website
When you're ready to start editing, continue to Netlify CMS.
Editing pages
Before making a change to a pattern or its documentation, visit Hubcap to read our Design System governance policy. It contains guidance and acceptance criteria for making minor and major changes to the Design System.
We use a content management system called Netlify CMS. It’s powered by GitHub and will let you edit any page of this website.
Go to the page you want to edit and click its "Edit this page" pencil icon.
Log into the CMS by clicking the "Login with Github" button.
You'll need a github.com account and you'll need to be added to CFPB's GitHub organization.
If you're new to GitHub and need to be added to this organization,
post a message in the Design System mattermost channel and someone will assist you.
Edit content in the left hand pane of the CMS. Preview your changes in the right hand pane. Check out our sample component page for tips on how to structure a typical page.
Click the blue 'Save' button in the top left to save your changes as a draft. Don't worry, the live site won't be affected. Netlify CMS will build a temporary version of the website with your changes so that you can preview them. After you click the 'Save' button you can close the tab and come back to it later if you want, your temporary changes will persist.
After you save some changes, Netlify CMS will build a preview of the entire website with your new content. This takes a few minutes. When the preview is ready you’ll see a "View Preview" link at the top of the editing page. Feel free to share this link with your peers if you’d like feedback on your new page.
When you are ready to publish your changes, set the page's status to "Ready". Then click the “Publish” drop down menu and choose "Publish now."
Hooray! After you publish, our servers will re-deploy the live website and you'll see your changes in a few minutes at https://cfpb.github.io/design-system.
Ready to edit the page?
Creating new pages
Before adding a pattern to the Design System, visit Hubcap to read our Design System governance policy. It contains guidance and acceptance criteria for creating new patterns.
- To create a new page from scratch, click the “Create new page” button below.
- After logging into the CMS, you’ll be taken to a blank page in the CMS. Follow the “Editing pages” steps above to edit and preview your new page.
- If you’re unsure what sort of content you should add to a new Design System page, check out our sample component page. Click its “edit” button to view the sample content laid out in the CMS.
- If you’d like your new page to appear in the side navigation, see below.
Editing the side navigation menu
- To add new pages to the side navigation, or to rearrange the order of existing pages in the navigation, click the “Edit the side navigation” button below.
- After logging into the CMS, navigation sections and their pages can be added, edited and removed. You’ll see a preview of the side navigation in the right-hand preview pane.
Uploading images
When editing a page, click the + icon to add an image. Select an image from the current library or upload a new image from your computer. Note: Due to a bug in Netlify CMS, the image might not immediately appear in the preview pane.
