K i b a - C S S

Components

Container Grid Form Button Table Navbar

Container

The container block serve as the fundamental building blocks for layouts. Containers are helpful when utilizing our default Grid system. Containers are designed to contain, provide padding, and, in certain cases, center the content within them. While it is possible to nest containers, most layouts do not necessitate such nesting.

It's important to note that while containers provide structure and aid in maintaining a consistent layout, they are not mandatory for every use case. Depending on your specific layout requirements, you may choose to use containers selectively.
The section below illustrates how each container’s max-width changes across each breakpoint:

Class Small ( >36em ) Medium ( >48em ) Large ( >62em ) XLarge ( >75em )
.container 33.75em 45em 60em 71.25em
.container--fluid 100% 100% 100% 100%

The framework utilizes EM units instead of pixels because EM units offer greater flexibility and scalability compared to pixels. With EM units, the layout and design elements can adapt and scale proportionally, making it easier to achieve responsive and flexible designs across various devices and screen sizes.

Container 
	<div class="container"></div>

Grid

The block .grid defines the grid layout. With the modifier grid--cols-x it can be specified how many columns the layout is divided into

The elements .grid__col are used within the block and define the individual column widths. The modifier grid__col--X indicates how many columns the element occupies in the grid where x is a number between 1 and 12.

1/12
2/12
3/12
4/12
5/12
6/12
7/12
8/12
9/12
10/12
11/12
12/12
	
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--1 bg-light">1/12<div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--2 bg-light">2/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--3 bg-light">3/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--4 bg-light">4/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--5 bg-light">5/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--6 bg-light">6/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--7 bg-light">7/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--8 bg-light">8/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--9 bg-light">9/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--10 bg-light">10/12</div>
		</div>
		<div class="grid grid--cols-12 p-1">
			<div class="grid__col grid__col--11 bg-light">11/12</div>
		</div>
		<div class="grid p-1">
			<div class="grid__col bg-light">12/12</div>
		</div>

By combining the .grid__col-x modifier with the appropriate suffixes (-sm, -md, -lg, -xl), you can define unique grid layouts for small, medium, large, and extra-large viewports.

For example, to make a column Full width on mobile , half width on tablet and one third width on deskop:

Full width on mobile , half width tablet, one third width desktop
	
		<divclass="grid grid--cols-12">
			<div class="grid__col grid__col--12 grid__col--6-md grid__col--4-lg bg-light">Full width on mobile, half width tablet, one third width desktop</div>
		</div>

Form

The Form includes styles for various form elements such as input fields, labels, select boxes, checkboxes, and radio buttons. The component is designed with a clear and readable structure, making it easy to modify and customize. It also includes support for alignment of form elements and a custom styling for checkboxes and radio buttons. Overall, it's a great addition to any project that requires consistent and reusable form styling.

Default Form

							<form class="form">
							  <div class="form__item">
								<label class="form__radio-label">
								  <input type="radio" name="radio" value="value">
								  <span class="form__radio-custom"></span>
								  Radio Button Label
								</label>
							  </div>
							  <div class="form__item">
								<label class="form__label" for="email">Input Label</label>
								<input class="form__input" type="email" id="email" name="email" required>
							  </div>
							  <div class="form__item">
								<button class="button" type="submit">Submit</button>
							  </div>
							</form>

Aligned Form

To create an aligned form, add the .form--aligned modifier. In an aligned form, the labels are right-aligned against the form input controls. 

								<form class="form form--aligned">
								  <div class="form__item">
									<label class="form__label" for="input1">Input Label</label>
									<input class="form__input" type="text" id="input1">
								  </div>
								  <div class="form__item">
									<label class="form__checkbox-label">
									<input type="checkbox" name="checkbox" value="value">
									<span class="form__checkbox-custom"></span>
									Checkbox Label
									</label>
								  </div>
								  <div class="form__item">
									<button class="button" type="submit">Submit</button>
								  </div>
								</form>

Form in Grid

To create multi-column forms, include your form elements within a Grid. Creating responsive multi-column forms (like the example below) requires Kiba Responsive Grids to be present on the page. 

							<form class="form">
								<div class="grid grid--cols-9">
									<div class="grid__col grid__col--12 grid__col--3 p-2">
										<div class="form__item">
											<label class="form__label" for="name">Input Label</label>
											<input class="form__input" type="text" id="name" name="name" required>
										</div>
									</div>
									<div class="grid_col grid__col--12 grid__col--3 p-2">
										<div class="form__item">
											<label class="form__label" for="name">Select Label</label>
											<select class="form__select" id="dropdown-menu">
												<option value="option1">Option 1</option>
												<option value="option2">Option 2</option>
												<option value="option3">Option 3</option>
											</select>
										</div>
									</div>
									<div class="grid__col grid__col--12 grid__col--3 p-2">
										<div class="form__item">
											<label class="form__label" for="name2">Input Label</label>
											<input class="form__input" type="text" id="name2" name="name2" required>
											</div>
											</div>
											</div>
											<div class="grid grid--cols-12">
												<div class="grid__col grid__col--12 p-2">
													<div class="form__item">
														<div class="form__item">
															<label class="form__checkbox-label">
																<input type="checkbox" name="checkbox" value="value">
																<span class="form__checkbox-custom"></span>
																Checkbox Label
															</label>
														</div>
													</div>
												</div>
											</div>
										</form>

Button

To add buttons, you can use the .button block

The .button--disabled modifier can be used to disable the button. In this state, the button has reduced opacity, and the cursor changes to indicate that it cannot be clicked.
The .button--link modifier changes the button's appearance to resemble a text link. 

<button class="button">Button</button>
<button class="button button--link">Button Link</button>
<button class="button button--disabled" disabled>Disabled Button</button>

Table

a standard table is initiated with the block .table

Header Header Header
1 2 3
1 2 3
1 2 3 
						<table class="table">
							<thead class="table__head">
								<tr class="table__row">
									<th class="table__header">Header</th>
									<th class="table__header">Header</th>
									<th class="table__header">Header</th>
								</tr>
							</thead>
							<tbody class="table__body">
								<tr class="table__row">
									<td class="table__cell">1</td>
									<td class="table__cell">2</td>
									<td class="table__cell">3</td>
								</tr>
								<tr class="table__row">
									<td class="table__cell">1</td>
									<td class="table__cell">2</td>
									<td class="table__cell">3</td>
								</tr>
								<tr class="table__row">
									<td class="table__cell">1</td>
									<td class="table__cell">2</td>
									<td class="table__cell">3</td>
								</tr>
							</tbody>
						</table>

Table striped and full width

There are two different modifiers for the table. With .table--fluid the table gets a width of 100% and with the modifier .table--striped every second line is inserted.

Header Header Header
1 2 3
1 2 3
1 2 3 
							<table class="table table--striped table--fluid">
								<thead class="table__head">
									<tr class="table__row">
										<th class="table__header">Header</th>
										<th class="table__header">Header</th>
										<th class="table__header">Header</th>
									</tr>
								</thead>
								<tbody class="table__body">
									<tr class="table__row">
										<td class="table__cell">1</td>
										<td class="table__cell">2</td>
										<td class="table__cell">3</td>
									</tr>
									<tr class="table__row">
										<td class="table__cell">1</td>
										<td class="table__cell">2</td>
										<td class="table__cell">3</td>
									</tr>
									<tr class="table__row">
										<td class="table__cell">1</td>
										<td class="table__cell">2</td>
										<td class="table__cell">3</td>
									</tr>
								</tbody>
							</table>

Utilities

Utility classes are a set of highly reusable CSS classes that provide specific styling for common design patterns or functional requirements. They offer a quick and efficient way to apply small, single-purpose styles to HTML elements without the need for writing custom CSS for each individual case. By combining utility classes with the BEM methodology, we can achieve a powerful and flexible system for structuring our CSS code.

Layout-Utilities

Typografie-Utilities

Display-Utilities

Positionierungs-Utilities

Styling-Utilities

Text-Utilities

Border- und spacing-Utilities

Color-Utilities

.flex { display: flex }

.flex-row { flex-direction: row }

.flex-wrap { flex-wrap: wrap }

.justify-center { justify-content: center }

.justify-between { justify-content: space-between }

.items-center { align-items: center }

.self-center { align-self: center }

.order-1 { order: 1 }

.order-2 { order: 2 }

.order-3 { order: 3 }

.font-xs { font-size: .5rem }

.font-sm { font-size: .75rem }

.font-base { font-size: 1rem }

