At the most complex levels of CSS development, front end software is developed by assembling reusable components, or design patterns. These are different than the design patterns created by the Gang of Four. Rather, they are agreed upon User Interface building blocks that have been agreed upon by both design and engineering teams. At Grubhub, we create these patterns as bundles of CSS code that can then be easily exported and attached to HTML for assembly on external client apps.
Reflecting on the term API development, I’ve begun to conceptualize this collection of CSS bundles as Design API development. If we consider a library like jQuery, for example, the usage is exactly the same. An engineer will import the library, look up the available methods, and then use those building blocks to create their own software. In the same way with our library, Mochi, we can import bits of the library and quickly spin up a grubhub themed web page.
API development has typically been used to describe Java or backend programming. But as we can see from this quote, the term is certainly applicable:
“Application program interface (API) is a set of routines, protocols, and tools for building software applications. An API specifies how software components should interact. Additionally, APIs are used when programming graphical user interface (GUI) components. A good API makes it easier to develop a program by providing all the building blocks. A programmer then puts the blocks together.”
How does our API work?
Our Design API is super simple, as are most front end style guides. We expose bundles of CSS styles that you can import into your application for consumption.
Let’s take a closer look. I want to rapidly prototype a new page. To do that I need a heading and a button. I’ll import buttons.scss and typography.scss. When I create my own software I will write:
<h1>Heading</h1> <button class="”s-btn”">Button</button>
As you can see, we have a lot of future use for our Design APIs. Since we kept the code base CSS only, it is easily exportable into any application on the web. When Code Pen projects was launched, we were quickly able to produce rapid prototypes and provide working links to external parties. The uses are endless: quick demos for stakeholders, working prototypes that can be user tested, fleshed out ideas that design can hand off to developers. We also currently use the API in all sorts of different small scale applications: email templates, marketing modules, even our phone directory. Having a flat, CSS only system ensures its flexibility.
September 17, 2016