The U.S. Web Design System (formerly Standards) is currently being used on hundreds of government sites, with an audience of more than 100 million monthly users. In this 10th post in our series, we met with Kyle Jennings, creator of the Benjamin WordPress theme (and Franklin plug-in) using the System.
Jennings is a full stack WordPress developer, who worked on the former GSA Sites.USA.gov program.
System team: How did you find out about the U.S. Web Design System?
Kyle Jennings: I found out about the System (formerly Standards) a couple years ago when I started working on the Sites program.
System team: Tell us about the Benjamin theme (and great name, by the way).
Kyle Jennings: Benjamin is a flexible WordPress theme built using the U.S. Web Design System. It allows users to change the layout of content of about 10 different templates, and change basic color schemes to meet their specific tastes. It also has a companion plugin, called Franklin, which allows people to inject components as short codes, digital search support, and video headers. I built it in the hopes of growing WordPress usage in the federal sector and presented it at the 2017 DC WordCamp conference.
It is very dynamic and people can add as many components to a page as they want.
System team: Do you know of others using the theme?
Kyle Jennings: It’s difficult to know for sure, because GitHub doesn’t give you that information, but I’ve had a couple of people favoring it on GitHub and pinging me for features. I’ve also heard from a few people at GSA who are getting ready to use the theme.
It received lots of positive feedback from people at the IRS and State Department, after presenting it at the 2017 DC WordCamp,.
System team: Did you run into any issues with the Web Design System when creating your theme?
Kyle Jennings: I had a few issues with the components in creating Franklin. The biggest issue I had was with the grid system. I’m used to using Bootstrap & Foundation, which are really robust and legible, easier to implement with dynamic WordPress themes. This wasn’t as easy to use and there were a couple instances where things broke when I was working on this about a year ago.
Another issue is that some of the other components were highly coupled, so I couldn’t take a component and drop into a different area of the site without it losing its styling, so I had to refractor a few things to make them work. I know a low of these issues have been worked out since I built the theme a year ago, so I’ll have to update it with the latest changes.
System team: Any future plans for additions to Benjamin?
Kyle Jennings: My biggest hurdle right now is getting it into the WordPress repositories, which are run by volunteers who have their own acceptance criteria. I’ve almost had it accepted in the past, and trying to make sure everything is properly translatable, and not missing anything.
I would like to help people structure their posts to look different than pages in WordPress, so you could have specific pages for YouTube, for example. I’d also like to restructure the customizer area so it’s a little easier to navigate. A long-term goal I have is to add a feature allowing other plugin authors to create their own color schemes for this theme, which could go through a vetting process first.
This interview is motivating me to go back and add features!
System team: What’s the foundation for this theme?
Kyle Jennings: It’s built using the great Underscores theme as a foundation, but 90% of the functionality is built from scratch.
System team: Is there anything the System team could do to help you in your efforts?
Kyle Jennings: I wished the grid was named more like Bootstrap or Foundation Grid, where it uses column 1, etc.
System team: Will look at this, this year as others have mentioned this.
Kyle Jennings: I also wish there were more pre-designed templates in documentation, to figure out what to build. Right now there’s a documentation page and a landing page, but more pages that look like normal websites, would be inspiring to figure out what I can make more dynamic or reusable.