Ethan Le Sage: KB Framework

KB Framework

KB Framework is an ultra-low-emissions CSS framework, coming in at just 786 bytes when minified and gzipped. It is also the framework that powers this website.

It is important to note that this framework will need to be used in conjunction with custom CSS rules, as it is only intended to offer an incredibly lightweight skeleton for a web page. This framework does not offer complete styling.

Also worth noting, this was developed in just a few weeks by one person (me), and so is not perfect. There may be small issues with padding or margins when certain elements are placed together on a page, but any of these issues can easily be corrected with CSS.

Components

KB Framework comes with a fairly wide range of CSS components, however much less than any other CSS frameworks available on the web. The current list of components crammed into one kilobyte is as follows:

Responsive 12-wide column system
Responsive container for mobile-first design
Navbar (very basic)
Pre-formatted tables
Heading sizing
Code blocks
Form blocks
Tiles
Responsive element-hiding tags
Pre-formatted captions
Horizontal rules

Usage

Below you can see a breakdown of each the components, what they do, and how they are used.

Breakpoints

The responsivity breakpoints included in this framework are almost identical to Bootstrap. Before reading on, it is important to know what the responsive breakpoints included with this framework are:

Size Name	Declaration Name	Device Screen Width
Small	sm	540px
Medium	md	720px
Large	lg	960px
Extra Large	xl	1100px

These breakpoints are used for the responsive columns system, and also for hiding elements.

Responsive Columns

The columns included in this framework are very similar to Bootstrap, and most other CSS frameworks on the market. See the example below for how they are used:

<div class="col col-4 lapse-sm" style="background-color: red;">
    col-4
</div>
<div class="col col-3 lapse-sm" style="background-color: blue;">
    col-3
</div>
<div class="col col-5 lapse-sm" style="background-color: green;">
    col-5
</div>

In the above code, we use the class 'col' to declare a column, followed by 'col-4' to declare the width as 4. 'lapse-sm' tells the framework to collapse the columns at the 'sm' breakpoint for responsivity on mobile. The outcome of this code can be seen below:

col-4

col-3

col-5

Responsive Container

For mobile-first development, and for creating a central column on desktop web pages, the responsive container element can be used as follows:

<div class="container">
    Put your column content here
</div>

These containers have a max-width of 700px. A good example of this is the page you are currently viewing. All of the content you see is inside of one of these containers. In fact, on this site, the container class has been added directly to the body element.

Inside the KB I have managed to include a navbar system, but be warned, it is extremely basic.

<div class="nav" style="background-color: lightcoral;">
    <ul>
        <li class="nav-left">Site Header</li>
        <li class="nav-right">Link-1</li>
        <li class="nav-right">Link-2</li>
    </ul>
</div>

By adding a div with the class "nav", you instantiate a navbar. Inside of this div, we use an unordered list to contain all headers and links. The list items are used as headers and links. The classes nav-left and nav-right define which direction each of the items should float in the navbar.

To create a sticky navbar, add the class 'sticky' to the navbar div. The navbar will now stick to the top of the page even after scrolling. I won't show an example of this here, so as not to break the page.

Site Header
Link-1
Link-2

Pre-Formatted Tables

With the addition of just one classname, your tables can go from the default HTML style to looking quite nice:

<table class="tab">
    <tr>
        <th>Name</th>
        <th>Height</th>
        <th>Eye Color</th>
    </tr>
    <tr>
        <td>Eric Idle</td>
        <td>5ft 11</td>
        <td>Blue</td>
    </tr>
    <tr>
        <td>Graham Chapman</td>
        <td>6ft 3</td>
        <td>Blue</td>
    </tr>
    <tr>
        <td>John Cleese</td>
        <td>6ft 5</td>
        <td>Hazel</td>
    </tr>
</table>

The formatted tables include; Bold and centered headings, alternating shading, and internal gridlines.

Name	Height	Eye Color
Eric Idle	5ft 11	Blue
Graham Chapman	6ft 3	Blue
John Cleese	6ft 5	Hazel

Heading Sizing

By default, headings have amended line-height of 1.2. No classnames are needed for this to take effect.

Code Blocks

As can be seen all over this page, code blocks are included, and can be defined like so:

<pre class="code">
    Insert code here
</pre>

They will look (you guessed it) like the code blocks on this page.

Form Blocks

Basic formatting is included for the various input elements in HTML forms. I won't include an example of all of them here, but some can be seen below:

<form class="form-block">
    <label>Your Email: </label> <br>
    <input placeholder="example@gmail.com"> <br>
    <label>What do you think of KB Framework?</label>
    <fieldset>
        <input type="radio" name="rating">
        <label>Great!</label> <br>
        <input type="radio" name="rating">
        <label>Meh</label> <br>
        <input type="radio" name="rating">
        <label>Rubbish</label> <br>
    </fieldset>
    <label>Further Feedback: </label> <br>
    <textarea type="textarea"></textarea> <br>
    <button type="submit">Submit</button>
</form>

The built-in styling for forms is very minimal, on the assumption that most users of the framework will want to custom-style their forms anyway.

By default, all input elements will expand to 100% of the form-block's width. If you want to escape this (e.g. for radio buttons), you can contain the inputs within a fieldset.

Tiles

A slightly more snazzy element included in this framework is the tile. These are styled like cards, with an image included at the top, and custom heading styling. All other types of content (excluding navbars) can be included within a tile.

<div class="tile" style="max-width: 300px;">
    <img src="../images/rustbasefinder.png">
    <div class="tile-body">
        <h2>Example Heading</h2>
        <p>Some text</p>
    </div>
</div>

These tiles work best when included within the responsive columns provided by this framework. For this example, I have assigned a max-width of 300px as a demonstration, because they look stupid at full-width.

Example Heading

Some text

Responsive Element Hiding

By adding the classname hide-sm, hide-md, hide-lg, or hide-xl to any element, the element will cease to be shown after the corresponding breakpoint is hit.

Captions

Image captions are sized to 0.9em automatically, and centered.

Horizontal Rules

Because html hr elements can be a bit weird sometimes, I have included a proprietary horizontal rule class. By adding the class hr to an empty div, it will render as a horizontal rule. This can be combined with the columns system to create horizontal rules of any width from 1 to 12.

<div class="col col-12 hr"></div>

This renders like so:

Ethan Le Sage