From personal experience, I know that the development of frontend solutions often proceeds as follows: In the best-case scenario, wireframes are first defined in various steps. Subsequently, during the design process, these are dragged through the common Adobe products and typically transformed into a more or less complete mixed bag of .psd, .jpg, .png, .svg, etc. files and various fonts, then handed over to the "themer."
The following step therefore begins with an identity crisis for the frontend developer.
At this point, we are at a crossroads. It's not uncommon to choose the seemingly easier path. Page by page, various HTML constructs are positioned and styled according to the design. One feels somewhat dirty, but there are no discussions with the designer, and after all, the client approved every single pixel. In the worst case, one hack after another finds its way into the theme, and after the first one or two thousand lines of CSS at the latest, maintainability is no longer a consideration.
Alternatively, the design can be painstakingly reverse engineered. The template is first interpreted and then divided into individual logical components. The resulting building blocks are then implemented piece by piece in CSS and applied to the theme as effectively as possible. Less messy, but still not ideal.
Both scenarios are absolutely suboptimal for various reasons. The "Adobe2Theme" model is unacceptable for both the designer and the developer, for reasons of human dignity.
An Alternative in Frontend Development
In our opinion, the development of frontend solutions is an integrated and fluid process that, contrary to the description above, does not begin with wireframing and end with theming. To address this, we have been using Living Styleguides for some time now.
A Living Styleguide (often also called a "Pattern Library") is an HTML, CSS, and JS-based graphical representation of an application's user interface components. Unlike a simple Photoshop file or a static styleguide, e.g., in the form of a rigid text document, a Living Styleguide displays full-fledged prototypes of the individual anticipated components of the developing application as independent components under realistic conditions in the browser. In contrast to a static document, individual components can be easily extended and derivatives derived. The independent preparation of each component creates a special focus on semantics and the optimal implementation and structuring of HTML and CSS. The original concept is continuously validated in this process. A particular advantage of this approach is the almost mandatory, complete preparation of typography as a so-called basic component.
The use of a Living Styleguide is therefore not solely documentation and a building instruction manual, but an essential part of conception, design, and implementation. Because: The effectiveness of a Living Styleguide is also particularly dependent on the ideology and workflows it necessitates and conveys.
In other words: If the themes we develop were delicious tarts, then the styleguide would be the pastry base, not the whipped cream topping!
By using a Living Styleguide, all parties are involved from the very beginning. This prevents misunderstandings between designers and developers and builds mutual understanding, while all participants gain insights into each other's fields of work. Specifically, this means that our designers can now represent a large part of their work themselves in Sass, CSS, and HTML. The styleguide thus increasingly becomes a result of interdisciplinary teamwork and not just final documentation or processing of the handed-over design.
Another advantage lies in the continuous extensibility of the styleguide and its flexibility concerning changes (maintainability). Furthermore, this approach enables cross-project reuse of all components as well as parallel expansion by multiple development teams. Instead of reinventing components for different projects with the same corporate design, these can be taken from the styleguide and, if necessary, extended. The styleguide can thus also be recognised by the client as a useful, standalone product.
A Look Ahead
This is the first blog post in a series about Living Styleguides. Now that I have explained our philosophy regarding frontend development and styleguides, we will soon delve into the tools and practices we use.
