Uncouth CSS

A(nother) minimal, classless css library.

Yeah, but why?

I found myself applying the same base styles to a lot of demos and new projects I was creating. Use this to improve markup sites, or use as it as a base style for your next project! View on GitHub

Themes

There are currently two themes 'light' and 'dark', the main-auto.css file will automatically detect the preferred browser theme.


Unordered lists within a <nav> tag will be displayed as 'inline-block':

Lists

Unordered Lists <ul><li>

Ordered Lists <ol><li>

  1. Can you guess it yet?
  2. I don't know what to write here...
  3. ...At least it is in order.

Detail Lists <dt><dd>

Description 1
This is the first description list
Description 2
This is the second descriptive list

Tables

An example table with a caption
Heading 1 Heading 2 Heading 3
Sample Data Sample Data Sample Data
Sample Data Sample Data Sample Data
Footer Data Footer Data Footer Data

Typography

Paragraphs & inline text elements:

Here is some example text within a paragraph tag. This paragraph contains an inline strong tag and an inline italic tag.

Heading 1 Small

Heading 2 Small

Heading 3 Small

Heading 4 Small

Heading 5 Small
Heading 6 Small

Quotes:

"An SSL error occurred and the server could not be reached"

- Albert Einstein

Media

Images, videos and audio elements are responsive:

Image <img>
Image powered by https://picsum.photos/
Video <video>
Video source from https://developer. mozilla.org/en-US/docs/Web/HTML/Element/video
Audio <audio>
This example does not have an audio source attached.

Preformatted / Code <pre></pre><code></code>

An example of a paragraph that has inline code <code> block within it.

Preformatted text

         ___  ___  ________   ________  ________  ___  ___  _________  ___  ___
        |\  \|\  \|\   ___  \|\   ____\|\   __  \|\  \|\  \|\___   ___\\  \|\  \
        \ \  \\\  \ \  \\ \  \ \  \___|\ \  \|\  \ \  \\\  \|___ \  \_\ \  \\\  \
         \ \  \\\  \ \  \\ \  \ \  \    \ \  \\\  \ \  \\\  \   \ \  \ \ \   __  \
          \ \  \\\  \ \  \\ \  \ \  \____\ \  \\\  \ \  \\\  \   \ \  \ \ \  \ \  \
           \ \_______\ \__\\ \__\ \_______\ \_______\ \_______\   \ \__\ \ \__\ \__\
            \|_______|\|__| \|__|\|_______|\|_______|\|_______|    \|__|  \|__|\|__|

Details / Summary <details><summary></summary></details>

Interesting Summary! - Click to toggle the details

Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore error totam ipsa quas eligendi. Tempora ut quod vero aliquam tenetur, maiores animi, voluptatum unde asperiores natus commodi fuga quis labore?

Forms

Form