xprog-ds

XPROG Design System

Usage no npm install needed!

<script type="module">
  import xprogDs from 'https://cdn.skypack.dev/xprog-ds';
</script>

README

Prerequisites:

  • If you use Next.JS at least version 9.3.x
  • React and React-dom (16.13.x)
  • npm install sass (latest implementation dart-sass)
  • There is no need to use preprocessors like node-sass-chockidar. React team has built in the sass-loader in last updates.

Use xprog-ds on your project:

  • npm install xprog-ds
  • Create index.scss file (here you can redefine tokens [@forward 'xprog-ds/styles']
  • Import xprog-ds router in your index.scss file [@forward 'xprog-ds/styles/router.scss']
  • Create router.scss file (here goes all imports from your components [@forward 'path-to-component']
  • Import router.scss in your root index.js file (pages.js for next)
  • For every file SCSS you want to use the xprog-ds you must @use 'path-to-your-index.scss' as *;

Styleguide documentation:


Lear about dart-sass implementation: