Kimochi.css is a modularized CSS kit rather than an object-oriented CSS framework. It encourages developers to combine separate CSS classes together in HTML to make styles, instead of writing additional styles for every components. The target of Kimochi.css is to write less CSS.

The work of Kimochi.css can be divided into three parts:

1. It defines some basic style classes for global elements' usage.
   These basic classes can be combined in HTML to make different styles.
2. Some special HTML elements are re-styled to make them more beautiful.
   Such as <table> and <input>.
3. Additional component styles are also provided.
   So you don't need to write a navigation bar again and again.

Combinable and Chinese-friendly CSS phrases are provided for typesetting.

Headings

Standard heading tags from <h1> to <h6> and CSS classes from .h1 to .h6 are all available.

Font size

Using .font-{pixel} to set the font size in pixel. The range of {pixel} is every even number from 10 to 36.

Line height

In complex cases, it's difficult to forecast what the line-height of specific elements should be, so Kimochi.css does not define global line-height in em unit. Accordingly, using .lh-{pixel} or .lh-{percentage}p to set the line-height in pixel or in percentage.
The range of {pixel} is 0 and every even number from 10 to 36. And the {percentage} can be 100, 120, 130, 150, 160, 180, 200 and 240.

Example

Lists

Unordered, Ordered and Unstyled lists are all available. Note that all the lists are not fixed with certain line height, so it would be better to manually add .lh-{n} to the list if necessary. (And the same as padding & margin.)

Code

Undoubtedly <code> is necessary for programmers. A <code> is inline by default, using .code-block to support multiple lines of code. Syntax highlighting is not included in Kimochi.css.

Font helpers

Kimochi.css provides some other font-related CSS phrases for typesetting.

Variety of colors are available for font and containers. In this part, only some generally used color options are listed, more color options for certain components can be seen in other section.

Font colors

Using .font-{color} to color text.

Background colors

Using .bg-{color} to color containers' background. Anchors <a> in the containers will be colored as well while the normal text will not. So you need to manually add .font-{color} to the colored containers if necessary.

Kimochi.css is based on 12-pixel layout system, which means 1 unit is equal to 12 pixels. And Kimochi.css defines plenty of layout phrases for combination.

Box size

The element size can be fixed by .w-{n} for width and .h-{n} for height.
Currently, the range of {n} is 0 to 12. So you can use .w-0 to .w-12 to define 0px-to-144px width elements. The same as .h-0 to .h-12 for height. Other necessary lengths may be added in the future version.

Example: Setting width

Class	Width	HTML	Result
.w-1	12px	<div class="w-1"></div>
.w-5	60px	<div class="w-5"></div>
.w-12	144px	<div class="w-12"></div>

Percentage is allowed for width by simply adding "p" after the percentage number.

Width	10%	20%	25%	30%	33.33%	40%	50%	60%	66.66%	75%	80%	100%
Class	.w-10p	.w-20p	.w-25p	.w-30p	.w-33p	.w-40p	.w-50p	.w-60p	.w-66p	.w-75p	.w-80p	.w-100p

Box spacing

The box spacing here mainly refers to margin and padding. You can control specific margin or padding sides individually.

Examples

Box position & display

Kimochi.css pulls out the float & position phrases alone so that you can decide how to place each element.

Float

As is common practice, .left and .right are used to control the float direction.

Clear float

There are two ways to clear float: cleared by parent element or by extra element.

Display helpers

There are some useful display-related phrases for layout control.

Box borders

Bordered box is available for each edge.

Kimochi.css provides a 12-column grid system. Each column's width is counted by percentage, that is, 1 column width is 8.33%.
Using .col-{n} to create a {n} unit column in .col-box, the range of {n} is 1 to 12.

By default, the column is float: left;, Kimochi.css enables columns to have left offset or float right. Like common layout methods, simply using .ml-{n} to add {n} unit offset to a column, or using .right to make a column right-floating. The range of {n} is 1 to 11.

Some commonly used form elements are restyled to meet the flat UI design.

Basic form

Simply using native form element tags, requiring no extra CSS class. All textual <input> and <textarea> are set to width: 100%; by default, so a wrapper is needed if you are going to fixed the width of them.

Inline inputs

Add .form-group as wrapper to keep inputs inline and vertically centered.

Disabled inputs

Using disabled="disabled" attribute and then the disabled style will be automatically added. Alternatively, you can use .disabled to apply the same style but not actually disable inputs.

A <table> has no style by default, which can be used for layout. By adding .table and related classes, a <table> can be styled.

Basic table

Simply add .table class, a table can be styled with striped rows. A basic table is set to width: 100%;.

Bordered table

Using .table-border to add border to a table.

Hover rows

Add .table-hover to enable a hover state on table rows within the <tbody>.

Kimochi.css provides some commonly used HTML components to reduce the work of front-end engineers. More necessary components will be added in the future version, and all the components are made to keep as simple as possible to use.

Buttons

Colorful button styles are available for <a>, <input>, <button> and even other containers by adding .button and .button-{color} classes.

Nav bar

A basic Nav bar .nav contains a header and multiple links, dropdown menus for links are supported. No extra JavaScript required.
Colorful Nav bars are available as well, add .nav-{color} class to change color. The default color of .nav is purple, which is equal to .nav-purple.

For the case which puts the navigation bar on the top of the whole page, a large Nav bar .nav-large is the most suitable one.

Msg box

Msg box .msg provides contextual feedback messages for typical user actions. .msg-{color} is used for coloring the msg box, and the default color is .msg-purple purple.

Card box

A card box .card-box is used to create a bordered container in order to distinguish between the box content and the outer background. Necessary layout controls are needed since .card-box just adds a white background and a shadow border to the container.

Kimochi.css is built based on author's personal preference. One of the main purpose of this CSS kit is to write less specific CSS. One can just combine CSS classes together in HTML to make various components for different layouts. Hence, Kimochi.css may be more suitable for personal projects rather than large commercial projects.

License

Kimochi.css is released under the MIT license. Feel free to use it in your projects :)

Changelog

• v1.1 - 2014.02.15
  
  • Fixed form elements' bugs.
  • Increase ml-{n} and mr-{n} from 3 to 20.
  • Add w-{20|30|...|100}.
• v1.0 - 2013.10.08
  First version released.