Layout

A layout website is been created by porting and optimizing the code from 960 Grid System. 12 columns, width of the main block is 60px, the distance between columns and rows is 20px.

Base

Base of a layout is a node with the class .grid. Inside of the node you should locate a container with the class .row, witch divides the layout by rows.

Containers with the classes .cell-x allow you create different combination of columns and rows.

<div class="grid">
	<div class="row">
		<div class="cell-5">
			...
		</div><!-- cell-5 -->
		<div class="cell-7">
			...
		</div><!-- cell-7 -->
	</div><!-- row -->
</div><!-- grid -->

12-columns layout demo

cell-1

cell-2 - 140px

cell-2

cell-3 - 220px

cell-3

cell-4 - 300px

cell-4

cell-5 - 380px

cell-7

cell-6 - 460px

cell-6

cell-7 - 540px

cell-5

cell-8 - 620px

cell-4

cell-9 - 700px

cell-3

cell-10 - 780px

cell-2

cell-11 - 860px

cell-1

cell-12 - 940px

Nested columns

To create more complex layouts you can embed containers <div class="row">...</div>:

<div class="grid">
	<div class="row">				<!-- 1 level -->
		<div class="cell-6">
			<div class="row">			<!-- 2 level -->
				<div class="cell-1">...</div>
				<div class="cell-4">...</div>
				<div class="cell-1">...</div>
			</div><!-- row -->
			<div class="row">			<!-- 2 level -->
				<div class="cell-2">...</div>
				<div class="cell-2">...</div>
				<div class="cell-2">...</div>
			</div><!-- row -->
		</div><!-- cell-6 -->
		<div class="cell-6">
			<div class="row">			<!-- 2 level -->
				<div class="cell-6">...</div>
			</div><!-- row -->
			<div class="row">			<!-- 2 level -->
				<div class="cell-3">...</div>
				<div class="cell-3">...</div>
			</div><!-- row -->
		</div><!-- cell-6 -->
	</div><!-- row -->
</div><!-- grid -->

Example of nested columns

cell-1

cell-4

cell-1

cell-2

cell-6

cell-3

Navigation

Horizontal navigation

To implement the simplest horizontal navigation you need to use the list with the class <ul class="nav">...</ul>:

<ul class="nav">
	<li><a href="#">First option</a></li>
	<li class="active"><a href="#">Second is active</a></li>
	<li><a href="#">Third option</a></li>
	<li><a href="#">Last option</a></li>
</ul><!-- nav -->

Active navigation option is selected by the class .active.

As a result we get the following navigation menu:

Horizontal tabs

There is an additional the class .nav-tabs, witch changes the horizontal navigation menu design:

<ul class="nav nav-tabs">
	...
</ul><!-- nav-tabs -->

Vertical navigation

To create vertical navigation you need to use the list with the class .nav-list:

<ul class="nav-list">
	<li><a href="#">First option</a></li>
	<li class="active"><a href="#">Second is active</a></li>
	<li><a href="#">Third option</a></li>
	<li><a href="#">Last option</a></li>
</ul><!-- nav-list -->

Vertical tabs

To create vertical tabs you need to append the additional the class .nav-tabs:

<ul class="nav-list nav-tabs">
	...
</ul><!-- nav-tabs -->

Navigation panel

The panel contains two base elements, .nav-bar and nested .body. Inside of the panel you can locate a logo (.title) and navigation (.nav):

<div class="nav-bar">
	<div class="body">
		<div class="title">
			<a href="#">alpha</a>
		</div><!-- title -->
		<ul class="nav">
			<li><a href="#">...</a></li>
		</ul><!-- nav -->
	</div><!-- body -->
</div><!-- nav-bar -->

Fixed navigation panel

If you would like you can fix the panel at the top adding the class .fixed:

<div class="nav-bar fixed">
	...
</div><!-- fixed -->

Bread crumbs

Bread crumbs can be created by using general list with the class <ul class="breadcrumbs">...</ul>:

<ul class="breadcrumbs">
	<li><a href="#">Main</a></li>
	<li><a href="#">Category</a></li>
	<li><a href="#">Nested category</a></li>
	<li class="cur">Product</li>
</ul><!-- breadcrumb -->

Bread crumbs example

Page-by-page navigation

The class <div class="pager">...</div> is used as a base for page-by-page navigation. Inside of the container are located links.

«Next» and «Previous» links are separated by the classes .pager.prev and .pager.next. The active element is the class .active.

