Brutal is a classless CSS library based on Neo Brutalism ui design trend. It contains styled versions of the main the main components in HTML such as Buttons and Forms.

A cake written Brutal beign throw on a table and destroyed

# Usage

Use Brutal through CDN by putting the following into your html head:

<link href='https://fonts.googleapis.com/css?family=Public Sans' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Kanit' rel='stylesheet'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/VitorEstevam/Brutal@main/style.css">

And, without adding any css, turn your pages from this, into that

# Color variation

You can change the background and accent colors using css variables

:root {
    --background-color: var(--light-yellow);
    --accent-color: var(--yellow);
}

You can use any color you want, but some a small set is available:

--blue

--light-blue

--green

--light-green

--yellow

--light-yellow

--orange

--light-orange

--pink

--light-pink

--purple

--light-purple

# Hints and tips

Adding the following code snippet on your page will make the colors change on every update.

const colors = ["blue", "green", "yellow", "orange", "pink", "purple"];
const color = colors[Math.floor(Math.random() * colors.length)]
document.documentElement.style.setProperty('--background-color', "var(--light-" + color + ")");
document.documentElement.style.setProperty('--accent-color', "var(--" + color + ")");

Breaking the single rule we have, a single class is available. Use .bordered to add a hard border with shadow in any component you want.

Use it wisely 👍

# Acknowledgements

I`m not a designer (yet), just a fullstack dev that wanted to create a class css framework, so if you want to know more neo brutalism design trend or how to create more complex components, here are some links i readed about it