ProDemos Design System

Design System for ProDemos.nl

Purpose

  • Provide a single visual source for the design elements of ProDemos.nl.
  • Serve components and assets for the actual ProDemos.nl website to prevent code duplication.

Techniques

In this design system we use the following techniques:

  • CSS3 build with SASS
  • Twig 2 templates
  • SVGs for icons and images where possible
  • All of the code is in Git version control

How to use this design system?

To include the design system in your own project, look at the README.md in github. The system contains two parts: an assets folder and a demo. You are currently reading demo/html/index.html. For your own project, you only need the assets folder; it contains css, fonts etcetera, but also Twig components you can reuse in your own project. It may contain Vue components later.

In general,

  • For plain html: include assets/css/main.css and optionally assets/css/reset.css in your html pages, and you'll be able to access pds css variables and predefined classes in your html.
  • For sass: Copy the assets (images,fonts,etc) to a public folder and include the following code before your own styles: @use "...path-to-pds/sass/settings" with ( $assets-path: "...path-to-assets" ); @use "...path-to-pds/sass/reset"; // optional @use "...path-to-pds/sass/main";
  • The css defines themes (pds-t-{theme}), components (pds-c-{components}) and general modifiers (pds-m-{modifier}), and nothing else. It should not conflict with your own css.
  • Including assets/main.css before your own css will not change anything to your design. At least one of the elements on your page should use one of the classes defined in the design system to actually use the design system. For example, adding the 'blue-01' theme to your body (<body class="pds-t-blue01">) will change the look of the page. Including assets/reset.css before your own css will probably change your design a bit, as it defines font-sizes, line-heights, box-sizings and such on a global level.
  • Themes can be specified by class="pds-t-{theme}". Themes will be inherited, so you can start with a <body class="pds-t-blue01"> to have the whole page in the corporate theme. The theme will mainly affect the design of pds components below it.
  • Components have a class="pds-c-{component}" and subcomponents may have classes like class="pds-c-{component}-{subcomponent}". The classes may contain component modifiers, like 'primary' or 'disabled'; such modifiers should only mean something inside the component.
  • Modifiers, with a class="pds-m-{modifier}", are like inline styles, in that they only modify the appearance of the immediately contained content. For example, class="pds-m-colored red" changes the (text) color of the element to red.
  • To access sass variables, methods and mixins defined in PDS, include the pds namespace in any child sccs file: @use "...path-to-pds/sass/pds"; h1 { font-size: pds.fontsize(l); }