<div class="pager">
	<ul>
		<li class="pager prev"><a href="#">Prev</a></li>
		<li><a href="#">1</a></li>
		<li class="active"><strong>2</strong></li>
		<li><a href="#">3</a></li>
		<li class="pager next"><a href="#">Next</a></li>
	</ul>
</div><!-- pager -->

Page-by-page navigation is centered by default:

You can change to left alignment by adding the class .pager.left:

Or right alignment by .pager.right:

Typography

Headers and paragraphs

For headings and paragraphs is set font sizes and bottom offset by default.

First-level headers (H1)

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

Second-level headers (H2)

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Third-level headers (H3)

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Fourth-level headers (H4)

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Tables

The below you can see an explanation of tables decoration using default table layout:

<table>
	<caption>...</caption>
	<thead>
		<tr>
			<th>...</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>...</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>...</td>
		</tr>
	</tbody>
</table>

List of browsers
№	Browser name (tag th)
Table footer (tag tfoot)
1	Chrome
2	Firefox
3	Safari
4	Opera
5	Internet Explorer

You can additionaly decorate every odd row with the class <table class="zebra">...</table>.

№	Browser name (tag th)
Table footer (tag tfoot)
1	Chrome
2	Firefox
3	Safari
4	Opera
5	Internet Explorer

Regular, numbered lists, and definition lists

General list <ul>:

First element
Second element
Third element
Last element

Numbered list <ol>:

First element
Second element
Third element
Last element

List of definitions <dl>:

First term <dt>: Definition for first term <dd>
Second term: Definition for second term

Tags to decorate content

To decorate text:

An element	Usage example
`<a href="#">...</a>`	link
`<i>` and `<em>`	italic and accented text
`<b>` and `<strong>`	bold and accented text
`<mark>`	marked text
`<small>`	small text
`<abbr title="...">...</abbr>`	SPAM
`<cite>` and `<q>`	citation and quote text
`<code>` and `<dfn>`	`source code` and new term
`<kbd>`	«hot» key `<Ctrl>+<S>`
`<var>` and `<samp>`	variable name `variableName` and `terminal text`
`<ins>` and `<del>`	added text and ~~removed text~~
`<sub>` and `<sup>`	_low index and ^up index text

To decorate blocks

<blockquote> is for long citation:

A citation — A citation is a reference to a source. More precisely, a citation is an abbreviated alphanumeric expression embedded in the body of an intellectual work that denotes an entry in the bibliographic references section of the work for the purpose of acknowledging the relevance of the works of others to the topic of discussion at the spot where the citation appears.

https://en.wikipedia.org/wiki/Citation

<hr> tag example:

<address> Earth planet, Some Country, Any city, Line str. 5

Formatted text example; tag <pre>...</pre>

Thumbnails

Pictures and text

Class .thumb is used for blocks with text and picture. Use the class .pic for pictures. Text is located in a container with the class .text.

<div class="thumb">
	<img class="pic" src="..." alt="..." />
	<div class="text">
		...
	</div><!-- text -->
</div><!-- thumb -->

Plasma pulsar: highlights

The gamma-ray quantum is translucent for hard radiation. The front stretches the exothermic quasar as the signal propagates in an environment with an inverse population.

To align the image to the right, you need to additionally assign the class .right to the block.

<div class="thumb right">
	...
</div><!-- thumb -->

Plasma pulsar: highlights

The gamma-ray quantum is translucent for hard radiation. The front stretches the exothermic quasar as the signal propagates in an environment with an inverse population.

Gallery

To render pictures set there is the class .gallery for the container with the set and .item for an gallary element which is used with layout classes:

<div class="row gallery">
	...
	<div class="cell-2 item">
		<a href="#"><img src="https://via.placeholder.com/130x80/FD020B/FFFFFF/?text=130%20x%2080" width="140" height="80" alt="pic" />
 		<small>Picture title</small></a>
	</div><!-- item -->
	...
</div><!-- gallery -->

Picture title

The elements are combined with known layout classes .row, .cell-1, .cell-2, .cell-3 etc.

Picture title

Columns

To build columns with the same content width and fixed offsets between them base element is used .column-x with nested .column. Where x can be: 1, 2, 3 or 4.

2 columns

To render 2 columns with 50%/50% width, use the class .column-2 with necessary 2 nested elements with the class .column.

<div class="column-2">
	<div class="column">
		...
	</div><!-- column -->
	<div class="column">
		...
	</div><!-- column -->
