@afp/toolkit-styles

This module is designed to contain SCSS styles used commonly by toolkit-ui and toolkit tools.

Usage no npm install needed!

<script type="module">
  import afpToolkitStyles from 'https://cdn.skypack.dev/@afp/toolkit-styles';
</script>

README

Toolkit-styles

This module is designed to contain SCSS styles used commonly by toolkit-ui and toolkit tools.

Installation

Installation via npm
npm install @afp/toolkit-styles

Then in your entry js :

import '@afp/toolkit-styles'

or in Sass :

@import url('~@afp/toolkit-styles');

If you need the variables in Sass :

@import "~@afp/toolkit-styles/src/scss/variables.scss";

Requirements

  • NodeJS

Developement

Just npm install then npm run dev and the page will open in your browser. Feel free to modify this file to add new markup, and to modify styles in the scss folder.

Node watch these files and automatically rebuild the CSS styles in dist/ folder.

The build process also allow fonts and images (like icons).

Build and publish

npm run build, then you can publish your module with npm publish.

Contributing

The colors should be set in colors.scss

Every other variables that must be accessible in toolkit ui or toolkit tools should be set in variables.scss. But don't apply styles in that file.

Styles should be applied in every component file (inputs.scss, buttons.scss) and the main file (main.scss).

Don't modify index.scss. It just includes the necessary lines to init the project.