K i b a - C S S

						<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/kiba.min.css" crossorigin="anonymous">

Components Getting Started Customize Extend Why Kiba? Github Examples

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.

Getting Started

Looking to quickly add Kiba-CSS to your project? Use the jsDelivr link or download it directly from Github

CSS

Copy-paste the jsDelivr stylesheet <link> or add the path to your downloaded file into your <head> before all other stylesheets to load our CSS.

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/kiba.min.css" crossorigin="anonymous">

Viewport Meta Element

A The viewport meta element lets you control the the width and scale of the viewport on mobile browsers. Since you're building a responsive website, you want the width to be equal to the device's native width

	<meta name="viewport" content="width=device-width, initial-scale=1">

Starter Template

Put it all together, also with the latest design and development standards, your pages should look like this:

	<!doctype html>
	<html lang="en">
		<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- KIBA-CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/kiba.min.css" crossorigin="anonymous">
	
		<title>Hello, world!</title>
		</head>
		<body>
		<h1>Hello, world!</h1>
		</body>
	</html>

Package Manager

Alternatively Pull in Kiba-CSS source files into nearly any project with a package manager like npm

npm install kiba-css

Customize

Determine which modules you need

While the kiba.min.css file contains all components, including utility classes, the base with rules for the HTML and body element, the components.min.css file only includes the base with rules for the HTML and body element without utilty classes.

Name	Url	Size
kiba	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/kiba.min.css	17kb
Components	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/components.min.css	11kb

Individual Components

You can also pull in the following components individually.

Name	Url	Size
Container	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/container.min.css	1kb
Grid	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/grid.min.css	7kb
Form	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/form.min.css	3kb
Button	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/button.min.css	1kb
Navbar	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/navbar.min.css	1kb
Table	https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/table.min.css	1kb

Extend

One of our goals when developing Kiba-CSS was to make it highly extensible. By incorporating Kiba-CSS and adding your own CSS on top of it, you can ensure cross-browser compatibility while achieving a truly unique look for your site or app. The best part is that your CSS file size will remain minimal, which is especially beneficial for mobile users and those with slow connections.

Based on BEM

Kiba-CSS is based on the BEM methodology, which promotes modular and reusable CSS code. By following BEM's guidelines, Kiba-CSS helps you create structured and scalable stylesheets. It ensures consistency, collaboration, and code readability.

Extend CSS

To extend the button component in Kiba-CSS with a new modifier, let's say button--secondary, you can simply add CSS after loading kiba.min.css. Here's an example:

	<!doctype html>
	<html lang="en">
		<head>
		<!-- Required meta tags -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<!-- KIBA-CSS -->
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kiba-css@0.5.5/dest/kiba.min.css" crossorigin="anonymous">
		<!-- Custom style -->
		<style>
		.button--secondary {
			background: #000;
			color: #cccc;
		}
		</style>
		<title>Hello, world!</title>
		</head>
		<body>
		<button class="button button--secondary">Secondary button</button>
		</body>
	</html>

Extend SCSS

Import our source Sass files to take advantage of variables. You can either download the source files or use a package manager. The component partials are located in the partials folder. For example if you want to extend the button partial:

	@import "../node_modules/kiba-css/src/scss/partials/button";

	.button--secondary {
		background: #000;
		color: #cccc;
	}

some partials require scss variables which have to be defined as well. These are described as comments in the file.

Why Kiba-CSS

Streamlined Development Process: Kiba-CSS simplifies the development process by combining the best aspects of BEM methodology and utility classes. With its well-organized code structure and modular approach, you can save time and effort while building your website or web application.

Maintainable and Scalable Styles: By adhering to the BEM methodology, Kiba-CSS ensures that your styles remain maintainable and scalable as your project evolves. The BEM naming convention promotes clarity and avoids conflicts, making it easier to manage and update your stylesheets in the long run.

Customization and Flexibility: Kiba-CSS serves as a solid foundation that you can easily customize to meet your specific design requirements. Whether you want to override existing styles or create your own components, Kiba-CSS allows for seamless customization, empowering you to achieve the desired look and feel for your project.

Compatibility with Other Frameworks: One of the standout features of Kiba-CSS is its compatibility with other CSS frameworks like Tailwind. You can leverage Kiba-CSS's standalone BEM components alongside utility classes from other frameworks, giving you the flexibility to combine and integrate different styling approaches effortlessly.

Quick and Easy Styling: With Kiba-CSS, applying styling to your elements becomes a breeze. The framework offers a comprehensive set of utility classes that cover common styling needs. These classes allow you to achieve desired effects without writing extensive custom CSS, saving you time and reducing the complexity of your stylesheets.

In summary, Kiba-CSS combines the strengths of BEM methodology and utility classes, providing a streamlined development experience, maintainable styles, customization options, compatibility with other frameworks, easy styling capabilities . By choosing Kiba-CSS, you can build robust and visually appealing websites or web applications efficiently.

This site is built with KIBA-CSS