Buttons Input Fields Selects Tables Checkboxes Radio Buttons Labels Header & Footer Cards Other

Welcome to CSS styling LexaN

LexaN is an open source toolkit witch gonna help you to build your web app or web site with HTML and CSS.
Build your app to look nice very easy without Bootstrap or jQuery. LexaN has been developing @Li54nder since 2019.

Linking LexaN with your web page


This code type in head tag of HTML document: 
<link rel="stylesheet" href="LexaN.css">


And this in the end of body tag: 
<script src="LexaN.js"></script>

Buttons




HTML Code


<button class="btn-basic">Button</button>
<button class="btn-basic-out">Button</button>
<br>
<button class="btn-blue">Button</button>
<button class="btn-blue-out">Button</button>
<br>
<button class="btn-red">Button</button>
<button class="btn-red-out">Button</button>
<br>
<button class="btn-green">Button</button>
<button class="btn-green-out">Button</button>

Input Fields




Input Date

HTML Code


<h2>Input Fields</h2>
<input type="text" class="input-f-basic" placeholder="PlaceHolder">
<input type="text" class="input-f-basic-out" placeholder="PlaceHolder">
<br>
<input type="text" class="input-f-blue" placeholder="PlaceHolder">
<input type="text" class="input-f-blue-out" placeholder="PlaceHolder">
<br>
<input type="text" class="input-f-red" placeholder="PlaceHolder">
<input type="text" class="input-f-red-out" placeholder="PlaceHolder">
<br>
<input type="text" class="input-f-green" placeholder="PlaceHolder">
<input type="text" class="input-f-green-out" placeholder="PlaceHolder">

<h2>Input Date</h2>
<input type="date" class="input-d-basic input-d-green" placeholder="PlaceHolder">
<input type="date" class="input-d-basic-out input-d-green-out" placeholder="PlaceHolder">

Selects




HTML Code


<div class="select-basic" style="width: 250px;">
    <select>
        <option value="0">Select:</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </select>
</div>
<br>
<div class="select-basic select-blue" style="width: 250px;">
    ...
</div>
<br>
<div class="select-basic select-red" style="width: 250px;">
    ...
</div>
<br>
<div class="select-basic select-green" style="width: 250px;">
    ...
</div>

Tables

TH 1 TH 2 TH 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3

TH 1 TH 2 TH 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3

TH 1 TH 2 TH 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3

TH 1 TH 2 TH 3
Row 1 Col 1 Row 1 Col 2 Row 1 Col 3
Row 2 Col 1 Row 2 Col 2 Row 2 Col 3

HTML Code


<table class="table-basic">
    <tr>
        <th>TH 1</th>
        <th>TH 2</th>
        <th>TH 3</th>
    </tr>
    <tr>
        <td>Row 1 Col 1</td>
        <td>Row 1 Col 2</td>
        <td>Row 1 Col 3</td>
    </tr>
    <tr>
        <td>Row 2 Col 1</td>
        <td>Row 2 Col 2</td>
        <td>Row 2 Col 3</td>
    </tr>
</table>
<br>
<table class="table-basic table-blue">
    ...
</table>
<br>
<table class="table-basic table-red">
    ...
</table>
<br>
<table class="table-basic table-green">
    ...
</table>

Checkboxes

HTML Code


<label class="c-box-basic">One
    <input type="checkbox" checked="checked">
    <span class="checkmark"></span>
</label>
<label class="c-box-basic c-box-blue">Two
    ...
</label>
<label class="c-box-basic c-box-red">Three
    ...
</label>
<label class="c-box-basic c-box-green">Four
    ...
</label>

Radio Buttons

HTML Code


<label class="r-btn-basic">One
    <input type="radio" checked="checked" name="radio">
    <span class="checkmark"></span>
</label>
<label class="r-btn-basic r-btn-blue">Two
    ...
</label>
<label class="r-btn-basic r-btn-red">Three
    ...
</label>
<label class="r-btn-basic r-btn-green">Four
    ...
</label>

Labels




HTML Code


<label class="lbl-basic">Label 1 - type 1</label>
<br>
<label class="lbl-basic lbl-blue">Label 2 - type 1</label>
<br>
<label class="lbl-basic lbl-red-invert">Label 1 - type 2</label>
<br>
<label class="lbl-basic lbl-green-invert">Label 2 - type 2</label>

Headers & Footers

Examples of headers and footers are displayed on new page. Click on button below.


Cards

avatar

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque dolorem aperiam quia. Numquam eaque iste, sequi perferendis iure doloribus, optio nisi quibusdam quisquam explicabo quos ipsa tempore aut eos eveniet?

avatar

Title

Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque dolorem aperiam quia. Numquam eaque iste, sequi perferendis iure doloribus, optio nisi quibusdam quisquam explicabo quos ipsa tempore aut eos eveniet?

HTML Code


<div class="card-basic">
    <img src="avatar.png" alt="avatar">
    <h2>Title</h2>
    <div>
        <p>Lorem ipsum...</p>
    </div>
</div>
<div class="card-basic-out">
    ...
</div>

You can use other colors also
(e.g. "card-basic card-blue" for blue)

Other useful staff

You can use class ".bg-color-blue" to paint background of any object in blue color or any of tree other colors we used in LexaN.

Also, you can use class ".txt-color-blue" to paint text in appropriate color.

Font used on this page is "Raleway"