Bringing the U.S. Web Design Standards to Drupal
In September 2015, designers and developers alike cheered as 18F released a modern and unifying style guide for how government websites should look.
Prior to the release of the design standards, users had often complained about the confusing and outdated user interfaces of the different visual styles in government websites. The standards tackled these issues with a complete overhaul of common web elements such as:
Converting the Style Guide into Drupal themes
Since Drupal powers a large (and growing) number of federal websites, it was a no-brainer for CivicActions to start thinking of how to port the U.S web design standards into Drupal themes. We started planning a CivicActions Labs project to build a Drupal 7 theme based on the styleguide.
We soon discovered that Fureigh at 18F and Alex Brown at Appnovation had already created a Drupal.org sandbox and a GitHub repo for the project, and we gladly joined forces with them.
Our Development Goals:
Our aim is to build a lightweight and minimal Drupal version of the web design standards. Since the standards were built to provide basic building blocks and tools for clear UI direction, we are working on translating that same flexibility and simplicity to the Drupal themes.
Theme template markup will be stripped and refined, strict BEM-based CSS syntax will be followed, code patterns will be reused, and above all, Section 508 standards will be upheld and maintained in every part of the theme.
We also plan to add and style a number of Drupal-specific elements which are not part of the design standards. These common elements, when styled and customized, will give the Drupal 7 and 8 themes a finished and professional look.
You can explore more details about our planning and work in the github issue: https://github.com/18F/web-design-standards-drupal/issues/15
Get involved
This project is very much a work-in-progress. We have tickets to spec, tasks to perform and more than enough work to go ‘round. You can see our progress so far in the Demo Site (still in its infant stages!).
So go ahead, grab a fork and start churning out awesome code. We’d love to have you! We also really appreciate folks getting involved in the issue queues with questions, ideas, and creating new issues etc. Every bit of input counts.
Links
The 18F Github repoWaffle board
Sample fork -- The CivicActions repo
Find out more about the standards:
Introduction to the U.S. Web Design StandardsView the Design standardsHere’s a fantastic podcast where Ethan Marcotte & Karen McGrane interview two members of the 18F team: Mollie Ruskin and Julia Elman
Topics