alert! this project is under development. if you want to contribute to make it better, fill up an issue on github!
Simple is better
Hi! My name is William Oliveira and I've decided to create this project to myself, to improve my knowledge over CSS and also because I wanted a very simple toolkit using Flat UI concepts.
If you like it, great! Set up a project and be happy.
grid system
sudotrap uses rwdgrid as grid system. Try to resize your browser window and see what happens.
grid 12
grid 1
grid 11
grid 2
grid 12
grid 3
grid 9
grid 4
grid 8
grid 5
grid 7
grid 6
grid 6
grid 7
grid 5
grid 8
grid 4
grid 9
grid 3
grid 10
grid 2
grid 11
grid 1
grid 12
grid 16
grid 15
grid 1
grid 14
grid 2
grid 13
grid 3
grid 12
grid 4
grid 11
grid 5
grid 10
grid 6
grid 9
grid 7
grid 8
grid 8
grid 7
grid 9
grid 6
grid 10
grid 5
grid 11
grid 4
grid 12
grid 3
grid 13
grid 2
grid 14
grid 1
grid 15
grid 16
HOW-TO
typography
h1
sudotrap
h2
sudotrap
h3
sudotrap
h4
sudotrap
h5
sudotrap
h6
sudotrap
HOW-TO
blockquotes
normal
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
with source
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
William Oliveira in sudotrap
HOW-TO
lists
unordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Nulla volutpat aliquam velit
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Facilisis in pretium nisl aliquet
- Facilisis in pretium nisl aliquet
- Facilisis in pretium nisl aliquet
ordered
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
- Facilisis in pretium nisl aliquet
HOW-TO
tables
sudotrap uses Twitter Bootstrap as table's core. We just customized it a little bit. :-)
normal
| # | First Name | Last Name | Github user |
|---|---|---|---|
| 1 | William | Oliveira | @gnuwilliam |
| 2 | Allan | Esquina | @allanesquina |
| 3 | John | Doe | @johndoe |
HOW-TO
striped
| # | First Name | Last Name | Github user |
|---|---|---|---|
| 1 | William | Oliveira | @gnuwilliam |
| 2 | Allan | Esquina | @allanesquina |
| 3 | John | Doe | @johndoe |
HOW-TO
bordered
| # | First Name | Last Name | Github user |
|---|---|---|---|
| 1 | William | Oliveira | @gnuwilliam |
| William | Oliveira | @gnuwilliam | |
| 2 | Allan | Esquina | @allanesquina |
| 3 | John Doe | @johndoe | |
HOW-TO
hover rows
| # | First Name | Last Name | Github user |
|---|---|---|---|
| 1 | William | Oliveira | @gnuwilliam |
| 2 | Allan | Esquina | @allanesquina |
| 3 | John Doe | @johndoe | |
HOW-TO
condensed
| # | First Name | Last Name | Github user |
|---|---|---|---|
| 1 | William | Oliveira | @gnuwilliam |
| 2 | Allan | Esquina | @allanesquina |
| 3 | John Doe | @johndoe | |
HOW-TO
colored cells
| # | Column heading | Column heading | Column heading |
|---|---|---|---|
| 1 | Column content | Column content | Column content |
| 2 | Column content | Column content | Column content |
| 3 | Column content | Column content | Column content |
| 4 | Column content | Column content | Column content |
| 5 | Column content | Column content | Column content |
| 6 | Column content | Column content | Column content |
| 7 | Column content | Column content | Column content |
HOW-TO
forms
sudotrap also uses Twitter Bootstrap as forms core. But again, with some customization. :-)
normal
HOW-TO
normal rounded
HOW-TO
inline
HOW-TO
inline rounded
HOW-TO
horizontal form
HOW-TO
validation states
HOW-TO
validation states rounded