d0 - Classless CSS microframework

v1.0.19

npm i d0css

Minimalist and lightweight (minified and gzipped CSS <3 KB)
Styling is not based on classes, additional attributes and hacks
Just tags and some cascading
Uses native elements and behaviour when possible
Valid CSS and HTML
Pure CSS, no Javascript
Basic elements typography
Responsive wrapper, grid, nav, form, image
Printable style
Customizable with css variables
Neutral defaults
Does not use float, !important

Togglers

nav > ul, header > nav > ul

Nav inside header has background.
Submenu of last item drops to the left.

nav[id] > ul

Inline block. Empty first li makes it pop .

Toggle

section[id]

Show hidden section

Hidden section

aside[id]

Open modal dialog

Gallery

figure[id] > a > img, figure[id] > a[style="--img:url(...);"]

Show gallery A (linked images, all loaded)
Show gallery B (URL in CSS variable, lazy loading, preload next)

Tabs

nav > ul ~ section[id]

Layout

Wrap (limit max-width)

main

Grid (stacked on small screen)

section > table, section > table td[colspan]

Proportions of columns can be set with colspan or width attributes on td.

Header
Content paragraph Newline		Aside paragraph
Footer

Full height

figure > section

Full height

Table

table, figure > table

Table inside figure has hover effect and (when needed) independent horizontal scrolling.

Table caption
Component	Support	Action	Code
Menu	*	hover, responsive	`nav > ul, header > nav > ul`
Popup	*	hover	`nav[id] > ul`
Toggle	*	target	`section[id]`
Modal	*	target	`aside[id]`
Gallery	*	target	`figure[id] > a > img, figure[id] > a[style="--img:url(...);"]`
Tabs	*	target	`nav > ul ~ section[id]`
Wrap	*	max-width	`main`
Grid	*	responsive	`section > table, section > table td[colspan]`
Full	*	height	`figure > section`
Table	*	hover, h-scroll	`table, figure > table`
Form	*	responsive	`form > input, form > p > label + br + input, form > table`
Alert	*	color	`figure > mark, figure > b, figure > i, figure > em, mark > button, span > button, mark > a`
Icon	+	size	`svg`

Form

Inline form

form > input

Stacked form

form > p > label + br + input

Aligned form (stacked on small screen)

form > table, input ~ mark

Typography

Alert and status colors

figure > mark, figure > b, figure > i, figure > em,
mark > button, span > button, mark > a

Error

Warning

Info

Success

Icon

svg

Link with icon Marked link with icon

Elements

The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor.

Placeholder Image and Some Alt Text

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

Blockquote

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

"This is a blockquote. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl."

This is a standard paragraph. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Figure-Caption

A placeholder figure image. — The figcaption element example

Details-Summary

The summary element example

The details example text. It may be styled differently based on what browser or operating system you are using.

Text Elements

The a element and external a element examples

The abbr element and an abbr element with title examples

The b element example

The cite element example

The code element example

The data element example

The ~~del element~~ example

The dfn element and dfn element with title examples

The em element example

The i element example

The ins element example

The kbd element example

The mark element example

The q element example

The q element inside a q element example

The ~~s element~~ example

The samp element example

The small element example

The span element example

The strong element example

The _{sub element} example

The ^{sup element} example

The time element example

The u element example

The var element example

Monospace / Preformatted

Code block wrapped in "pre" and "code" tags

// Loop through Divs using Javascript.
var divs = document.querySelectorAll('div'), i;

for (i = 0; i < divs.length; ++i) {
  divs[i].style.color = "green";
}

Monospace Text wrapped in "pre" tags

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

List Types

Ordered List

List Item 1
List Item 2
List Item 3
1. List Item 3.1
2. List Item 3.2
  1. List Item 3.2.1
  2. List Item 3.2.2
3. List Item 3.3
List Item 4

Unordered List

List Item 1
List Item 2
List Item 3
- List Item 3.1
- List Item 3.2
  - List Item 3.2.1
  - List Item 3.2.2
- List Item 3.3
List Item 4

Definition List

Definition Term 1: Definition Description 1
Definition Term 2: Definition Description 2

Tables

This is a table caption
Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
A row with a cell spanning all 3 columns
Table Footer 1	Table Footer 2	Table Footer 3

Media

The Audio Element:

The Video Element:

Embedded content (iframe):

Form Elements

The Fieldset:

Legend

The Form:

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Disabled Text Area:
I'm disabled

Readonly Text Area:
I'm readonly

Select Element:

Disabled Select Element:

Radio Buttons:
Radio 1
Radio 2
Radio 3
Radio Disabled

Checkboxes:
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox Disabled

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range:

Output:
42

Progress:

Meter:
350 degrees

d0 - Classless CSS microframework

Togglers

Menu (stacked on small screen)

Popup

Toggle

Modal

Gallery

Tabs

Layout

Wrap (limit max-width)

Grid (stacked on small screen)

Full height

Table

Form

Inline form

Stacked form

Aligned form (stacked on small screen)

Typography

Alert and status colors

Icon

Elements

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Headings with Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block Elements

Paragraphs and Images

Blockquote

Figure-Caption

Details-Summary

Text Elements

Monospace / Preformatted

List Types

Ordered List

Unordered List

Definition List

Tables

Media

The Audio Element:

The Video Element:

Embedded content (iframe):

Form Elements

HTML5-specific Form Elements