Everything you need is in this one CSS-file.
rainbow-classless is written with CSS variables, so you can easily change colors, sizes, border-radius and much more in your only CSS-file.
HTML Reference
Click for complete reference
The following styles have its own styles in rainbow-classless:
<a> — Text links. States for :active, :focus, :hover and :visited
<abbr>— Abbreviations, i.e. CSS - Cascading StyleSheets
<blockquote>— Quotes
<button>— :focus
<code>— Code
<details> and <summary>— Dropdown menu for details.
<dt> and <dd>— Terms and items in definition lists
<figure>— Block-sized container for images
<figcaption>— Captions for image-container
<form>
<fieldset>— Container for form elements.
<input>— Several of these include disabled, :focus and :hover states
<type['button']>
<type['checkbox']>— Styled as inline-block
<type['radio']>— Styled as inline-block
<type['reset']>— Styled with lighter colors
<type['submit']>
<select>— Dropdown menu with options. Includes :focus state.
<textarea>— Textarea. Includes :focus state.
<h1> - <h6>— Headings
<hr>— Horizontal ruler
<img>— Image
<kbd>— Keyboard input Ctrl + C
<mark>— Highlighted text
<nav>— Navbar
Create a complete navbar with nav > ul > li
<p>— Paragraph
<pre>— Preformatted text
<samp>— Sample output
<small>— Small text
<table>— Alternately colored, includes :hover states
Elements
Typography
A paragraph with text, some strong text, some emphasized text and a link.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis ullamcorper sem congue ac.
Quisque id magna rhoncus, sodales massa vel, vestibulum elit. Duis ornare accumsan egestas. Proin maximus lacus interdum leo molestie convallis.
This paragraph has some highlighted text, and and an abbreviation: HTML.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut iaculis risus eu felis feugiat, eu mollis neque elementum.
Donec interdum, nisl id dignissim iaculis, felis dui aliquet dui, non fermentum velit lectus ac quam.
All headlines have heavier font-weight and darker color.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Image
No specific styles, except limiting max-width to 100% of the container. Images contained within a <figure> is displayed as block and can have a small <figcaption>.
A small figcaption
Table
Tables have hover states and alternating row colors.
abc
acb
acb
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
abc
Quote
Display quotes with a little margin on top, bottom and to the left.
True freedom is impossible without a mind made free by discipline.
- Mortimer J. Adler
Code
Use <pre> and <code> together to display code. Use <mark> to highlight important parts.
rolls = 1000
results = int()
dice = [4, 6, 8, 10, 12, 20]
for i in range(rolls):
for die in range(len(dice)):
roll = random.randint(1, dice[die])
while roll == 1:
roll = roll + random.randint(1, dice[die])
results += roll
print(results / rolls)
Form
Different types of input and buttons have different :focus and :hover states. Forms can be wrapped in a <fieldset> with a narrow, rounded border.
Disabled input
All above form elements can be disabled if needed.
Navbar
No classes, just nav > ul > li > a.
Elements are aligned with justify-content: space-between
For an example, see the top navigation of this site. Go to top
