A set of composable CSS modules that provide a solid foundation for starting a new project.

This kit is based on the SUIT CSS methodology including naming convention, style format, and architectural principles.

Basic visual tests are in test/.

There are several ways to use these modules in your project.

The recommended method is to simply copy each file into your project as necessary and import them in the same fashion as in the example below. This allows changes to be made easily and provides a better reference for developers diving into the stylesheet.

The quick and easy way is to install the entire repository through npm, then import and configure the modules in your stylesheet.

/* import the entire kit */
@import 'style-kit';

/* or pick and choose modules */
@import 'style-kit/lib/grid';
@import 'style-kit/lib/utils/size';

/* configure modules */
@custom-media --utils-size-sm (600px);
@custom-media --utils-size-md (800px);
@custom-media --utils-size-lg (1000px);

:root {
    --Grid-cell-gutter: 24px;
}

Modules will need to be processed with PostCSS and an assortment of PostCSS plugins. The suitcss-preprocessor can be used, or you can setup PostCSS yourself with the build system of your choice.

For an example of a simple build script see test/build.js

The following PostCSS plugins are required:

• postcss-import
• postcss-custom-media
• postcss-custom-properties
• postcss-calc
• autoprefixer