How We Use Molo Design System
“Now, a pattern library in itself is a lovely thing. However, we know that its true power lies in being directly integrated into the system for which it is intended”
Graham Smith — clearleft.com
One of the crucial aspects of web development is making sure that your application is easily accessible to the people who are using it. At Praekelt.org we build responsive mobile websites optimised for people living in low-bandwidth environments using the Molo stack. Molo Design System helps us to deliver reusable, optimised HTML and CSS across our sites, this article will explain how it fits into our infrastructure and what the benefits have been..
Molo
Molo is built using the Django framework and Wagtail CMS. Molo provides a set of tools and plugins for creating and publishing mobile web applications that are primarily compatible with low-end and feature phones. The web applications built on Molo are published as standalone websites and can also be launched on the Facebook Free Basics platform — which requires strict adherence to a set of coding rules and feature phone capabilities with little support for Javascript.
Frontend Guidelines
Here at Praekelt.org we have a set of front-end coding guidelines that we use to reference how we should apply things, we use a combination of BEM and SMACSS methodology with SASS because this informs building semantic markup. It facilitates easier layering of componentized elements. The Molo core scaffolding enables you to ship packages, environment configuration settings, templates and database migrations into your applications, together with the Molo Design System serves as a single source of truth for our frontend templates, which helps us to maintain a cohesive UX, common taxonomy, to enforce a modular approach and good quality code. This prevents developers from applying different solutions in projects, making it harder to follow and maintain code in the long run, especially because teams change.
As a front end developer, this requires a shift in the way I approach building, mapping and documenting components, investing in a pattern library, our internal Molo Design System has been a logical way of presenting the design patterns and streamline our work approach.
What is a Design System?
A Design System is a collection of design elements that appear multiple times on a site or a UI inventory (i.e. buttons, links, icons, article teasers, navigation menu, mastheads, category menu etc) to help maintain consistent look and feel, which means we don’t need to reverse engineer styles each time we develop something new. We document these design modules and define how they behave, what they look like and how they should be coded to help all front-end developers build standard mobile-ready sites.
I like this idea of thinking and building each design element as individual pieces broken down into modular reusable patterns so they can be easily combined to make a whole template.
Our implementation of a Design System
The Molo Design System describes common visual language we use, such as color palettes, typography and measuring units.
We also document design alterations and states for each module so that we can determine unique components from existing ones and differentiate between variations of these patterns states.
Molo Design System is an effective tool that helps in adopting our naming convention, code familiarity and coding style across projects. We log language translation terms such as a standard call to action words on buttons and links. We document a standard approach of progressive enhancement and responsive design as a styleguide.
Mote
Molo Design System uses an internal Django static site generator called Mote, to surface UI components. Mote gives us a number of capabilities to surfacing components using the Django template syntax and tapping into dummy data via JSON
How we define a pattern in Mote
Molo Design System pattern is made up of a title, link to open pattern on a new window and a pattern description — what the pattern does, where it lives and how it works, and the visual components are surfaced via an iframe.
You can toggle to different variations of a pattern e.g. Button variation and its implementation code, a copy and paste-able bit of markup that a developer will need.
We have broken down patterns into the following groups:
Basics
Obvious and simplest form of pattern variations such as logos, menu, category navigation, breadcrumbs, thumbnail, form fields and more.
Components
Complete UI pattern variations such as header, navigation menu, footer navigation, hero article teasers, article teasers, mastheads and more
Templates
Full page layout variations such as the index page, section and subsection pages and article page.
Challenges
Creating a Design System was a daunting task at first, because with each small pattern I created, I had to think of a different scenario that it had to fulfil in order to be truly modular and reusable. I would then consider more scenarios after creating the pattern which means going back to tinker and refactor it further. This makes the initial work for a small piece of design take much longer, but we reap the rewards of having encapsulated patterns that are easier to construct.
The Molo Design System is not a perfect tool but an evolving tool that we constantly tinker with in order to best incorporate it into our development workflow.
This seemingly constant wrestling with the right level of abstraction is worth it.
We now have a clear and concise methodology for implementing our styling, allowing for great code reusability, in a way that encourages best practice when it comes to building or reskinning our sites.
The Molo Design System is not only for developers, but can be used by designers and UX managers to collaborate on designs. It serves as a one-stop shop for reference when discussing website designs, design features and iterations, thereby extending creative direction and context to everyone involved in the process.
The concept of Design Systems methodologies has now become foundational in the way I approach and create web applications. Molo Design System’s creation has been a new and enriching experience for me at Praekelt.org and it’s now my primary way to work.
