Integrating Enonic XP with your design systemMorten Eriksen on
Learn how you can couple a design system with Enonic XP, including technology prerequisites, build system, integration points, and more.
The link between a CMS and a design system is HTML, and to couple Enonic XP with your design system you must adapt HTML in the CMS to the design system where necessary. When this is properly understood and prepared, we can take a closer look at the technology prerequisites you need to have in place before starting the integration process.
See how Enonic fits your current architecture and skill set:
A proficiency in Enonic XP is of course also necessary, and Enonic accordingly offers comprehensive documentation, training, and certification to help you get started. Depending on your particular design system, you might also need knowledge about front-end technologies like React, Angular, or Vue.
A build system is a software tool designed to automate the process of application compilation. Build systems come in various forms, and Enonic uses Gradle to build applications and websites. Roughly explained, Gradle transforms your files to an Enonic app that can be deployed in Enonic XP.
Other popular build tools often used in Enonic include:
- Webpack: Fetches other libraries, gathers and minimises code for web deployment
- Less/Sass: Simplifies CSS development
Be more effective: 12 ways Enonic can help you save time on daily tasks »
The page templates are powered by a page controller in Enonic XP, which itself is a template and logic for the shell of your website. In the page controller you also develop your menus.
Enonic XP uses dynamic page rendering and then lets the web editors configure and manage templates by need. The platform is essentially made for reuse, and page templates can be combined with layouts to produce different types of page templates without coding.
The shell of the site includes the header, footer, and menu, and the creation and maintenance of them can be seamless if the design system already delivers the elements. When the design system is involved, it is only a matter of marking the markup with the right data or content in Enonic XP.
Layouts are used to organise the structure of the various component parts that will be placed on a page via Enonic's Page Editor drag and drop. Layouts are configurable, which means you can adjust padding, background, number of columns, and distribution (like 30/70 or 33/33/33).
In a layout you can place different page components, like a text component, an article list, or a subscription form. A coupling with a design system ensures brand compliant use of layouts and component parts.
Page components are page elements or widgets you can insert into your layouts or page templates. Examples include small applications, calculator, article list, and product list.
It's these components that dig really deep into the design system, delivering buttons, images, or interactive elements. Accordingly, most of the integration and work with the design system come in the form of page components.
A prominent component is the text component. This allows you to insert text, images, and links directly on the page. You just need to make sure that all included elements have styling in the CSS.
Show me the money! 6 ways Enonic XP can help your company generate revenue »
In Enonic Market we have a form builder app, ready for use in tandem with a design system.
If the markup of the form doesn't fit your design system, it can be fully customised, due to it being open source. The form builder app can in any case build simple forms for registration, contact, and orders, and with the form requests you can build reports or enable integrations with other systems.
The types of form fields include text line, text area, checkbox, and email, etc.
As a general rule of thumb, your design system should be tested in terms of accessibility and should be maintained to make sure accessibility standards are continued to be upheld. This is especially true when web editors start to manage and edit content in the CMS, in ways that the designers or developers may not have foreseen.
To get quickly on your feet in terms of accessibility, you can use Enonic's Siteimprove integration. This app connects Enonic to Siteimprove, but requires that you have a subscription with the latter. Siteimprove offers, among other things, analysis and recommendations based on SEO best practices and WCAG guidelines.
Front-end vs. back-end rendering
Finally, you should consider the alternative between front-end rendering vs. back-end rendering in relation to your design system. Popular front-end frameworks include the mentioned React, Angular, and Vue, and which one you should choose depends on technology used in your design system.
Today more and more of the experience is delivered in the browser, which can often have a negative impact on performance—especially initial loading. You must choose if all functionality will be placed in the front-end or if you should opt in for a mixture where you deliver back-end rendered markup and handover to front-end frameworks after loading. The latter will give better response time for users.
It is possible to pull this off in Enonic XP, as it is possible to build server side rendered markup, using for instance React. We mention this because front-end delivery only will affect performance and indexing, which in turn will impact SEO and accessibility.
Frequently asked questions
What is a design system?
A system maintaining visual and functional elements in one place, to fulfil brand principles through design, realisation, and development of products and services.
What does a design system contain?
Design systems usually include organisation principles, design principles, components (codes, bars, buttons, cards, icons), and patterns (specifications on how to use components consistently).
How do you build a design system?
Communicate advantages early (scalability, reuse, brand protection), find inspiration from others, keep it simple, start modest and build for scale, use smart documentation and roadmap, build a robust process, collaborate across functions and departments.
What are examples of design systems?
Polaris by Shopify, Material Design by Google, Atlassian Design, IBM Design Language, Airbnb Design, Fluent by Microsoft, MailChimp, Nachos by Trello, Solid by BuzzFeed, Buffer, Apple, Lightning by Salesforce.