Title `<h1>`

Stupid.css is yet another CSS frameworks, designed for those of us who are CSS challenged.

It is super small (~13kb uncompressed).

It it readable.

All the effects are PURE CSS - NO JS USED (*)

It flows the page content on narrow screens.

It is easy to style. We show examples of themes below

It it free (BSD).

This page is intentionally not too pretty.

Read the source of this page to learn it.

To use it simply include <link href="stupid.css" rel="stylesheet" type="text/css"/>

(*) This page only uses jQuery to allow you to click on each example and display the source code to the example in a model. The .stupid-example class is used to delimit clickable examples.

Section `<h2>`

Subsection `<h3>`

Subsubsection `<h4>`

Subsubsubsection `<h5>`

Buttons

By default buttons are styled. You can style a link as button with the .btn class and, optionally, .rounded class for rounded corners. Use colors names like .red to set the background. A list of color names is below. Foreground and borders are adjusted automatically. You can use the .pulse class to catch attention of the users. Text color is adjusted automatically based on background color.

.btn.red .btn.navy .btn.green .btn.orange.rounded .btn.white.pulse

.btn.small .btn (normal) .btn.large.purple.rounded

.btn.small.oval .btn.oval (normal) .btn.large.oval.olive

Of course nobody likes oval buttons but the purpose of .oval is to make circular buttons and circular images. To make an oval circular you must specify height and width to be the same

Icons

Stupid.css does not come with fonts but plays well with Font Awesome.

Menus

Check the <header> source of the page to learn about menus. Stupid.css supports menu dropdown of arbitrary depth. You can make the menu dark with .dark

Yes! We include pure CSS modals

open modal

Tooltips

For tooltips, you can used the data-tooltip="..." attribute as in this stupid-example. They can be colored as buttons.

Lists

Lists do not have bullets but are indented.

One
Two
Three

Tables

Tables are also automatically styled. Use .center to center the table in the page and .fill to fill the page width.

	Bla	Bla	Bla
Bla	Bla	Bla	Bla
Bla	Bla	Bla	Bla
Bla	Bla	Bla	Bla

Accordion

There are two types of accordions. Exclusive.

One

bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Two

Non exclusive:

Three

Two

The labels trigering the accordion can be in other panel:

One Two

one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one one

two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two

Progress

Stupid.css defines a progress bar similar to materialize.css.

Forms

Stupid.css does not require any special structure for forms and does not require special classes. Form elements are syled as below by default. You can use the grid elements (.quarter and .half) to align the form elements.

Text input

Checbox input

File input

Select Option

Textarea

Cards

Front! Mouseover here.

Back!

GRID

Stupid.css has a simple grid system with only these classes: .container, .quarter, .third, .half, .twothirds and .threequarters. You can put as many quarters, halfs, etc. into a container. They will flow accordingly. Stupid.css prevents them from squeezing below 200px, unless you use the class .compressible. You can use .max900 to make sure a conatiner is not wider than 900px and pad it left and right.

.half bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.half.compressible bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.padded.orange inside a .quarter bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.padded.lifted.pink inside a .threequarters .bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.padded.red inside a .half bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.quarter bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.quarter Images in grid are automatically resized to fit.

.third bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.twothirds bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

.third You can also put a table in the grid and it flows with the rest.

	Bla	Bla	Bla
Bla	Bla	Bla	Bla
Bla	Bla	Bla	Bla
Bla	Bla	Bla	Bla

Sidebar

.quarter padded sidebar in a .black.container bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Main content

.threequarters.white in the same .black.container bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Main content

.threequarters.white in .pink.container bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Sidebar

.quarter padded sidebar in a .pink.container

Option One Option Two Option Three

A centered .quarter column. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

A centered .third column. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

A centered .half column. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

A centered .twothirds column. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

A centered .threequarters column. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Complete list of stupid.css classes

Grid	`.container`, `.quarter`, `.third`, `.half`, `.twothirds`, `.threequarters`, `.fill`, `.compressible`, `.center`, `.right`, `.max900`, `.xscroll`, `.yscroll`
Modifiers	`.hidden`, `.lifted`, `.rounded`, `.oval`, `.nowrap`, `.padded`, `.spaced`, `.relative`
Buttons	`.btn`, `.small`, `.large`, `.tags`, `.dismissible`, `.off`
Menu	`.menu`, `.dark`, `.ham`, `.burger`
Effects	`.accordion`, `.card`, `.pulse`, `.modal`, `.close`, `.progress`, `.determinate`, `.indeterminate`, `.noeffect`, `.sidebar`
Colors

Styling and themes

Stupid is easy to style. Here are some examples of themed pages:

Random Theme Landing Page Jumbotron Dashboard Flipping Gallery Marine

Here is the typical page structure: Open

<html>
  <head>
    <link href="stupid.css" rel="stylesheet"/>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
  </head>
  <body>
    <header class="black">
      <div class="container max900">
        <div class="fill middle">
          <ul class="menu">...</ul>
        </div>
      </div>
    </header>
    <main>
      <div class="container max900">
        <div class="quarter">
          ...
        </div>
        <div class="threequarters">
          ...
        </div>
      </div>
    </main>
    <footer class="black">
      <div class="container max900">
        <div class="third">...</div>
        <div class="third">...</div>
        <div class="third">...</div>
      </div>
    </footer>
  </body>
</html>

You only need to override the colors below: Open

                
header { background-color: #111111; color: #FFFFFF }                
header a { color: #FFFFFF }
main { background-color: #111111; color: #FFFFFF }
footer { background-color: #111111; color: #FFFFFF }

/* link effects */
a { color: #26A69A }
a:not(.btn):not(.noeffect):after { background-color: #26A69A }
a:not(.btn):not(.noeffect):hover { color: #26A69A }
a:not(.btn):not(.noeffect):hover:after { color: #26A69A }

/* buttons */
.btn, button, [type=button], [type=submit]
 { color: white; background-color: #26A69A }
.btn-default   { background-color: #26A69A }
.btn-primary   { background-color: #1C959E }
.btn-error     { background-color: #FF0000 }
.btn-alert     { background-color: #D2CDB6 }
.btn-info      { background-color: #8AC7FD }

/* tables */
tbody tr:hover { background-color: #fbf6d9 }
thead tr       { background-color: #f1f1f1 }
tbody tr       { border-bottom: 2px solid #f1f1f1 }

Note that .btn-* are not defined in stupid.css but we recommend you define and use them in your themes.

stupid.css

Title <h1>

Section <h2>

Subsection <h3>

Subsubsection <h4>

Subsubsubsection <h5>

Buttons

Icons

Menus

Modals

Hello from modal

Tooltips

Tags

Lists

Tables

Accordion

Progress

Forms

Cards

GRID

Sidebar

Main content

Main content

Sidebar

Complete list of stupid.css classes

Styling and themes

Example Source

Title `<h1>`

Section `<h2>`

Subsection `<h3>`

Subsubsection `<h4>`

Subsubsubsection `<h5>`