Simple Neubrutalism

Getting Started

A lightweight, zero-dependency CSS framework for bold neubrutalism interfaces.

Installation

Node.js / npm

npm install @mangarosa/simple-neubrutalism

CDN

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

Color Palette

Primary#FFD93D

Secondary#FFB200

Background#FFF8E3

Border#4C3D3D

None#E6DDC4

CSS Variables

Variable	Light	Dark
--primary-color	#FFD93D	#FFB200
--secondary-color	#FFB200	#FFD93D
--background-color	#FFF8E3	#2C2317
--font-color	#4C3D3D	#FFF8E3
--border-color	#4C3D3D	#4C3D3D
--none-color	#E6DDC4	#3D3522

Button

Three variants: default <button>, enhanced .nbtl-button, and minimal .clear-button.

Preview

Enhanced

HTML

<button>Default Button</button>

<div class="nbtl-button">Enhanced Button</div>

<button class="clear-button">Clear Button</button>

<!-- Modifiers -->
<button rounded-full>Rounded</button>
<button dashed>Dashed</button>
<button dots>Dotted</button>
<button no-border>No Border</button>

JS

const btn = document.querySelector('button');
btn.addEventListener('click', () => {
  alert('Clicked!');
});

Playground

Input

Styled inputs for text, number, password, file, submit, and grouped actions.

Preview

HTML

<input type="text" placeholder="Text input">
<input type="password" placeholder="Password">
<input type="number" placeholder="Number">
<input type="file">

<!-- Input group -->
<div role="group">
  <input type="text" placeholder="Search...">
  <button>Go</button>
</div>

Playground

Checkbox

Characteristic checkbox with neubrutalist borders and custom checked state.

Preview

Check me out Already checked

HTML

<label style="display:flex;align-items:center;gap:12px;font-weight:bold;cursor:pointer;">
  <input type="checkbox"> Check me out
</label>

Datetime

Custom date and datetime picker with a neubrutalism popover instead of the native system UI.

Preview

HTML

<!-- Requires tags/datetime.js -->
<nb-datetime name="meeting"></nb-datetime>

<!-- Date only -->
<nb-datetime
  mode="date"
  name="birthday"
  placeholder="Select only a date">
</nb-datetime>

Playground

Textarea

Styled textarea with optional no-resize attribute.

Preview

HTML

<textarea rows="4" placeholder="Type..."></textarea>

<!-- No resize -->
<textarea no-resize rows="4"></textarea>

Playground

Label

Bold inline labels with neubrutalism borders and shadow.

Preview

Default Dotted Dashed

HTML

<label>Default Label</label>
<label dots>Dotted Label</label>
<label dashed>Dashed Label</label>

Playground

Badge

Small status indicators: default, none, success, error.

Preview

Default None Success Error

HTML

<span class="badge">Default</span>
<span class="badge badge-none">None</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-error">Error</span>

Playground

Link

Styled anchor with bold bottom border in secondary color.

Preview

This is a styled link

HTML

<a href="#">Styled link</a>

Playground

Image

Add the nbtl attribute for neubrutalism borders and shadow.

Preview

HTML

<img nbtl src="image.jpg" alt="Description">

<!-- Rounded -->
<img nbtl class="rounded-full" src="avatar.jpg">

Playground

Table

Full-width tables with bold borders and cell styling.

Preview

Name	Type	Status
Button	CSS	Stable
Modal	JS	Stable
Tabs	JS	Stable

HTML

<table>
  <thead>
    <tr><th>Name</th><th>Type</th></tr>
  </thead>
  <tbody>
    <tr><td>Item</td><td>Value</td></tr>
  </tbody>
</table>

Playground

Loading

Animated dots indicator.

Preview

Loading

HTML

<span class="loading-dots">Loading</span>

<!-- Fade out -->
<span class="loading-dots fade-out">Done</span>

Playground

Grid

CSS grid and flex layout using custom <grid> and <gridflex> elements.

Preview - grid

Item 1

Item 2

Item 3

Preview - gridflex

Flex 1 Flex 2 Flex 3 Flex 4

HTML

<!-- Auto-fit grid (min 300px cols) -->
<grid>
  <article>Item 1</article>
  <article>Item 2</article>
</grid>

<!-- Flex wrap -->
<gridflex>
  <label>Item 1</label>
  <label>Item 2</label>
</gridflex>

Playground

Article

