K Web Framework

About

K Web Framework is a CSS framework. It aims to make the websites mostly similar with KDE (The K Desktop Environment) with the Oxygen theme.
Copyright ©2013 Nikita Bogdanov

Features

Download
or use bower: bower install kwf

Installation

Using bower

bower install kwf

Installing manually

To use KWF you should download it, unpack to your server and add link to the stylesheet in your document. For example, if you unpacked it into the root of the server, you should add 

 <link rel='stylesheet' href='KWF/KWF.css'>
to the <head> of your document.

Structure

In the KWF directory you can find:

  1. KWF.css - the main CSS file
  2. .cur files - cursors for non-kde users, similar to those in KDE.

In all, 6 files.

Components

Menu

Adds menu like in the top of a program.
Usage: add .kmain class to an <ul> element.
Preview:

Code:

    <div style='background-color:#C9C9C9;height:25px;'>
    <ul class='kmain'>
    <li><u>F</u>ile</li>
    <li><u>E</u>dit</li>
    <li>V<u>i</u>ew</li>
    </ul>
    </div>

Vertical menu

Makes a horizontal menu, like that in the top of the page.
Usage: add class menu to your <ul>. For the separator use <hr noshade> (DO NOT WRAP IT INTO <LI> !). For a title, use <H1> (DO NOT WRAP IT INTO <LI> !).
Preview:


Code:

    
<ul class='menu' style='width:200px;'>
<h1>Example</h1>
<li><a>First</a></li>
<hr noshade>
<li><a>Second</a></li>
<li><a>Third</a></li>
</ul>

Inputs

When you use input forms like <input type='text'> or <textarea></textarea> they automatically transform into KDE-like input forms. Preview:

Code:

<input type='text'>

Buttons

Turns your button to the KDE-style button. Usage: add the .kbt class to your button, link or <input type='button'>
Preview:

Code:

<input type='button' value='Simple input' class='kbt'>
<button class='kbt'> Button tag </button>

Container

A container for your content.
Usage: wrap your content into a <div> with .container class.
Preview:

This is the example text.

Code:

<div class='container'>
This is the example text.
</div>

Background gradient

Adds a gradient as a background.
Usage: Add .kbody class to your <body>.