wmde/wikit-css

[DISCONTINUED] A repository to hold the design system tokens file and component storybook

This was a prototype built in early 2020. The actual Design System implementation is developed in wmde/wikit repository.

WiKit CSS

Big Bad Disclaimer: This code is only a prototype and by no means meant to be used in anything.

Prototype for a Design System and UI toolkit for WMDE Wikibase.

Using this library

The current stable version of the design system may be viewed at: https://wmde.github.io/wikit-css/

CDN Link (CSS Only)

https://unpkg.com/@itamar.wmde/wikit-css

Using the Design Tokens

CDN Link (CSS Variables)

https://unpkg.com/@itamar.wmde/wikit-css/build/tokens/variables.css

npm Package

1. Install the package

   npm install @itamar.wmde/wikit-css

2. Import Tokens:

   css:

   @import url('node_modules/wikit-css/build/tokens/variables.css')

   less:

   @import 'node_modules/wikit-css/build/tokens/_variables.less'

   scss:

   @import 'node_modules/wikit-css/build/tokens/_variables.scss'

   js (es6+):

   import * as tokens from '@itamar.wmde/wikit-css'

Local Development

1. Clone this repository

   git clone git@github.com:wmde/design-system-components.git

2. Install dependencies

   cd design-system-components
   npm install

3. Run Storybook

   npm start

4. Develop 🤓 💯

Additional commands

Exporting tokens (currently into less, scss, css and js)

npm run build:tokens

Building The css library

npm run build:styles

Building everything (incl. Storybook for publication)

npm run build

Technical Learnings

As mentioned above, this is a prototype. For a summary of the technical learnings gained from this experiment, please see: https://bit.ly/2KpQ941