README
CSS-Kit
A tiny and opinionated CSS scaffold for quick, consistent, and scalable user interface development.
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 |
---|---|---|
var(--ck-color-accent-high) |
#0c57fb |
|
var(--ck-color-accent-low) |
#0072ff |
|
var(--ck-color-base-high) |
#202d3a |
|
var(--ck-color-base-low) |
#5a5c6a |
|
var(--ck-color-light-high) |
#e1eaee |
|
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)