DesignSystem

A design system is a standardized set of UI features and design patterns, such as components, layouts and visual styles, that form the foundation for an application’s UI.

Design systems help teams deliver a consistent, high-quality user experience with increased code reuse, shorter time-to-market and lower total of of ownership.

Read more about design systems and their benefits.

Documentation is an essential part of a design system, as it helps team members keep track of the available UI features and use them as a basis for all their design and implementation work. Design System Publisher is the quick and easy way to create a documentation website for your own, Vaadin-based design system.

Design System Publisher is available for Prime and Enterprise subscribers. If you are already subscribed and need help with getting started, contact our experts through Expert Chat. No subscription? Start free trial.

Features

Use the Vaadin Design System documentation as a starting point

The installer provides you with a copy of the Vaadin Design System documentation as a starting point, so you don’t have to write all documentation from scratch. Simply customize and extend with your own theme, components and documentation.

Updates to the Vaadin Design System can be merged into your own documentation using Git.

Screenshot 2021-05-27 at 13.50 1

 

 

Add your theme and components as dependencies

Packaging your theme and components into dependencies allows them to be used in the documentation website and multiple Vaadin applications without duplication.

Dependencies

Write documentation in the AsciiDoc markdown format

AsciiDoc is a human-readable mark-up format with a simple syntax for formatting text and embedding content and code snippets, which Design System Publisher compiles into web pages.

 
Date Field

// tag::description[]
A composite date input field with separate sub-fields for day, month and year.
// end::description[]

=== Read-only
Use read-only when content needs to be accessible but not editable. Read-only elements cannot be edited, but they do participate in the tabbing order and can thus receive focus. The contents of a read-only input can be selected and copied.

 

Live, interactive Java and Web Component samples

Live components and code samples can be easily embedded into the documentation. Both Java (Flow) and TypeScript based components are supported.

docs-code-example

Create your own UI documentation website in 8 easy steps

1. Create a custom theme

Create a new reusable theme and add your style tokens and custom CSS into it, as described in the tutorial.


my-theme
├── components/
├── images/
├── fonts/

└── styles.css

 

2. Package and Deploy Your Theme and Components

Export the theme and your custom components either as separate packages or into a single JAR file, and deploy them into your local Maven repository.


> mvn install -DartifactId=my-design-system

 

3. Initialize a New Documentation Website Project

Install the vaadin-cli command-line tool, run the command to initialize a new documentation website project, bundled with the Vaadin Design System documentation as a starting point.


> npm i -g @vaadin/cli
...
> vaadin-dsp init

 

 

4. Add Theme and Component Dependencies

Add your theme and component dependencies to the documentation website project’s pom.xml.


<dependency>
<groupId>com.my-org</groupId>
<artifactId>my-design-system</artifactId>
</dependency>

 

5. Write Your Own Content

Add documentation pages and UI samples with code snippets for your custom components and tweak default Vaadin content to match your own UI standards.


= Date Field


// tag::description[]
A composite date input field with separate sub-fi month and year.
// end::description[]

6. Brand the Website

Adjust the styling of the website itself to match your own brand by tweaking a few CSS variables.


--docs-font-family
: ‘Inter’;
--docs-header-background-color: orange;
--docs-heading-text-color: orange;

7. Start It Up!

Make a development build and run the website locally.


> npm run dspublisher:start

 

8. Deploy to Production

Finally, when you’re happy with the initial content, you can make a production build and deploy the website to your organization’s server and let your team start designing and developing


> npm run dspublisher:build

No active Prime or Enterprise subscription? Start free trial.

olli-cutout

Any questions? Browse the documentation or contact us directly to learn more.