soot.css

Introduction

soot.css is a classless CSS stylesheet. Its goal is to be lightweight, opinionated, and flexible. It's meant to be a drop-in stylesheet for small and medium-sized websites. It was inspired by concrete.css, new.css and countless brutalist websites on the internet. It's available on GitHub and NPM.

I hope that this little library brings you joy!

Usage

Link the latest stable version with Unpkg:

<link rel="stylesheet" href="https://unpkg.com/[email protected]/soot.min.css">

Link the latest development version with jsDelivr:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kauz-gmbh/soot.css@main/soot.min.css">

Install the npm package:

npm i soot.css

Configuration

I try to keep things configurable with CSS variables. Here's an overview of things you can easily tweak!

Variable	Default	Description
`--color-bg`	`#0A0A0A`	Primary background
`--color-fg`	`#ECECEC`	Primary text color
`--color-accent`	`#C85A3A`	Links, focus states, highlights
`--color-border`	`#ECECEC`	Primary border color
`--color-border-light`	`rgba(236, 236, 236, 0.1)`	Light borders, subtle outlines
`--color-muted`	`#7A7A7A`	Muted text, captions
`--color-surface`	`#1A1A1A`	Elevated surfaces, code blocks
`--spacing-unit`	`0.5rem`	Base spacing increment
`--max-content-width`	`960px`	Maximum content width
`--line-height-base`	`1.6`	Base line height
`--line-height-relaxed`	`1.7`	Paragraph line height
`--border-thin`	`1px solid var(--color-border-light)`	Thin borders, inline elements
`--border-normal`	`2px solid var(--color-border-light)`	Standard borders, sections, forms
`--border-heavy`	`4px solid var(--color-border)`	Accent borders, blockquotes

Example

:root {
  --color-accent: #ff0066;
  --spacing-unit: 0.375rem;
  --max-content-width: 1200px;
}

If you don't like the centered layout with the max width, you can toggle this switch to get a full-bleed layout.

<body data-full-bleed>

Images

Brutalist buildings often have a fortress-like appearance, with heavy, blocky forms.

Figures

Lists

Unordered lists for unordered thoughts.

Create honest, unpretentious buildings that reveal their structure and materials.
Incorporates social and political ideals, emphasizing equality and accessibility.
Withstand the test of time, with durable materials and robust construction.

Ordered lists for straight priorities.

Brutalist buildings are often celebrated for their bold, uncompromising designs.
The style has experienced a resurgence in recent years, with renewed interest from architects and designers.
Brutalism has influenced other architectural styles, such as high-tech and postmodernism.

Definition lists for short explanations.

Béton brut: French: "raw concrete"; the origin of the term brutalism
Le Corbusier: A Swiss-French architect; considered one of the pioneers of Brutalism
Barbican Centre: Cultural venue in London, and prime example of brutalist architecture

Forms

Tables

Famous brutalist architecture
Building	Year	Location	Status
Neguri Gane	2002	Benidorm, Alicante, Valencia, Spain	In use
Akbar Hotel	1969	New Delhi, Delhi, India	In use
AT&T Long Lines Building	1981	Manhattan, New York, New York, USA	In use
Banco Central do Brasil	1974	Brasilia, Distrito Federal, Brazil	In use
Lister Tor	1975	Hanover, Lower Saxony, Germany	In use

Quotes

"It is our intention to have the structure exposed entirely, without interior finishes, wherever practicable."
Alison Smithson, 1953.

Another good one:

"Brutalist architecture was Modernism's angry underside, and was never, much as some would rather it were, a mere aesthetic style. It was a political aesthetic, an attitude, a weapon, dedicated to the precept that nothing was too good for ordinary people."
Owen Hatherley, 2010