alert! this project is under development. if you want to contribute to make it better, fill up an issue on github!

.sudotrap { css toolkit built on top of html5 boilerplate }

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.

DOWNLOAD

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Lorem ipsum dolor sit amet
  6. Consectetur adipiscing elit
  7. Integer molestie lorem at massa
  8. 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

Legend

Example block-level help text here.

HOW-TO

normal rounded

Legend

Example block-level help text here.

HOW-TO

inline

HOW-TO

inline rounded

HOW-TO

horizontal form

HOW-TO

validation states

HOW-TO

validation states rounded

HOW-TO

buttons

default buttons

success buttons

info buttons

warning buttons

danger buttons

default buttons - rounded

success buttons - rounded

info buttons - rounded

warning buttons - rounded

danger buttons - rounded

HOW-TO