Introducing the Siteglide Design System

Why does Siteglide not offer Templates or Themes?

Many agencies are used to using Templates/Themes to speed up the development flow but often this causes problems/issues, devalues the service and leads to bad practice. We believe in Frameworks and following Best Practice standards. As a result we have created the Siteglide Design System which offers a Framework to deliver quality solutions to clients every time and with hugely increased efficiency.

What is a ‘Design System’?

“A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” -

What is different about the Siteglide Design System?

The Siteglide Design System (DS) takes the fundamentals of a standard Design System but integrates it tightly into the front end development process when building websites into Siteglide.

There are 2 elements to the Siteglide Design System:

  1. Design Process - Figma
  2. Development Process - Layout Library

In Figma (an online design tool similar to Sketch, Photoshop) an agency would take the various modular layouts and piece them together into Page Templates and Page Layouts. The design process with the client can be far more efficient as they can quickly mockup wireframes and clients can comment on and interact during the process.

Once designs are signed off the development team (internal or dev partner) would take the corresponding Bootstrap 4 Responsive layouts available in the Siteglide Layout Library and build out Templates, Pages and other functionality based on these as a starting point and customise according to the signed off designs in Figma. This is not only extremely quick and efficient but should guarantee accuracy first time too. Overall this process offers significant benefits and no drawbacks.

You have full control to customise the code via Code Editor. You can also insert dynamic features like Modules and WebApps such as a Blog and it work with your site out of the box!

Edit content easily with Visual Editor

Once you’ve customised your Layouts you and clients would be able to edit any pages and layout sections in our Visual Editor. The Editor will show how the site actually looks with your custom CSS/design. This is great for clients to be able to quickly make content changes once the site is built without breaking code.

Introducing Visual Page Builder

Having built a slick and easy to use Visual Editor we decided to help developers build pages visually too. We took the basis of the Visual Editor but opened up the ability to piece together pages using the same layout blocks from Layout Library.

This becomes really powerful and completes the flow from initial wireframe design in Figma all the way through to development and ongoing improvements to a website. Your marketing team or clients can then build complete new pages using the structure layouts that will also apply any global stying you’ve set.

Normally these kind of tools are for static websites and are quite limited in terms of being able to do anything more complex. We’ve made Visual Page Builder work on top of the core product meaning you can use all the powerful tools such as WebApps and Modules and then manage static content around it. This gives you total control over building every element of a page the right way whether it should be a Module, custom WebApp or static content.

Key Benefits:

  1. Save Time - quickly wireframe a site using our Design System to get client signoff
  2. Best Practice - Our DS uses the latest principles and standards of good web design
  3. Designer to Developer Handoff - Provide ready to build Designs to Developers
  4. Visual Development - Insert the pre-existing layouts and edit them using our Visual Page Builder. This is great for Designers/Marketers to build quickly.
  5. Total Control - Many design tools don’t allow for much customisation or flexibility, with Siteglide your developers would have total control via Code Editor or the CLI
  6. Integrated Modules - Install Modules with one click and insert them into pages using DS layouts within a few clicks. Then fully customise if you want to.

published on


July 17, 2019



Luke Wakefield



More about Siteglide