Design System Framework

Create and maintain web component libraries for websites.

What is this ?

DSF is primarily a way for front-end developers to work and package websites at a component level. DSF helps organize code and maintain a component library. It is especially made to work with websites, not web apps.

If you make themes for CMS (or static pages) and want to organize the way you work, build and communicate on web components (especially with design systems), you found the right tool.

• Simply define components with HTML, CSS and JS
• Import and use existing components
• Styleguide-like UI to develop and test
• Component-level build with Gulp plugins
• Extensible with plugins (UI and build process)

-> Documentation <-

For developers

Keep sources separate

The only requirement is that you use one folder per component, the rest is up to you. Simply tell DSF how to find your HTML, CSS and JS:

{
  "css": "*.css",
  "html": "*.hbs",
  "config": "config.json"
}

No hard coded values

The sources you work on in DSF is the code you are going to use in the application code (HTML, CSS, JS). As such, templates already use variables:

<div class="textfield">
  {{> Atom/Label id=id text=label}}
  <input type="text" id="{{id}}" class="textfield__field">
</div>

This allows to never use hard coded values: they tend to be too perfect. DSF will also help you test your components with different values to make sure your components support names such as Hubert Blaine Wolfeschlegelsteinhausenbergerdorff.

Handlebars is used for templating.

The styleguide is alive

DSF does more than generate a styleguide from your sources: it actively watches you work and rebuilds anything that needs to. You should never have to touch your browser again.

For each component DSF provides always-up-to-date HTML, CSS and JS files. These files are "standalone": they contain your base code (reset.css, your favorite CSS/JS framework) and the component's code. This way you can test faster with lighter setup and cherry on the cake: make sure your components do not depend on each other (tight-coupling).

The UI is fully customizable.

Dependency management

DSF understands your component dependencies and will always build what you need, only what you need.

Build production code

Provided a small configuration, DSF can generate the smallest files possible for production. Since it enforces the separation of components, it can easily generate 2 versions of external assets: the critical path (to be inlined) and the rest (to be loaded asynchronously).

Also:

• Makes refactoring much easier
• Reinforces re-use of components
• Backend agnostic
• Generates test files for all components
• Statistics for each component:
  • code size
  • dependencies

For designers and editors

Up to date documentation

An up-to-date documentation of the design system is an invaluable asset for designers and editors. By using the styleguide sources as the project sources, it's simply impossible for the styleguide to be out of date.

Quickly test copy

A living styleguide allows you to test the limits of components: does this title fit in our homepage? You can simply test your copy in an actual browser, using the actual production code with no programming knowledge needed.

-> Documentation <-