Introduction to the simplecss

Simplecss is a css/javascript library designed to build responsive web-layouts in an easily and effortless way. It is free and release under mit license. Internally simpleCSS uses a lightweight javascript library zjs for dom manipulation e you can make easily user interface components like grid, menu, button simply adding attributes on you html/xhtml code.

Simplecss uses normalizze.css to makes browsers render all elements more consistently and Font-Awesome to gives you scalable vector icon. That's all! ;)

Getting started

1. download library

Download simplecss library and unzip the folder. Copy all files and directory in your web site path. Zip folder structure:
  • css folder: contains stylesheets and fonts used by simpless
  • js folder: contains javascript files

2. prepare template page

Here's a simple basic example of a html page that uses simplecss library:
<!DOCTYPE html>
<html>
    <head>
        [Your html head code]
        <link rel="stylesheet" type="text/css" href="YOUR_PATH/css/simplecss.min.css"> 
    </head>
    <body>
        [Your html code]
        
        <!-- library for the manipulation of the dom (optionally) -->
        <script src="YOUR_PATH/js/zjs.min.js"></script>
        <!-- library used for menus, dialogs etc ... -->
        <script src="YOUR_PATH/js/simplecss.min.js"></script> 
    </body>
</html>

Browser support

Firefox Chrome Ie8+ Safari Opera

Common components

The Headings h1 h2 h3 h4 h5 h6

Title 1

<h1>Titolo 1</h1>

Title 2

<h2>Titolo 2</h2>

Title 3

<h3>Titolo 3</h3>

Title 4

<h4>Titolo 4</h4>
Title 5
<h5>Titolo 5</h5>
Title 6
<h6>Titolo 6</h6>

style as they associate the top and bottom of 10px

The paragraph tag p

Nullam id dolor id nibh ultricies vehicula.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p>Nullam id dolor id nibh ultricies vehicula.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

The small element

The small element is a small text with afont-size:80%

Example:

Contact the seller if you are interested

Send

The u element

The u tag is used to insert an underline to the text

Nullam quis risus eget urna mollis ornare vel eu leo.

The s element

The s tag is used to seal a text

Nullam quis risus eget urna mollis ornare vel eu leo.

The mark element

The mark tag you use it when for example you want to highlight an example of code

Example:

Use the class.border to insert the edge element

The i element

The i tag is used to transform the text from normal to italics

Example:

Nullam quis risus eget urna mollis ornare vel eu leo

The cite element

The cite tag is used to indicate the title of a book or work etc ...

Example:

Lo straniero di Albert Camus 1942

The b element and strong

The b tag end the strong tag are used to give a stylus more often to the text.

Example:

Lo straniero di Albert Camus 1942