Tiny BRUTALISM CSS Library

A simple, bold, and minimal CSS library for brutalist web design.

Only 4KB in size!

Typography

This library uses the 'Roboto Mono' font and provides basic styling for headings and paragraphs.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Paragraph text goes here. It has a default bottom margin for proper spacing.

This is a text link

Containers

Containers center the content and provide padding.

This is a box container with padding and border.

Grid System

Use the grid system to create responsive layouts with flexible columns.

.col-6

.col-4

.col-3

.col-2

.col-10

Buttons

Stylish buttons with hover effects.

Button Link

Forms

Basic form elements with bold styles.

Alerts

Different types of alert messages.

This is an info alert.

This is a warning alert.

This is a danger alert.

Modals

Example of a modal dialog. Click the button to open the modal.

Progress Bars

Progress bars to indicate progress.

25% Complete

50% Complete

75% Complete

100% Complete

Code Container

Stylized container for displaying code snippets.


/* Example of CSS code block */
body {
    font-family: 'Roboto Mono', monospace;
    background-color: #fff;
}

.box {
    padding: 1rem;
    border: 2px solid #000;
    box-shadow: 4px 4px 0 #000;
}

Utility Classes

Tiny Brutalism includes utility classes for margin control.

Default box

Box with margin-top: 1rem (.mt-1)

Box with margin-bottom: 1rem (.mb-1)

Box with margin-right: 1rem (.mr-1)

Box with margin-left: 1rem (.ml-1)

Box with margin-top: 2rem (.mt-2)

This text is centered using .text-center

Built with tiny-brutalism

Collection of Apps and websites utilizing tiny-brutalism.

-------------

Sample apps, available on github

Brutalist DEX // Task Manager // Tinder

Installation

Add Tiny Brutalism CSS to your project:

Local Installation

<link rel="stylesheet" href="tiny-brutalism.css">

CDN Installation

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pruger/tiny-brutalism-css/tiny-brutalism.css">

⭐ Support Tiny Brutalism CSS ⭐

If you find this framework useful, please consider:

Star on GitHub