A design system library template for css styles, fonts, colors and svg icons.
Import and use as a css-modules.
Then create your component like in this example:
React
import module from '{module-name}.module.css';
export const App = () => {
return <div>
<div className={`${module.style1} ${buttons.style2} ${buttons.style3}`}>
Styled Component
</div>
</div>
}Vue.js
import module from '{module-name}.module.css';
document.getElementById("app").innerHTML = `
<div>
<div class="${module.style1} ${module.style2} ${module.style3}">
Styled Component
</div>
</div>
`;Source files is structured as ff:
...
├── src
│ ├── bundle
│ │ └── index.scss
│ ├── components
│ │ ├── buttons.scss
│ │ ├── colors.scss
│ │ ├── icons.scss
│ │ ├── index.scss
│ │ ├── snackbars.scss
│ │ └── typography.scss
│ │ └── ... any other components
│ ├── constants
│ │ ├── colors.scss
│ │ ├── icons.scss
│ │ ├── index.scss
│ │ └── typography.scss
│ │ └── ... any other constants
│ ├── fonts
│ │ ├── ... all fonts
│ │ └── otherfonts.scss
│ ├── helpers
│ │ ├── helpers.scss
│ │ ├── index.scss
│ │ └── mixins.scss
│ ├── misc
│ │ └── example.scss
│ ├── modules
│ │ ├── buttons.module.scss
│ │ ├── colors.module.scss
│ │ ├── demo.module.scss
│ │ ├── icons.module.scss
│ │ ├── snackbars.module.scss
│ │ └── typography.module.scss
│ │ └── ... any other modules
│ ├── svg
│ │ └── ... all svg icons
│ ├── App.tsx
│ ├── main.tsx
│ └── vite-env.d.ts
...Modify and change scss files as needed and apply these on App.tsx
Install dependencies
yarnRun development demo to preview changes
yarn devRun development demo to preview mdcss changes
yarn gendocsThen, if you want to try out and see how your changes will compile, run build:
yarn buildA new folder dist and style-dist should appear and contain the compiled scss files and generated mdcss deocumentation.