</div><!-- column-2 -->

This is first column with 50% width.

This is second column with 50% width.

3 columns

To render 3 columns with 33.3% width each you need the class .column-3 with nested elements with the class .column.

<div class="column-3">
    <div class="column">
        ...
    </div><!-- column -->
    <div class="column">
        ...
    </div><!-- column -->
	<div class="column">
		...
	</div><!-- column -->
</div><!-- column-3 -->

This is first column with 33.3% width.

This is second column with 33.3% width.

This is third column with 33.3% width.

4 columns

To render 4 columns with 25% width each you need the class .column-3 with nested elements with the class .column.

<div class="column-4">
    <div class="column">
        ...
    </div><!-- column -->
    <div class="column">
        ...
    </div><!-- column -->
    <div class="column">
        ...
    </div><!-- column -->
    <div class="column">
        ...
    </div><!-- column -->
</div><!-- column-4 -->

This is first 25% width column.

This is second 25% width column.

This is third 25% width column.

This is fourth 25% width column.

Forms

Text input boxes

To create text input box need the following:

<input type="text">
<input type="password">

As result you get the following boxes:

Buttons

To create button use the class .button:

<button class="button">Button</button>
<span class="button">Span</span>
<a href="#" class="button">Link</a>

The class you can use with the following tags: <button>, <span>, <a>:

Span Link

Color coding of buttons using classes: .default, .success, .warning

<button class="button default">Main action</button>

<button class="button success">Positive action</button>

<button class="button warning">Negative action</button>

You can create grouped buttons with the parent class .buttons:

<p class="buttons">
	<span class="button">1</span>
	<span class="button">2</span>
	<span class="button">3</span>
	...
</p><!-- buttons -->

12345

Radio inputs, check boxes and labels

The simplest construction contains minimum elements set like <label> and <input>.

Radio input must be included into label with the class .radio and check boxes must be included into label with the class .check.

<label class="radio"><input type="radio"> radio input</label>
<label class="check"><input type="checkbox"> check box</label>

radio input
check box

Select

In case you don't need any class and you need only <select> and <option>.

<select>
	<option>First option</option>
	<option>Second option</option>
	<option>Third option</option>
</select>

Input boxes width

To set width you need to use the class .cell-x.

Where x can be between 1 and 12.

Width can be set for buttons, select and input boxes:

<button class="button cell-1">.cell-1</button>
<input type="text" class="cell-2" value=".cell-2">
<input type="text" class="cell-3" value=".cell-3">
<select class="cell-4"><option>.cell-4</option></select>
<textarea class="cell-5">.cell-5</textarea>

.cell-5

Notices

An element with the class .notice is for notice rendering.

The simplest example:

<div class="notice">
	<span class="close"></span>
	<strong>Important</strong>: this is the simplest notice
</div><!--notice -->

Attantion:: the text of simple notice

A notice with a title, a text and buttons. For this you need to use additional element with the class .actions:

<div class="notice">
	<span class="close"></span>
	<h5>The notice title</h5>
	<p>The example of a notice with a title and buttons</p>
	<p class="actions">
		<a class="button" href="#">Apply</a>
		<a class="button" href="#">Cancel</a>
	</p>
</div><!--notice -->

Title of the notice

Example of a notice with the title and buttons

Apply Cancel

Beyond a simple message you can use the class .error for a notice with a error:

<div class="notice error">
	...
</div><!--notice -->

Access is deny (a notice error)

For a notice with success you need to use the class .success:

<div class="notice success">
	...
</div><!--notice -->

Congratulation everything were well :)

Light

Compatible

Stylish

Standard

Simple

Social

How to connect

Layout

Base

12-columns layout demo

Nested columns

Example of nested columns

Navigation

Horizontal navigation

Horizontal tabs

Vertical navigation

Vertical tabs

Navigation panel

Fixed navigation panel

Bread crumbs

Bread crumbs example

Page-by-page navigation

Typography

Headers and paragraphs

First-level headers (H1)

Second-level headers (H2)

Third-level headers (H3)

Fourth-level headers (H4)

Tables

Regular, numbered lists, and definition lists

Tags to decorate content

To decorate text:

To decorate blocks

Thumbnails

Pictures and text

Plasma pulsar: highlights

Plasma pulsar: highlights

Gallery

Columns

2 columns

3 columns

4 columns

Forms

Text input boxes

Buttons

Radio inputs, check boxes and labels

Select

Input boxes width

Notices

Title of the notice