Welcome to SandwichUI

This is the UI kit that powers the Simppler applications and websites, our living design documentation, and a Fabricator-powered prototyping tool used by the designers at Simppler.

What is sandwich?

Currently SandwichUI includes all styles and the suggested markup for the basic components and more complicated modules that make up the UI of the Simppler applications. Future versions will include:

• each element will link to it's React Storybook page
• the styles and markup for the modules in the Grav-powered marketing site as a separate CSS file
• design guidance on coding standards for Sass/CSS used in Sandwich
• official build chain procedures documented

tldr; This kit is currently in beta. We are still ironing out the bugs.

Why is it called sandwich?

While we were talking about modularizing our front-end, We got tired of talking about Legos as the metaphor for modular UIs and design systems. We tried to come up with other things that are modular, and it turns out sandwiches are another thing in the world that is built modularly. It was also probably lunch time. It makes us smile, so the name stuck.

Usage

You can use all the styles from this kit by:

<link rel="stylesheet" href="assets/toolkit/styles/sandwich-ui.css">