dusk-ui-kit v1.0.18-alpha

:sparkles: Dusk UI Kit :sparkles:

About the UI Kit

The UI Kit is based on Dusk's media kit. Dusk launched it's new branding in 2019, with a focus on marketing. Moving into 2020, we will begin to develop an overarching Branding Guidance document which will provide a single source of truth for all of Dusk's communication channels.

Presently, we have built on the existing guidelines, however, we expect to transition to using a typical Brand Guidance approach.

Purpose

The purpose of the UI Kit is to create a unified toolkit that is used by designers and developers in their projects, ensuring all Dusk projects are accessible and have a consistent look and feel.

The guidelines contained herein are to be applied to all of Dusk's digital products.

Web Toolkit

By bringing design, user experience, accessibility and functionality into reusable components, we can accelerate the speed of development and increase consistency and reliability of Dusk products.

The components within the UI Kit are organised according to the principles of Atomic Design, providing a high level of composition.

Installation

$ yarn add dusk-ui-kit

Import a React component

import { Button, Card } from 'dusk-ui-kit/components/atoms'
import { Block } from 'dusk-ui-kit/components/molecules'
import { Feature } from 'dusk-ui-kit/components/organisms'

Import the styles

@import 'dusk-ui-kit/styles/index.css';

Development

Clone and install

$ git clone https://github.com/dusk-network/dusk-ui-kit
$ cd dusk-ui-kit
$ yarn

Run the dev server

$ yarn dev

• Develop components in the /components folder
• Tell component stories in *.stories.js
• Override Bootstrap variables in /styles/theme/dusk/variables.scss
• Override Bootstrap styles in /styles/theme/dusk/styles.scss

Run the design system server

$ yarn design-system

Create a new build

$ yarn build

Latest Design

https://xd.adobe.com/view/f3f6eb08-9076-47d8-4261-75b8af8e3424-85c7/grid

Roadmap

• Integrate with Storybook for Design System presentation
• Integrate Jest and write initial tests
• Migrate to Emotion for styling
• Integrate with Bit for component management

If there is a component you need or if you have any questions please open an issue!