Page Logo

owl-css

Example page for owl-css

Introduction

owl-css is a minimal style sheet, almost with out classes. I've initially developed it for my blog software, but started using it for other projects too. The style can easily be adjusted by overwriting css variables in the :root element.

Usage

TODO





Examples

Text

Headings

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Inline text elements

Link<a>

Abbr.<abbr>

Bold <strong> <b>

Italic <i> <em> <cite>

Deleted <del>

Inserted <ins>

Ctrl + S <kbd>

Highlighted <mark>

Strikethrough <s>

Small <small>

Text Sub <sub>

Text Sup <sup>

Underline <u>

Code <code>

List

Unordered List

Ordered List

  1. Ordered List 1
    1. Sub List 1
    2. Sub List 2
    3. Sub List 3
    4. Sub List 4
      1. Sub Sub List 1
      2. Sub Sub List 2
      3. Sub Sub List 3
      4. Sub Sub List 4
  2. Ordered List 2
  3. Ordered List 3
  4. Ordered List 4

Quote

“Design is a funny word. Some people think design means how it looks. But of course, if you dig deeper, it's really how it works.”
— Steve Jobs

Horizontal rule

Table

Column 1 Column 2 Column 3 Column 4 Column 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5
Cell 1 Cell 2 Cell 3 Cell 4 Cell 5

Buttons

Link Button

Classes for buttons



Forms

Inputs

Inputs

Inline Inputs

Reverse Inline Inputs

Navigation

Detail

Summary

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis. Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arcu lobortis. Nam et turpis a leo commodo imperdiet.

Pre

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sodales felis pulvinar auctor convallis.
Maecenas luctus nec magna quis convallis. Donec vestibulum risus nec metus consectetur, at rhoncus arculobortis.
Nam et turpis a leo commodo imperdiet.