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
-
Install the package
npm install @itamar.wmde/wikit-css
-
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
-
Clone this repository
git clone git@github.com:wmde/design-system-components.git
-
Install dependencies
cd design-system-components npm install
-
Run Storybook
npm start
-
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