Project Overview
Mashape is a San Francisco startup focused on providing an array of subscription-based and open-source tools for developers. I was asked to provide ongoing frontend development for Gelato, as well as architect a LESS-based frontend development system.
Services Provided
- User Experience Design (UX)
- Frontend Development
Frontend Templates for Gelato.io
After getting my local development environment set up, I began to work on tight deadline to provide HTML and LESS for new and updated application views. As I worked with the existing codebase, I also made continual improvements, often simplifying markup (and providing richer semantics) as well as abstracting to remove redundant styles.
Themable Developer Portals
Gelato is a tool to help development teams publish beautiful, up-to-date documentation for their software. As part of the product, developers can customize colors and graphics to theme their documentation portal to match their brand’s palette and personality. It was a special challenge to develop templates that allowed for controlled flexibility within each theme.
Flexbox: Cutting Edge CSS Layout
Mashape’s customers are highly technical individuals, and typically visit with the very latest browser, so we were able to build new features using flexbox for layout. This meant that adjusting and adding layouts was effortless – even those that would be time-consuming and tricky using traditional float-based layout methods.
In order to provide the best browser support and the cleanest codebase, I created mixins to add vendor prefixes to the flexbox properties. The result was a well-supported, modern layout system that was easy to understand and extend.
/*
** Flexbox Browser Prefix Mixins (LESS)
*/
.display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
.flex(@value) {
-webkit-box-flex: @value;
-moz-box-flex: @value;
-webkit-flex: @value;
-ms-flex: @value;
flex: @value;
}
/*
** Sample Flexbox Component
*/
.component {
.display-flex;
.component-child {
.flex(1, 1, 50%);
}
}Component-based Frontend Development
In order to maintain the ever-growing library of interface components within the Mashape ecosystem, the team decided to build a new component library starting with the smallest UI elements and build up. This structure allows any component to be moved without affecting it’s appearance or behavior. To take it one step further, individual media queries were written within each component, so even responsive behavior would be isolated to one specific block of CSS.
/*
** Sample Component With Media Query (LESS)
*/
.component {
.display-flex;
margin: 2.25rem auto;
.component-child {
.flex(1, 1, 100%);
margin: 0;
}
@media screen and (min-width: @screen-sm) {
.component-child {
.flex(1, 1, 50%);
margin: 0 0.25rem;
}
}
}Frontend Development for Applications
I thrive when working with other designers and developers to design frontend systems that are flexible and maintainable. If you have an application or interface you think would benefit from a hybrid designer / developer such as myself, please don’t hesitate to contact me.
Interested in Working Together?
I’m always looking for interesting problems to solve – if you want to bring your product or website to the next level, I’d love help.
Let’s Talk