kernel.css

simplicity done right

Download

Built for any kind of job

Whether you're making a website, web app or a dashboard app, this framework got you covered!

Far from reaching it's potential

If you like this project and would like to help out, you may do so on github. This project is ever improving.

Simple to use

The Kernel Framework is designed for everyone from the beginner to the intermediate. It makes everybody's job easier.

Lightweight

We aim to make this a super lightweight, fully fledged framework that wont slow down your website's loading times.

A solid foundation for your project

The Kernel Framework does not aim to do all the work for you by any means, it is meant to be a generic foundation that can be used for any type of project.

Compatible with other frameworks

Because kernel.css supports prefixes for all it's css classes (ke-), it can be used with most other CSS framework. Mix and match

Installation

Add the following css and js tags to your html page.

Default version

<link rel="stylesheet" type="text/css" href="kernel.css" />
<script type="text/javascript" src="kernel.js"></script>

Base

The ke-base class contains the styles for typography, headings and paragraphs.

<body class="ke-base">
...
</body>

Prefix

Kernel.css uses prefixing of classes with the ke- prefix.

Headings

As long as ke-base is being used, these styles will be applied automatically.

Heading 1
2.6179em / 41px

Heading 2
2.0681em / 33px

Heading 3
1.618em / 25px

Heading 4
1.272em / 20px

Heading 5
1em / 16px
Heading 6
0.7862em / 12px

Paragraph

1.0rem / 16px

Grid

kernel.css comes with a 16 column grid system.

col-12

col-4

col-10

col-6

col-8

col-8

col-6

col-10

col-4

col-12

col-2

col-14

Nav

The nav class is a simple way to make navigation menus. They are usually accompanied by a header (read the section about headers).

Header

On small screen devices, the navigation gets hidden in a drawer that can be toggled by pressing the nav toggle button (hamburger icon).

Hero

Welcome

<div class="ke-hero">
    <h3>Welcome</h3>
</div>

You may use the "ke-vertical-center" class to vertically center full height hero's.

<div class="ke-hero" style="height: 100vh;">
    <div class="ke-container ke-vertical-center">
        <h3>Welcome</h3>
    </div>
</div>

Inputs

<!-- Default Button -->
<button class="ke-button ke-btn-default">Button</button>

<!-- Primary Button -->
<button class="ke-button ke-btn-primary">Button</button>

<!-- Safe Button -->
<button class="ke-button ke-btn-safe">Button</button>

<!-- Warning Button -->
<button class="ke-button ke-btn-warning">Button</button>

<!-- Risk Button -->
<button class="ke-button ke-btn-risk">Button</button>

<!-- Minimal Button -->
<button class="ke-button ke-btn-minimal">Button</button>

<!-- Large button -->
Just append the "ke-btn-lg" class to any of the button types.

You may also use the "ke-button" class with anchor tags and button inputs,
and you can extend the class if you want to customize your own buttons.

Notices

Use notices to inform your users of something important. There are multiple types of notices; info, warning and alert.

<div class="ke-notice">This is a default notice.</div>
<div class="ke-notice ke-safe">This is an affirmation.</div>
<div class="ke-notice ke-info">This is a notice.</div>
<div class="ke-notice ke-warning">This is a warning.</div>
<div class="ke-notice ke-info">This is an alert!</div>
Notice: This is a default notice.close
Notice: This is an affirmation.close
Notice: This is a notice.close
Warning: This is a warning.close
Alert: This is an alert!close

Colors

<div class="ke-bg-{color}"></div>

Kernel.css includes predefined color classes. These are great for prototyping your ideas quickly, but you may not want to pollute your HTML with a bunch of color classes.

Tabs

Tab #1

Tab #2

Tab #3

<div class="ke-tabs">
    <ul>
        <li><a>Test</a></li>
        <li><a>Test #2</a></li>
    </ul>

    <div class="ke-tab">
        <p>test #1/p>
    </div>

    <div class="ke-tab">
        <p>test #2</p>
    </div>
</div>

Labels

Label Label Safe Label Info Label Warning Label 
<a class="ke-label" href="#">Label<a>
<a class="ke-label ke-safe" href="#">Label<a>
<a class="ke-label ke-info" href="#">Label<a>
<a class="ke-label ke-warning" href="#">Label<a>
<a class="ke-label ke-alert" href="#">Label<a>

Tags

Biceps Triceps Quads 
<a class="ke-tag" href="#">Biceps<a>

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

<blockquote class="ke-blockquote"><p>...</p><blockquote>

Utils

Kernel.css comes bundled with a few useful utility classes.

<!-- Anchor -->
<a class="ke-anchor" href="#">

<!-- Horizontal Rule (hr) -->
<hr class="ke-hr">

<!-- Section -->
Gives a set margin to an element. Used to seperate content.
<div class="ke-section"></div>

<!-- No-shadow -->
Removes all shadows from an element.
<div class="ke-noshadow"></div>

<!-- Vertical-center -->
Vertically center an element.
<div class="ke-vertical-center">...</div>

<!-- Center (horizontal) -->
Center an element horizontally.
<div class="ke-center"></div>

<!-- Circle -->
Make an element circular.
<div class="ke-circle"></div>

<!-- Horizontal Rule (hr) -->
<hr class="ke-hr">

<!-- Display only on small screen sizes -->
<div class="ke-visible-sm">...</div>

<!-- Display only on large screen sizes -->
<div class="ke-visible-lg">...</div>

<!-- Autowrap a piece of text -->
<p class="ke-autowrap">...</p>

Tables

Year Population Change
1990 5,3 billion 1.7%
2000 6,1 billion 1.3%
2010 6,9 billion 1.8%

http://www.geohive.com/earth/his_history3.aspx 

<table class="ke-table">
    <thead>
        <tr>
            <th>Year</th>
            <th>Population</th>
            <th>Change</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1990</td>
            <td>5,3 billion</td>
            <td>1.7%</td>
        </tr>
        <tr>
            <td>2000</td>
            <td>6,1 billion</td>
            <td>1.3%</td>
        </tr>
        <tr>
            <td>2010</td>
            <td>6,9 billion</td>
            <td>1.8%</td>
        </tr>
    </tbody>
</table>

Cards

Card are a popular way to section content, and creates a contrast from the background page.

Desert

Desert
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Deer

Deer
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Comments:

Great post, keep it up! 
<div class="ke-card ke-card-sm">
    <div class="ke-card-header">
        <h3>Deer</h3>
        <img src="https://source.unsplash.com/nuRYwOJryyk/800x600" alt="Deer">
    </div>

    <div class="ke-card-content">
        <p>...</p>
    </div>
</div>

Code

The code class is used for displaying code. The first way to do this is inline code like this, and code blocks: 

Inline code
<code class="ke-code">...</code>
Code block
<pre class="ke-code ke-code-block"><code>...</code></pre>

Progressbar

<div class="ke-progressbar">
    <div class="ke-progress" style="width: 75%"></div>
</div>

Examples

/examples/splitview

/examples/login