84
Building a modular front-end framework and style guide for a large organization Scott Cranfill and Mollie Bates OSCON – June 22, 2015
| Date post: | 15-Aug-2015 |
| Category: |
Software |
| Upload: | molliebates |
| View: | 267 times |
| Download: | 1 times |
Building a modular front-end framework and style guide for a large organization
Scott Cranfill and Mollie Bates
OSCON – June 22, 2015
2
Overview
Problem: How do you keep design and code consistent with
a large, remote team working across disciplines and
different projects?
Our solution, in one sentence: Design and publish your
standards in the open, and build a front-end framework that
enables developers to easily implement and maintain them.
3
CFPB Design Manual:cfpb.github.io/design-manual
Capital Frameworkcfpb.github.io/capital-framework
5
CFPB’s mission
The CFPB is a 21st century agency that helps
consumer finance markets work by making rules
more effective, by consistently and fairly
enforcing those rules, and by empowering
consumers to take more control over their
economic lives.
This is the footer
7
Our core functions
Write rules, supervise companies and enforce
federal consumer financial protection laws
Restrict unfair, deceptive or abusive acts or
practices
Take consumer complaints
Promote financial education
8
Our core functions
Research consumer behavior
Monitor financial markets for new risks to
consumers
Enforce laws that outlaw discrimination and other
unfair treatment to consumers
9
We achieve our mission through
Data-driven analysis
Innovative use of technology
Valuing the best people and great teamwork
This is the footer
11
Technology and Innovation Fellowship
30 fellows hired in January 2013 from all over the
country
• Quadrupled the size of the Design & Development
Team
Second class began in January 2015; 15 retained
from original class and 23 new fellows added
12
Our team today
1 creative
director
7 managers/
producers
11 graphic
designers
9 UX
designers
13 front-end
developers
20 back-end
developers
2 multimedia
13
Our team today
1 creative
director
7 managers/
producers
7 4 graphic
designers
8 1 UX
designers
11 2 front-end
developers
9 11 back-end
developers
2 multimedia
14
Project teams
Teams are mostly remote
1–2 each of UX, graphic design, front-end development,
back-end development
Plus a product owner and scrum master, Agile methodology
Develop in the open whenever possible
• cfpb.github.io/source-code-policy
This is the footer
This is the footer
17
CFPB design principles
1. Public service, public trust
2. Aesthetic integrity
3. Coherent end-to-end user experience
4. Give the user control
5. Design with data
6. Inclusion and accessibility
This is the footer
19
20
This is the footer
This is the footer
This is the footer
This is the footer
25
26
Coding standards
No standard build process
Mixture of Less and straight CSS
Wild west of JavaScript library usage
Coding style anarchy
27
Why we needed shared standards
Large group of designers and developers working on
separate projects, across the country
Off-site contractors working on web products, print
collateral, and marketing
Consistent branding and user experience builds trust
with consumers
This is the footer
This is the footer
30
Design Manual goals
Establish an empirical source of the latest standards
Ensure that employees and contract agencies understand
how to use our brand and UI patterns effectively,
and in a way that is consistent with existing work
Enable other government agencies to use or learn
from our standards
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
42
Join the conversation!github.com/cfpb/design-manual/issues
43
44
“A framework, you say?”
45
What is it?
1. A collection of modular HTML/CSS/JavaScript
components
2. A build process that brings them together
3. A recommended workflow that eases the burden of
keeping the front end in sync across multiple
projects with different developers
46
“You’ve heard of Bootstrap, right?”
47
Because government.
48
Because government usability.
49
Why build our own?
Browser support
Accessibility
• Section 508
• WCAG 2.0 Level AA
Effort
Modularity
Modularity
51
Advantages of a modular structure
Ease of updating
Use only what you need
Encourages contributions
52
Workflow for an existing projectedit project source
edit component source
rebuild component
push component to remote repo
clone
install Grunt
dependencies
install cf or third-party
componentsbuild project
test in browser
This is the footer
54
Workflow for an existing projectedit project source
edit component source
rebuild component
push component to remote repo
clone
install Grunt
dependencies
install cf or third-party
componentsbuild project
test in browser
Component update workflow in detail
cf-buttons1.1.0
cf.gov hmda-site future-project
Component update workflow in detail
cf-buttons1.1.0
cf.gov hmda-site
cf-buttons1.1.0
future-project
Component update workflow in detail
cf-buttonsnew-feature
future-projectcf.gov hmda-site
cf-buttons1.1.0
58
Modifying dependency version for testing
Component update workflow in detail
cf-buttons1.1.0
cf-buttonsnew-feature
cf.gov hmda-site future-project
60
Component update workflow in detail
cf.gov hmda-site future-project
cf-buttons1.2.0
cf.gov hmda-site future-project
This is the footer
This is the footer
This is the footer
64
Capital Framework/Design Manual integration
Design Manual is built on Capital Framework
When design standard is updated, to see in the
manual, must be updated in the framework
Interdependency keeps designers and developers in
sync
This is the footer
This is the footer
67
This is really hard.
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
This is the footer
78
Give it a try!
79
81
Contribute!github.com/cfpb/capital-framework
This is the footer
83
In summary
Problem: How do you keep design and code consistent with
a large, remote team working across disciplines and
different projects?
Our solution, in one sentence: Design and publish your
standards in the open, and build a front-end framework that
enables developers to easily implement and maintain them.
