Simple Neubrutalism CSS

Uma biblioteca CSS simples e minimalista para criar interfaces com estilo Neubrutalism (Neo-Brutalismo).

Sobre

O Simple Neubrutalism CSS é uma biblioteca com componentes básicos para criar interfaces com o estilo Neo-Brutalista, caracterizado por:

• Bordas marcantes
• Sombras pronunciadas
• Cores vibrantes
• Visual "bruto" e direto

Características

• 🎨 Modo claro e escuro
• 🎯 Foco em simplicidade
• 📦 Componentes básicos prontos para uso
• 🗓 Componente customizado de date/datetime
• 🛠 Fácil de customizar através de variáveis CSS
• 🪶 Leve e sem dependências

Exemplos

Modo Claro

Modo Escuro

Uso

1. Adicione o loader unico no head:

<script src="neubrutalism.js"></script>

Isso carrega automaticamente neubrutalism.css e os JS de modal, tabs, select e datetime.

2. Se preferir continuar no modo modular:

<link rel="stylesheet" href="neubrutalism.css">
<script src="tags/modal.js"></script>
<script src="tags/tabs.js"></script>
<script src="tags/select.js"></script>
<script src="tags/datetime.js"></script>

3. Use os atributos e classes em seus elementos:

<!-- Botão com estilo neubrutalism -->
<button>Clique aqui</button>

<!-- Input com estilo neubrutalism -->
<input type="text" placeholder="Digite algo...">

<!-- Datetime customizado -->
<nb-datetime name="appointment"></nb-datetime>

<!-- Elemento com borda neubrutalism -->
<div nbtl-border>Conteúdo</div>

Instalacao

O projeto agora gera:

• dist/neubrutalism.css e dist/neubrutalism.min.css
• dist/neubrutalism.js e dist/neubrutalism.min.js
• dist/neubrutalism.all.js e dist/neubrutalism.all.min.js
• dist/tags/*.js, dist/tags/*.min.js, dist/tags/*.css, dist/tags/*.min.css

Node.js via npm:

npm install @mangarosa/simple-neubrutalism

CDN via jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/@mangarosa/simple-neubrutalism@latest/dist/neubrutalism.all.min.js"></script>

CDN modular:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mangarosa/simple-neubrutalism@latest/dist/neubrutalism.min.css">
<script src="https://cdn.jsdelivr.net/npm/@mangarosa/simple-neubrutalism@latest/dist/tags/select.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@mangarosa/simple-neubrutalism@latest/dist/tags/datetime.min.js"></script>

Customização

Você pode personalizar as cores e medidas através das variáveis CSS:

:root {
  --primary-color: #FFD93D;
  --border-color: #4C3D3D;
  --background-color: #FFF8E3;
  --font-color: #4C3D3D;
  --secondary-color: #FFB200;
  --border-size-default: 3px;
  --box-shadow-size-default: 6px;
}