Introduction

The Siteglide Design System is an optional core module to assist partners in building responsive websites, efficiently.

It is a code framework based of Bootstrap 4, a library of best practice layouts (Layout Library) and a design file for wireframing and agreeing high fidelity designs with the client. This helps create an efficient flow from design through to sign-off and then developer hand-off.  Essentially a set of stylesheets that allow you to easily set and maintain code standards across all of your sites.

How to Install the Module

To install the Design System Module, tick the box on site create or find it in the list of Modules in Portal under site settings.

When is Design System CSS and JS applied?

Even with the Design System Module installed, we know you may not wish to load the Design System CSS and JS on every Page. We carry out checks to see whether to load the assets:

  • On the Page Template, the "Use Design System" checkbox allows you to load Design System assets on all Pages that use this template.

However, even if that checkbox is unticked, the assets will still load if:

  • You include a WebApp or Module and select a Layout which lies inside a "design_system" folder. These Layouts are designed to require Design System, so the assets will be loaded.

If you really don't wish to load the assets on a Page, but you do want to use one of these Layouts, you have two choices:

  • Make a copy of the Layouts in a new folder (without Design System in the name)
  • Add the parameter allow_content_for: 'false' to each WebApp or Module include tag which uses Layouts in a "Design System" folder.

How the Module fits into the rest of the Siteglide Design System: Using Figma and Layout Library

To use layouts from Layout Library go to the following link and click copy raw code against your preferred layouts: https://layouts.siteglide.com

You can also design sites using our Design System Layouts in Figma.
Here is a 'view only' demo: Siteglide Figma Design System V2.0.1

When you're ready to get started just download our Figma file and import at https://www.figma.com to get started:

Live Version:
Siteglide Figma Design System V2.0.0

Beta Version:
Siteglide Figma Design System V2.0.1

Did this answer your question?