The Simplest (CSS only) framework you will ever need.
<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 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.
Default web-safe font Helvetica, Arial, sans-serif
Normal text paragraph, .hoverable text bold text, italic text, marked text, emphasized text, error text, warning text, success text, a link
There are 6 levels
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
header
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 |
footer A | footer B | footer C | footer D | footer E | footer F |
Use .chip class to convert any container into a chip
.tabs class is used to organize data in a seamless layout
There's also a dotted layout for indexing data
Lists need no classes
Only buttons, submit and a.btn can be buttons
Use .card.dialog to create dialogs
This is the informaton section
Use header or footer with class .appbar to create it
App Title
25%
75%
form tag is already a grid, so no need to add the .grid class