css-toolset

Elegant styles, without classes

css-toolset is small css library that apply elegant styles to your documents, without you need to add any class.

It ideal for css rookies, people with null graphics design skill, or for create MVP (minimal viable products) with elegant styles and on the fly.

There will always be time later to hire a good graphic designer.

How to use:

Simply link css-toolset stylesheet to your documents and you are ready to code.


How to personalize:

After link css-toolset stylesheet, you can insert style block and overwrite this values.

:root {
  --text-color: #222;
  --background-color: #fff;
  --primary-color: #0081a7;
  --danger-color: #e63946;

  --body-max-width: 1024px;
  --font-family: system-ui, sans-serif;
  --line-height: 1.5;
  --border-radius: 3px;
  --shadow: 0 0 4px -1px var(--primary-color);
}

Examples of principal elements:

Buttons elements


This is a h4 with class .title

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5
Heading h6

OL and UL elements

Order lists

  1. List item 1
  2. List item 2
  3. List item 3

Un order lists


Blockquote and cite elements.

This is a blockquote and q element.
And this a cite element.

Forms elements

This is the from style

* The submit button will be visible when all required values has been completed


Tables

Very important people list
Name Age Range Comments
John Doe 21-45 I want to get new computer for work on web developer. Please,call my to...
Sara Connor 21-45 I kill all machines with my hands.
Rick Sanchez 45+ The universe is basically an animal. It grazes on the ordinary. It creates infinite idiots just to eat them.
Morty Smith 11-20 Nobody exists on purpose. Nobody belongs anywhere. We’re all going to die. Start coding now.
Name Age Range Comments
See a big table example.