Simple Framework

The Simplest (CSS only) framework you will ever need.

Download Now

How to Use

<link href="path/to/simple.js" rel="stylesheet">

Or

<link href="path/to/smpl.min.js" rel="stylesheet">

Use .smpl class in your html tag and you are ready to go.

<html lang="en" class="smpl">


Grid System

Grid system can be activated using class .grid, the children will be rows and the and the children of every child will be a cell. You can add borders on cell using .border-in in the row. You can also center the content inside using .to-c-in.

1
2
1
2
3
1
2
3
4
1
2
3
4
5
1
2
3
4
5
6


Typo

Default web-safe font Helvetica, Arial, sans-serif

h1

h2

h3

h4

h5
h6

Normal text paragraph, .hoverable text bold text, italic text, marked text, emphasized text, error text, warning text, success text, a link


Shadows

There are 6 levels

.no shadow
.shadow-1
.shadow-2
.shadow-3
.shadow-4
.shadow-5
.shadow-6


Cards

Use .card on a div and use header, main and footer as template

This is a main tag section to add info

Second line paragraph

h3

header

h3

This is a main tag section to add info

Second line paragraph

h3

header

no footer

no header

h3

no content (also hoverable)


Tables

To make it responsive you have to wrap it up in a .responsive container

header A header B header C header D header E header F
data 1 A data 1 B data 1 C data 1 D data 1 E data 1 F
data 2 A data 2 B data 2 C data 2 D data 2 E data 2 F
data 3 A data 3 B data 3 C data 3 D data 3 E data 3 F
data 4 A data 4 B data 4 C data 4 D data 4 E data 4 F
data 5 A data 5 B data 5 C data 5 D data 5 E data 5 F
data 6 A data 6 B data 6 C data 6 D data 6 E data 6 F
footer A footer B footer C footer D footer E footer F


Chips

Use .chip class to convert any container into a chip

basic chip
.hoverable chip
.icon-r chip
.icon-l chip
.close-r chip close
.close-l chip close
.img-r chip
.img-l chip
.badge-r chip 12
.badge-l chip 34
multiple chip56


Tabs

.tabs class is used to organize data in a seamless layout

Title 1 Title 2 Title 3
Content A
Content B
Content C

There's also a dotted layout for indexing data

Content Dot A


List

Lists need no classes


Buttons

Only buttons, submit and a.btn can be buttons

Link Link Disabled


Dialogs

Use .card.dialog to create dialogs


App bar

Use header or footer with class .appbar to create it


Progress Indicators

Linear

25%

50%

75%

100%

Radial

25%

50%

75%

100%


Forms

form tag is already a grid, so no need to add the .grid class