Black-and-White Polygraphic CSS Framework

A comprehensive CSS framework designed for minimalist, black-and-white web design.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is a paragraph of text that is part of the body copy.

This is a blockquote. It is styled with a left border and italic text.

Unordered list item 1
Unordered list item 2
Unordered list item 3

Ordered list item 1
Ordered list item 2
Ordered list item 3

This is an inline code example.

This is a block of preformatted text.

It respects the whitespace.

Layout

Column 1 (4/12)

Column 2 (4/12)

Column 3 (4/12)

Column 1 (6/12)

Column 2 (6/12)

This is a section with padding and background color.

Flex Item 1

Flex Item 2

Flex Item 3

Spacing

This div has a margin of 2rem.

This div has padding of 2rem.

This div is 50% wide.

This paragraph has a line height of 2.

This paragraph has a letter spacing of 0.1rem.

Stylistic Elements

This div has a solid border.

This div has a dashed border.

This div has a dotted border.

This div has rounded corners.

This div has a box shadow.

Interactive Elements

Media

Utilities

This text is centered.

This div is displayed inline-block.

This div is displayed as a block.

Positioned Element

Responsiveness

Resize the browser window to see how the layout adjusts based on different screen sizes.

Column 1

Column 2

Column 3

Accessibility

This section showcases elements with ARIA roles and focus states.