cfpb / design-manual

⚠️ THIS REPO IS DEPRECATED ⚠️ A set of design principles and standards for the Consumer Financial Protection Bureau.
https://cfpb.github.io/design-manual/
Creative Commons Zero v1.0 Universal
98 stars 71 forks source link

Atomic Elements (DM pages) #409

Closed duelj closed 8 years ago

duelj commented 8 years ago

The V1 team is looking to document atomic design elements that will be found in Wagtail for other project teams. We feel the best way to do this is to incorporate this information into the CFPB Design Manual, so that it is available to all project teams (and the rest of the bureau). These pages are intended to fit within the updated Design Manual IA. The intended page additions for atomic documentation can be found here

Content is not fully resolved still would like @schaferj or @sarahsimpson to give input.

Page Summary

These pages will live in the page components section of the updated IA for the Design manual. They will function to give specific use, behavior, style, and content details for atomic elements. Because of the current structure of the DM these pages will feature both molecules and organisms. This is also reflects how they will be seen in Wagtail. Atomic elements at the atom level are already documented on the DM, so there is no need to duplicate those (form fields or typography for example).

Other atomic element pages:

These pages are all based on the same format but have various levels of complexity depending on the element's needs. We think the filter control panel page below is a good representation of a middle of the road representation of this type of page. The other element page links are for your reference so you can see the full library of pages we intend to add.

50/50 image and text

Half-width link blob

Contact info

Email sign-up

Wells

Text introductions

Item introductions

Filter control panel

Full width text

Sidebar/prefooter

25/75 image and text

duelj commented 8 years ago

Review

Request review by @huetingj or @sosan (only probably need one) for design and @sarahsimpson09 for content.

Deadline: Monday May 16 noon

Feedback needed: Can you check over these new design manual page layouts for atomic components to make sure they are ready to be added. Reviewed by


Depending on Needs

Summary: Atomic compontents from V1 work need to be added into the design manual. These pages give specific details on use, behavior, style, and content details for atomic elements. There are multiple element pages that are all based on the same format. We have included links for the files for all of the pages but shared the filterable list control panel as a good representation of the overal format. Audience: Design and dev. @ CFPB Phase of Project: execution (we want to start building these so they are ready for the DM update) Background Information: background information in post above. Happy to share more in a call/HO. Feedback Format: GH feedback would be great but happy to have a meeting to go over things if it feels right.

schaferjh commented 8 years ago

@duelj should we close this issue now in favor of the issues that we've posted?

schaferjh commented 8 years ago

closing this as it was rendered moot by the individual issues @ajbush has finished working on.