Kube

Professional CSS-framework

Production

Download

Compiled and minified CSS, no source files are included.

Source code

Download Kube source code

Source files for modifications, Less files are included.

Kube is built with integrity and technology in mind

Kube is one of the world's most advanced and flexible CSS-frameworks. It gives you full power of choice, creativity and beauty, while handling all of the technology behind it. No more boring routine, just concentrate on something big and wonderful, and let Kube provide the rest.

Cross-browser

Kube works in all modern browsers on desktops and mobile devices: latest Chrome, Firefox, Safari, Opera and IE9+.

License

Kube licensed under MIT. Kube Framework is absolutely free for personal or commercial use.

Details

line height

All text and elements have line-height: 1.6em; applied to them We think this value is perfect and universal for line spacing no matter what font size you use.

box-sizing

All elements in Kube have box-sizing: border-box; property set. Long story short, additional padding will not add any extra width to elements.

variables.less

If you download Kube with LESS, you’ll find variables.less file. This file contains all the settings for Kube, such as font family, font size, headers size, colors, etc.

Of course, you can change any setting you like and completely rebuild Kube for your needs and according to your taste.

grid

We researched and researched all of the grids out there, and Kube is a result of rethinking worlds best practices and our experience with grids. We concluded that the grid behind a framework must be simple and universal, no matter what you are working on.

Kube grid system lets you think, develop and project on a high level of abstraction without wasting time on getting accustomed to artificial units and measurements.

Basic template

<!DOCTYPE html>
<html>
<head>
    <title>Kube Basic</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/kube.min.css" />
    <link rel="stylesheet" href="css/your-styles.css" />
</head>
<body>
    <h1>Hello, world!</h1>
</body>
</html>

Basic grid template

<!DOCTYPE html>
<html>
<head>
    <title>Kube Basic</title>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="css/kube.min.css" />
    <link rel="stylesheet" href="css/your-styles.css" />
</head>
<body>
    <div class="units-row">
        <div class="unit-30">
            <!-- sidebar -->
        </div>
        <div class="unit-70">
            <!-- content -->
        </div>
    </div>
</body>
</html>