ksface v3.2.3

KSFace

KSFace is a real minimalistic stylesheet boilerplate, with some optional React components on top.
You can choose what you want to use in your application.

The main idea behind KSFace is, providing a startpoint / boilerplate with all the things you probably need in nearly every project, without serving out-of-the-box fully styled components!

You dont have to use React to be able to use KSFace's stylesheet boilerplate!

How to use

Simply install KSFace into your project via npm:

npm install ksface

After installing, import the ksface.css file from /dist folder into your projects stylesheet.
Thats it! Simple as that... you can use the KSFace stylesheet boilerplate classes now.

Styles

KSFace includes a few prepared css style classes and settings, useful for every project as a starting boilerplate.

Just checkout the styles docs at the left sidebar of KSFace's Storybook (https://storybook.ksface.com).

There is a description how to use it inside of your react app for each style class.

React components

Want to go a step further and use the KSFace react components?

Just checkout the components docs at the left sidebar of KSFace's Storybook (https://storybook.ksface.com).

For each component, there is a description how to use it inside of your react app and a interactive live demo.

Customization

Important: If you use customization / scss import, please remove the default ksface.css file import from "How to use" (if used before) and only import KSFace from scss further on.

Your project needs to be able to handle and compile SASS (.scss) files, if you want to modify the default stylesheet of KSFace.

You are able to modify the default variables set within /src/scss/variables.scss by overwriting them inside of your scss file (before importing the index.scss file from KSFace).

After setting your overwrite variables, simply import the "index.scss" file from /src folder into your projects scss stylesheet.
For example, to overwrite the default font-size property in your applications scss stylesheet:

$font-size: 24px;

@import 'ksface/src/index.scss';

If you need an overview of all available variables, simply check out "Variables" at the left sidebar of KSFace's Storybook (https://storybook.ksface.com).

Made with ❤️ by Kevin Schmidt