.font-lg { font-size: 1.5rem }

.font-xl { font-size: 2rem }

.font-xxl { font-size: 3rem }

.font-bold { font-weight: bold }

.uppercase { text-transform: uppercase }

.underline { text-decoration: underline }

.line-through { text-decoration: line-through }

.rotate-90 { transform: rotate(90deg); }

.rotate-180 { transform: rotate(180deg); }

.rotate-270 { transform: rotate(270deg); }

.italic { font-style: italic }

.block { display: block }

.inline-block { display: inline-block }

.inline { display: inline }

.hidden { display: none }

.relative { position: relative }

.absolute { position: absolute }

.fixed { position: fixed }

.top-0 { top: 0 }

.right-0 { right: 0 }

.bottom-0 { bottom: 0 }

.left-0 { left: 0 }

.pointer { cursor: pointer }

.opacity-25 { opacity: .25 }

.opacity-50 { opacity: .5 }

.opacity-75 { opacity: .75 }

.opacity-100 { opacity: 1 }

.transition { transition: all .3s ease }

.hover:opacity-50:hover { opacity: .5 }

.focus:outline-none:focus { outline: 0 }

.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.overflow-auto { overflow: auto }

.overflow-hidden { overflow: hidden }

.overflow-scroll { overflow: scroll }

.overflow-visible { overflow: visible }

.no-underline { text-decoration: none }

.break-words { word-wrap: break-word }

.select-none { user-select: none }

.fw-normal { font-weight: normal }

.fw-light { font-weight: 300 }

.fw-medium { font-weight: 500 }

.fw-semibold { font-weight: 600 }

.fw-black { font-weight: 900 }

.lh-tight { line-height: 1.25 }

.lh-loose { line-height: 1.5 }

.text-left { text-align: left }

.text-right { text-align: right }

.text-center { text-align: center }

.text-justify { text-align: justify }

.whitespace-normal { white-space: normal }

.whitespace-nowrap { white-space: nowrap }

.whitespace-pre { white-space: pre }

.whitespace-pre-wrap { white-space: pre-wrap }

.break-normal { word-break: normal }

.break-words { word-break: break-word }

.break-all { word-break: break-all }

.shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) }

.shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) }

.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) }

.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) }

.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) }

.rounded-none { border-radius: 0 }

.rounded-sm { border-radius: .125rem }

.rounded { border-radius: .25rem }

.rounded-md { border-radius: .375rem }

.rounded-lg { border-radius: .5rem }

.rounded-xl { border-radius: .75rem }

.rounded-2xl { border-radius: 1rem }

.rounded-full { border-radius: 100%; }

.border-none { border-style:none; }

.p-0 { padding: 0 }

.p-1 { padding: .25rem }

.p-2 { padding: .5rem }

.p-3 { padding: .75rem }

.p-4 { padding: 1rem }

.p-8 { padding: 2rem }

.p-16 { padding: 4rem }

.px-0 { padding-left: 0; padding-right: 0 }

.px-1 { padding-left: .25rem; padding-right: .25rem }

.px-2 { padding-left: .5rem; padding-right: .5rem }

.px-3 { padding-left: .75rem; padding-right: .75rem }

.px-4 { padding-left: 1rem; padding-right: 1rem }

.px-8 { padding-left: 2rem; padding-right: 2rem }

.px-16 { padding-left: 4rem; padding-right: 4rem }

.py-0 { padding-top: 0; padding-bottom: 0 }

.py-1 { padding-top: .25rem; padding-bottom: .25rem }

.py-2 { padding-top: .5rem; padding-bottom: .5rem }

.py-3 { padding-top: .75rem; padding-bottom: .75rem }

.py-4 { padding-top: 1rem; padding-bottom: 1rem }

.py-8 { padding-top: 2rem; padding-bottom: 2rem }

.py-16 { padding-top: 4rem; padding-bottom: 4rem }

.pl-0 { padding-left: 0 }

.pl-1 { padding-left: .25rem }

.pl-2 { padding-left: .5rem }

.pl-3 { padding-left: .75rem }

.pl-4 { padding-left: 1rem }

.pl-8 { padding-left: 2rem }

.pl-16 { padding-left: 4rem }

.pr-0 { padding-right: 0 }

.pr-1 { padding-right: .25rem }

.pr-2 { padding-right: .5rem }

