@giotramu/css-kit

A tiny CSS scaffold for quick, consistent, and scalable user interface development.

Usage no npm install needed!

<script type="module">
  import giotramuCssKit from 'https://cdn.skypack.dev/@giotramu/css-kit';
</script>

README

CSS-Kit

A tiny and opinionated CSS scaffold for quick, consistent, and scalable user interface development.

NPM CI Status

CDN usage

Copy/paste the link tag in the head of your index.html document:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@giotramu/css-kit/lib/styles/css-kit.css"
/>

Webpack usage

Install CSS-Kit and save them to your package.json dependencies:

npm install --save @giotramu/css-kit

Install the Webpack bundler by following the official documentation and import the css-kit.css as a dependency in the CSS or JavaScript file of your choice.

Import CSS-Kit in CSS:

@import '~@giotramu/css-kit/css-kit.css';

Otherwise, import CSS-Kit in JavaScript:

import '@giotramu/css-kit/css-kit.css';

In webpack.config.js, be sure to use the appropriate loaders:

module.exports = {
  //--- Other webpack configuration stuffs...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

Color palette

CSS-Kit has a pre-configured color palette. Test foreground and background color combos for compliance with WCAG 2.0 minimum contrast.

Color CSS Custom Property Value
accent-high var(--ck-color-accent-high) #0c57fb
accent-low var(--ck-color-accent-low) #0072ff
base-high var(--ck-color-base-high) #202d3a
base-low var(--ck-color-base-low) #5a5c6a
light-high var(--ck-color-light-high) #e1eaee
light-low var(--ck-color-light-low) #fafafa

Dark color scheme

Copy/paste the following script tag in the head of your index.html document:

<script
  defer="true"
  crossorigin="anonymous"
  src="https://cdn.jsdelivr.net/npm/@giotramu/css-kit/lib/scripts/color-scheme-switcher.js"
></script>

Set the triggers for switch the color scheme light/dark:

<button data-ck-trigger="set-color-scheme" class="icon-switch rounded muted">
  <span class="sr-only">Toggle color scheme</span>
</button>

<!-- Totally optional -->
<button data-ck-trigger="unset-color-scheme" class="icon-switch rounded muted">
  <span class="sr-only">Unset color scheme</span>
</button>

Optionally, you can set the initial color scheme by adding the attribute data-color-scheme to the root tag, with the light or dark keywords:

<!DOCTYPE html>
<html lang="en" data-color-scheme="dark">
  <!-- ... -->
</html>

Font

Copy/paste the link tag in the head of your index.html document:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@giotramu/css-kit/lib/font/giotramu-sans.css"
/>

Use the custom font in your styles:

body {
  font-family: giotramu-sans, sans-serif;
}

Browsers support

  • Chrome & chromium based browsers (last 3)
  • Firefox (last 3)
  • Firefox ESR
  • Opera (last 3)
  • Safari (last 3)
  • iOS Safari (last 2)
  • Edge (last 3)

License

MIT License