Card container with optional sticky header and footer. Use the window attribute for a window-style title bar.

Preview - default

Article Title

Content with neubrutalism styling - bold borders and offset shadow.

Preview - window

Window Title

Content inside a window-style article card.

HTML

<!-- Default article -->
<article>
  <header><h3>Title</h3></header>
  <p>Content here.</p>
  <footer>Footer</footer>
</article>

<!-- Window variant -->
<article window>
  <header>Window Title</header>
  <p>Content here.</p>
  <footer>Footer</footer>
</article>

Playground

Dropdown

Hover-activated dropdown menu.

Preview

HTML

<div class="dropdown">
  <button class="dropdown-button">Menu</button>
  <div class="dropdown-content">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
  </div>
</div>

Playground

Select

Custom select web component replacing the native OS dropdowns.

Preview

HTML

<!-- Requires tags/select.js -->
<nb-select name="framework" placeholder="Choose a framework">
  <option value="react">React</option>
  <option value="vue">Vue</option>
  <option value="angular">Angular</option>
</nb-select>

Playground

Modal

Full-screen overlay with grid-pattern background and JS API.

Preview

HTML

<!-- Option 1: Using modal.js auto-wiring -->
<button class="openModal-mymodal"
  target-modal="my-modal">Open</button>

<div class="modal" id="my-modal">
  <div class="modal-content">
    <button class="close-modal"
      xclose-modal>&times;</button>
    <h3>Title</h3>
    <p>Content</p>
  </div>
</div>

<!-- Option 2: Manual open/close via [open] attribute -->
<button onclick="document.getElementById('my-modal')
  .setAttribute('open', '')">Open</button>

JS

// Include modal.js:
// <script src="tags/modal.js"></script>

// modal.js auto-wires .openModal-* buttons
// and .close-modal buttons. You can also
// control modals manually:

const modal = document.getElementById('my-modal');

// Open & close via the [open] attribute (CSS-driven):
modal.setAttribute('open', '');    // open
modal.removeAttribute('open');     // close

// Or use the JS methods added by modal.js:
modal.open();   // open
modal.close();  // close

// Callbacks (use function name, no parentheses):
// <div class="modal"
//   action-open-callback="onModalOpen"
//   action-close-callback="onModalClose">

Tabs

Tab navigation with animated content switching.

Preview

Content for Tab 1.

Content for Tab 2.

Content for Tab 3.

HTML

<div class="tabs">
  <button class="tablinks active"
    onclick="openTab(event, 'tab1')">Tab 1</button>
  <button class="tablinks"
    onclick="openTab(event, 'tab2')">Tab 2</button>
</div>

<div id="tab1" class="tabcontent"
  style="display:block">
  <p>Tab 1 content</p>
</div>

<div id="tab2" class="tabcontent">
  <p>Tab 2 content</p>
</div>

JS

// Include tabs.js — provides openTab() automatically:
// <script src="tags/tabs.js"></script>

// openTab() is already defined by tabs.js.
// Just use onclick="openTab(event, 'tabId')"
// on each .tablinks button.

Utilities

Attribute modifiers for borders, shapes, and grouping.

Preview

Input Group (role="group")

Left

Right

HTML

<!-- Border modifiers -->
<button no-border>No Border</button>
<button dots>Dotted</button>
<button dashed>Dashed</button>

<!-- Shape -->
<button class="rounded-full">Round</button>
<div no-rounded>No radius</div>

<!-- Input group -->
<div role="group">
  <input type="text" placeholder="...">
  <button>Go</button>
</div>

<!-- Vertical rule -->
<div class="vr"></div>

Essentials

Layout helpers: containers, margins, paddings, flex, typography.

Preview

Container

.container (max-width: 1200px, centered)

Flex

Left Right

Typography

font-bold font-italic font-normal

HTML

<!-- Container -->
<div class="container">...</div>

<!-- Flex -->
<div class="flex justify-space-between">
  <label>Left</label>
  <label>Right</label>
</div>

<!-- Typography -->
<span class="font-bold">Bold</span>
<span class="font-italic">Italic</span>
<span class="font-normal">Normal</span>

Getting Started

Installation

Color Palette

CSS Variables

Button

Input

Checkbox

Datetime

Textarea

Label

Badge

Link

Image

Table

Loading

Grid

Article

Dropdown

Select

Modal

Modal Title

Tabs

Utilities

Essentials

Colors