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 novience. 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 uses prefixes for all it's css classes (ion-), it can be used with most other CSS framework. Mix and match


Base

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

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

Headings

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

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.

<p class="p">Hello, World!</p>

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="ion-hero">
    <h3>Welcome</h3>
</div>

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

Example

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

Inputs

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

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

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

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

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

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

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

You may also use the "ion-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; ion-info, ion-warning and ion-alert.

<div class="ion-notice">This is a default notice.</div>
<div class="ion-notice ion-safe">This is an affirmation.</div>
<div class="ion-notice ion-info">This is a notice.</div>
<div class="ion-notice ion-warning">This is a warning.</div>
<div class="ion-notice ion-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="ion-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 dom with a bunch of color classes.


Tabs

Tab #1

Tab #2

Tab #3

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

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

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

Labels

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

Tags

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

Utils

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

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

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

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

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

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

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

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

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

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

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

<!-- Autowrap a piece of text -->
<p class="ion-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="ion-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.

Desolate landscape

Desolate landscape
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="ion-card ion-card-sm">
    <div class="ion-card-header">
        <h3>Deer</h3>
        <img src="https://source.unsplash.com/nuRYwOJryyk/800x600" alt="Deer">
    </div>

    <div class="ion-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="ion-code">...</code>
Code block
<pre class="ion-code ion-code-block"><code>...</code></pre>

Progressbar

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

Examples

Blog

/examples/splitview

/examples/login