Kiba-CSS

Kiba-CSS (Keep It BEM-aligned with CSS Utilities) is a starter CSS framework that combines the power of BEM methodology with utility classes, providing the best of both worlds.

It is designed to serve as a solid foundation for web projects, allowing developers to build upon it and customize it according to their specific needs.

With Kiba-CSS, you can kickstart your project with a well-organized and modular code structure, thanks to the BEM methodology. This ensures that your styles are maintainable and scalable as your project grows.

Additionally, Kiba-CSS offers a wide range of utility classes, enabling you to apply quick and easy styling to your elements.

Combining BEM Components with Other Frameworks

One of the benefits of using Kiba-CSS is the possibility to use BEM components with other frameworks or libraries, such as Tailwind.

Kiba-CSS provides standalone BEM components that can be used without the need for any utility classes, allowing for greater flexibility in styling. This also means that developers can use Kiba-CSS BEM components with utility classes of other frameworks, creating a seamless and efficient styling experience.

Available BEM Components

Kiba-CSS currently offers the following BEM components:

• Container
• Grid
• Form
• Button
• Table
• Navigation

These components could actually be added to any project with BEM architecture. It can be easily customized and extended to fit the specific needs.

Get Started

Check out the Get Started Guide for more information.

Install with npm

npm install kiba-css

Afterwards all Kiba-CSS files should be located in the dest directory.

SCSS partials which take advantage of variables and extensions can be found in src/scss/partials.