CSS Toolkit

CSS Toolkit is a lightweight and scalable collection of CSS utilities. It uses an expressive approach to writing lightweight, scalable utility classes that are easy to write and understand.

The toolkit does not impose any theme-specific styles or UI components, so you're free to architect your code in the way that you want.

Only 2.5kb gzipped!

Homepage: http://css-toolkit.com Source: https://github.com/adsric/css-toolkit

Quick Start

Choose one of the following options:

1. Download and add the main file of the CSS Toolkit in the header of your project. For example:

   <link rel="stylesheet" href="css-toolkit/dist/toolkit.min.css">

   Or use the CDN Link

   <link rel="stylesheet" href="https://npmcdn.com/[email protected]/dist/toolkit.min.css">

2. Install with npm: npm install css-toolkit And build your website-specific theme styles in your build process with PostCSS. For example:

   @import "css-toolkit";
   
   :root {
     --body-color: #fff;
     --body-bg: #333;
   }

3. Clone the git repo — git clone https://github.com/adsric/css-toolkit.git - and explore all the code!

Features

• Designed with progressive enhancement in mind.
• Modular-based development.
• Modern CSS features (Future-proof).
• Includes:
  • autoprefixer adds vendor prefixes, using data from caniuse.
  • custom media queries CSS spec to to have semantic media queries.
  • custom properties & var() transformation of native CSS spec custom properties.
  • custom selectors CSS spec to create your own selectors.
  • reduced calc() allows you to use safely calc with custom properties & var().
• No Side Effects – things behave exactly as expected with design-agnostic semantic classes.
• Unassuming – styles that don’t dictate what things should look like.
• Extensive inline and accompanying documentation.

Documentation

Take a look at the documentation table of contents. This documentation is bundled with the project, which makes it readily available for offline reading.

Browser Support

• Edge
• Firefox 28+
• Google Chrome (latest)
• Internet Explorer 11+
• Opera (latest)
• Safari 6.1+

License

The code is available under the MIT license.