.pr-3 { padding-right: .75rem }

.pr-4 { padding-right: 1rem }

.pr-8 { padding-right: 2rem }

.pr-16 { padding-right: 4rem }

.m-0 { margin: 0 }

.m-1 { margin: .25rem }

.m-2 { margin: .5rem }

.m-3 { margin: .75rem }

.m-4 { margin: 1rem }

.m-8 { margin: 2rem }

.m-16 { margin: 4rem }

.mx-0 { margin-left: 0; margin-right: 0 }

.mx-1 { margin-left: .25rem; margin-right: .25rem }

.mx-2 { margin-left: .5rem; margin-right: .5rem }

.mx-3 { margin-left: .75rem; margin-right: .75rem }

.mx-4 { margin-left: 1rem; margin-right: 1rem }

.mx-8 { margin-left: 2rem; margin-right: 2rem }

.mx-16 { margin-left: 4rem; margin-right: 4rem }

.my-0 { margin-top: 0; margin-bottom: 0 }

.my-1 { margin-top: .25rem; margin-bottom: .25rem }

.my-2 { margin-top: .5rem; margin-bottom: .5rem }

.my-3 { margin-top: .75rem; margin-bottom: .75rem }

.my-4 { margin-top: 1rem; margin-bottom: 1rem }

.my-8 { margin-top: 2rem; margin-bottom: 2rem }

.my-16 { margin-top: 4rem; margin-bottom: 4rem }

.mt-0 { margin-top: 0 }

.mt-1 { margin-top: .25rem }

.mt-2 { margin-top: .5rem }

.mt-3 { margin-top: .75rem }

.mt-4 { margin-top: 1rem }

.mt-8 { margin-top: 2rem }

.mt-16 { margin-top: 4rem }

.mb-0 { margin-bottom: 0 }

.mb-1 { margin-bottom: .25rem }

.mb-2 { margin-bottom: .5rem }

.mb-3 { margin-bottom: .75rem }

.mb-4 { margin-bottom: 1rem }

.mb-8 { margin-bottom: 2rem }

.mb-16 { margin-bottom: 4rem }

.ml-0 { margin-left: 0 }

.ml-1 { margin-left: .25rem }

.ml-2 { margin-left: .5rem }

.ml-3 { margin-left: .75rem }

.ml-4 { margin-left: 1rem }

.ml-8 { margin-left: 2rem }

.ml-16 { margin-left: 4rem }

.mr-0 { margin-right: 0 }

.mr-1 { margin-right: .25rem }

.mr-2 { margin-right: .5rem }

.mr-3 { margin-right: .75rem }

.mr-4 { margin-right: 1rem }

.mr-8 { margin-right: 2rem }

.mr-16 { margin-right: 4rem }

.bg-primary { background-color: $kiba-primary; }

.text-primary { color: $kiba-primary; }

.bg-secondary { background-color: $kiba-secondary; }

.text-secondary { color: $kiba-secondary; }

.bg-tertiary { background-color: $kiba-tertiary; }

.text-tertiary { color: $kiba-tertiary; }

.bg-success { background-color: $kiba-success; }

.text-success { color: $kiba-success; }

.bg-danger { background-color: $kiba-danger; }

.text-danger { color: $kiba-danger; }

.bg-warning { background-color: $kiba-warning; }

.text-warning { color: $kiba-warning; }

.bg-info { background-color: $kiba-info; }

.text-info { color: $kiba-info; }

.bg-light { background-color: $kiba-light; }

.text-light { color: $kiba-light; }

.bg-dark { background-color: $kiba-dark; }

.text-dark { color: $kiba-dark; }

.bg-gray { background-color: $kiba-gray; }

.text-gray { color: $kiba-gray; }

.bg-red { background-color: $kiba-red; }

.text-red { color: $kiba-red; }

.bg-blue { background-color: $kiba-blue; }

.text-blue { color: $kiba-blue; }

.bg-green { background-color: $kiba-green; }

.text-green { color: $kiba-green; }

.bg-yellow { background-color: $kiba-yellow; }

.text-yellow { color: $kiba-yellow; }

.bg-white { background-color: $kiba-white; }

.text-white { color: $kiba-white; }

.bg-black { background-color: $kiba-black; }

.text-black { color: $kiba-black; }

>
This site is built with KIBA-CSS