.sidebar.black

.sidebar.right.black

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>

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

Subsection <h3>

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

Subsubsection <h4>

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

Subsubsubsection <h5>

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

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.

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

Modals

Yes! We include pure CSS modals

Tooltips

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

Tags

Tags are just <span> inside .tags . They can be .tags.dismissible . Individual tags can be .off .

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 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

Non exclusive:

Three bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 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 bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla

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 Bla Two Three 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.