SIA Web Design Library

Build

Component layers

Components are organised in numbered layers from atomic to full-page:

Layer Folder Examples
00-brand Brand tokens colors, typography, icons, logo, themes
01-base Base HTML elements button, forms, grids, tables, typography
02-unit Small UI units avatar, card, tag, date, badge, hero, media
03-group Composed groups activity, profiles, ventures, events, articles
04-region Page regions site-header, site-footer, navigation, app-bar
05-entity Full entity views project, profile, organization, venture, user, post
06-template Page templates dashboard, search, onboarding, error-pages
07-demo Demo/preview fixtures —

Build system

Gulp tasks handle:

  • SCSS → CSS: compiled with dart-sass, autoprefixed, minified in production, with LTR/RTL direction support via Sass variables
  • JavaScript: concatenated, stripped of comments, uglified in production
  • SVGs: optimised via gulp-svgmin
  • Fractal server: live-reloading dev server with BrowserSync

Run with gulp (dev) or gulp --prod (production build).

Twig helpers

Custom Twig functions defined in fractal.js mirror the theming layer of the platforms this system serves:

  • get_component_class / get_entity_class — BEM class generation with modifier, theme, and layout support
  • get_entity_template / get_template — dynamic template resolution by view mode
  • svg() — inline SVG inclusion
  • clean_class, t() — WordPress/Twig filter adapters

Twig namespaces (@base, @unit, @group, etc.) allow components to include each other across layers.

Relation to the main repo

The docs/publishing-and-play/ folder mirrors plugin READMEs from the parent repository. When plugin docs change there, the corresponding files here are updated to keep documentation in sync.

Recent changes

2.75.0

Docs restructured and homepage updated [*]

The docs are now organised into three sections. The homepage introduces the design system and links to the other two. Build covers the component layer structure, the Gulp pipeline, and the Twig helper functions, and includes a rolling list of recent releases with a link to the full changelog. SIA Publishing and Play mirrors the plugin documentation from the main repository, with an overview and changelog page for each of the ten plugins.

Release date: 10.03.2026

Improvements

  • Rewrite docs/01-index.md with accurate platform description (WordPress, not Drupal) and links to the Build and SIA Publishing and Play sections
  • Rename docs/website/ to docs/publishing-and-play/
  • Rename docs/changelog/ to docs/build/; add 01-index.md with build overview, component layers, Twig helpers, and recent changes; hide full changelog from nav via hidden: true

2.74.0

Increase the default size of Eventbrite checkout embed

Release date: 26.09.2025

New

  • Set the height to 800 by adding iframeContainerHeight: 800 to the Eventbrite checkout (eventbrite-checkout.twig) unit

2.73.1

Increase the number of auto-styled grids from 10 to 50

Release date: 09.09.2025

Fixes

  • Replace 10 with 50 in the _grids.scss loop of ‘–items-X’

2.73.0

New Snapshot view mode implemented by Program Curriculum entity

A Dashboard section called Snapshot, styled like a dashboard block, shows what’s next, current, and on the user’s checklist.

Release date: 19.08.2025

New

  • New Snapshot view mode for Program Curriculum entity in program-curriculum--snapshot.twig borrowing classes from Dashboard block
  • New inclusion of a snapshot element in the Dashboard template (dashboard.twig)
  • Redesigned Program Module Part full template highlighting progress as task list and the next sessin in program-module-part--full.twig and styled in _program_module_part.scss

Improvements

  • Realigned Program Module full template showing the parts in parallel in program-module--full.twig and styled in _program_module.scss
  • New ‘compact’ Section variant in section.scss for grouping elements without showing the background of a card section, styled in the section.scss mixin for the [class*='--compact'] selector
  • Spacing in task-list.scss unit and meeting-agenda.scss mixin

2.72.0

New connection interface unit, connections and request in refined full profile grouped in a new card Expertise section

Release date: 12.08.2025

New

  • New Connection interface Unit showing a notice and, when needed, a button, in connection-interface
  • Profile full view mode contains an isolated Expertise card card section, including the connection interface, when present, in profile--full.twig
  • A layout Section can now show a card variant, together with a Section header include, an a list of entities, styled in the section.scss mixin for the [class*='--card'] selector
  • Connection statuses are shown via the List item unit (list-item.twig), styled in list-item.scss mixin for the [class*='__message'] selector

Improvements

  • Venture matches are compressed in a card Section in a full profile view
  • People connection unit is now using the generic list-item unit in people-connection.twig and is styled accordingly in people_connection.scss
  • Remove actions from venture-match.twig in list-item view mode

2.71.0

Boilerplate templates and styles for People Connection

Derived from Venture Match

Release date: 06.08.2025

New

  • New people_connection.scss entity styles
  • People Connection entity people_connection templates

2.70.1

Trigger a re-build

The styles were not visible in production.

Release date: 04.08.2025

2.70.0

Provide specific List item templates and styles for Incubation and Discovery Journey phase entities

In order to show them as list items, refactor the templates and include the list item unit in both default views. Also: fix the naming of the group “entity” templates by replacing dashes with underscores.

Release date: 03.08.2025

New

  • Update Discovery Journey Phase templates and create the card variant template (discovery-journey-phase...twig)
  • Update Incubation Phase templates and create the card variant template (discovery-journey-phase...twig)
  • Include the list-item mixin in both entity styles incubation_phase.scss & discovery_journey_phase.scss
  • Create a refined UI for the workflow-info elements in the much leaner list-item.scss (compared to card) sub-items of dashboard-block.scss

Fixes

  • Replace - with _ in both learning_group.scss and expert_pool.scss

2.69.0

Include the Supporters overview in Drupal views adapter

Release date: 23.07.2025

New

  • Page class includes grid in adapter/drupal-8/views.scss

2.68.0

Group expertise fields in Expert Profile

Release date: 21.07.2025

New

  • Display all 4 expertise fields grouped for an expert in profile--full

For the full history see the changelog.