atomic design principles desired longer-term design sy ... · atomic design principles desired...
TRANSCRIPT
Atomic design principlesLast updated: 12/12/18DESIRED LONGER-TERM DESIGN SYSTEM
ATOMIC DESIGN
EXAMPLE: BUDDYPRESS MEMBER LIST
ORGANISM
Molecule: List header
Molecule: List item
Molecule: List pagination
MOLECULE: List item
ATOMS of Molecule List item
Styles inventoryLast updated: 12/12/18Focus: INDIVIDUAL GROUPS
NAVIGATION
BUTTONS
SINGLEITEM NAVIGATION SECONDARY SECTION NAV
PRIMARY CTA BUTTONS
SECONDARY BUTTONS
BUDDYPRESS BUTTONS
ALERTS
MESSAGE
FORMS
FORUM TOPIC
BBPRESS INFO
OTHER UI
SEARCH
ORDERING
SELECTORS (radio buttons, check boxes)
PAGINATION
DOWNLOAD
TABLES
DOCS TABLE
LISTS
BUDDYPRESS MEMBERS
FILE LIST
Including folder sidebar
Folder location indicator
GROUP HEADER
SECTION HEADER
PRIMARY HEADER
SECONDARY HEADER
Style GuideLast updated: 12/12/18Focus: INDIVIDUAL GROUPS
Arial, Regular Arial, Bold
ABCDEFGHIKJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIKJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non tellus vitae tellus accumsan pulvinar. Aliquam a enim sagittis, tristique nisl id, sollicitudin
est. Mauris dignissim vel orci id placerat. Sed fringilla ante at diam efficitur, quis sollicitudin velit suscipit. Donec ultricies, ipsum nec vulputate dictum, eros
odio imperdiet elit, imperdiet dictum odio nisi a risus. Cras condimentum at magna condimentum iaculis. Nulla justo metus, pulvinar iaculis mauris nec,
porttitor dignissim velit. Aliquam erat volutpat. Vestibulum in auctor ante. Quisque pellentesque risus ut est sagittis tristique. Pellentesque a vulputate
neque. Mauris tristique luctus felis et dictum. Donec odio sem, malesuada in dignissim sed, blandit sit amet ex. Donec fringilla convallis metus ac lacinia.
Quisque porttitor, lorem eget euismod feugiat, tellus tellus accumsan ante, in viverra mi justo in sapien.
COLORS
TYPOGRAPHY
PRIMARY
#F58D58
#EAEAEA
#E1CA82
#777777
#FFEAA6 #E6DB55
#888888
#FFFFE0#F0F8FF#CEE1EF
#1C576C #AAAAAA#555555#1A1A1A
#3FC2F3 #6FC175 #000000
SECONDARY
BODY TEXT
HEADER STYLES
H1 CUNY Academic Commons Subcommittee
H2 Headline style
H3 Headline style
H5 Headline style
H4 Headline style
H6 Headline style
ICONOGRAPHY
User Survey – Draft – For Comment Written by Samantha Raddatz in CUNY Academic Commons Subcommittee, CUNY Academic Commons Team
Updated 2 years, 9 months ago
User Survey – Draft – For Comment
TEXT LINKS HOVER STYLE
http://cuny.is/groupcunyacademiccommonssubcommittee