Docs

NeoBrutalismCSS is designed with simplicity in mind. Say goodbye to the complexities of learning numerous class names found in other frameworks. Instead, it follows a minimalist approach by applying fundamental styles based on HTML semantics.

Embrace a streamlined, no-frills approach to web design with NeoBrutalismCSS and start creating modern, neo-brutalist aesthetics with ease.

NeoBrutalismCSS doesn't provide any fonts, but we do maintain the following list of fonts that we recommend for usage alongside our framework for your convenience: Stint Ultra Expanded, Proza Libre, Lexend Mega and Public Sans

Buttons

Section showcases different button styles offered by NeoBrutalismCSS, including default, orange, blue, and green buttons.

                      
                      
        <button class="nb-button default">Default</button>
        <button class="nb-button orange">Orange</button>
        <button class="nb-button blue">Blue</button>
        <button class="nb-button green">Green</button>
        

        <button class="nb-button default rounded">Default</button>
        <button class="nb-button orange rounded">Orange</button>

Inputs

Section demonstrates various input field styles, including default, orange, blue, and green inputs, provided by NeoBrutalismCSS.

                      
                      
        <input class="nb-input default" placeholder="Default" />
        <input class="nb-input orange" placeholder="Orange" />
        <input class="nb-input blue" placeholder="Blue" />
        <input class="nb-input green" placeholder="Green" />

Card

Section presents a card with text content and image. It illustrates a user interface component provided by NeoBrutalismCSS for cards.

Card Title

Unveil the future of NeoBrutalism with our groundbreaking approach that will transform your life.

                      
                      
       <div class="nb-card">
          <img src="..." class="nb-card-img">
          <div class="nb-card-content">
              <h4 class="nb-card-title">Card Title</h4>
              <p class="nb-card-text">...</p>
              <div class="nb-card-actions">
                  <button class="nb-button">Learn More</button>
              </div>
          </div>
       </div>

Navigation

Section demonstrates navigation components provided by NeoBrutalismCSS.

Navbar

Breadcrumbs

    
    
<nav class="nb-navbar" role="navigation" aria-label="Main navigation">
    <a href="/" class="nb-navbar-brand" aria-label="Go to homepage">Brand</a>
    <ul class="nb-navbar-nav" role="menubar">
        <li class="nb-navbar-item" role="none">
            <a href="/" class="nb-navbar-link active" role="menuitem" aria-current="page">Home</a>
        </li>
        <li class="nb-navbar-item" role="none">
            <a href="/about" class="nb-navbar-link" role="menuitem">About</a>
        </li>
        <li class="nb-navbar-item" role="none">
            <a href="/contact" class="nb-navbar-link" role="menuitem">Contact</a>
        </li>
    </ul>
</nav>

<nav class="nb-breadcrumb" role="navigation" aria-label="Breadcrumb">
    <div class="nb-breadcrumb-item">
        <a href="/" class="nb-breadcrumb-link" aria-label="Go to homepage">Home</a>
    </div>
    <div class="nb-breadcrumb-item">
        <a href="/products" class="nb-breadcrumb-link" aria-label="Go to products page">Products</a>
    </div>
    <div class="nb-breadcrumb-item">
        <span class="nb-breadcrumb-current" aria-current="page">Current Page</span>
    </div>
</nav>

Form Components

Section demonstrates additional form components provided by NeoBrutalismCSS.

Textarea

Radio Buttons

Option 1

Form Group

Message

    
    
<textarea class="nb-textarea" placeholder="Enter your message..."></textarea>

<input type="radio" id="radio1" class="nb-radio" name="radio-group">
<label for="radio1">Option 1</label>

<div class="nb-form-group">
    <label for="name">Name</label>
    <input type="text" id="name" class="nb-input">
</div>

Badge

Section presents a badge with text. It illustrates a user interface component provided by NeoBrutalismCSS for badges.

Default

Orange

Blue

Green

                      
                       
    <div class="badge orange">
        <div class="badge-inner">
            <p class="badge-text">Excellence</p>
        </div>
    </div>

Checkbox

Section showcases checkbox style provided by NeoBrutalismCSS.

Default Orange Blue Green

                        
                        
      <label class="nb-label">Default
        <input type="checkbox" class="nb-checkbox default" checked>
      </label>
      <label class="nb-label">Orange
         <input type="checkbox" class="nb-checkbox orange" checked>
      </label>
          <label class="nb-label">Blue
          <input type="checkbox" class="nb-checkbox blue" checked>
      </label>

Table

Section demonstrates table components provided by NeoBrutalismCSS.

Basic Table

Name	Email	Status
John Doe	john@example.com	Active
Jane Smith	jane@example.com	Inactive
Bob Johnson	bob@example.com	Active

Table with Container

User Management

ID	Name	Role
1	Admin User	Administrator
2	Regular User	User

    
    
<table class="nb-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
        </tr>
    </tbody>
</table>

<div class="nb-table-container">
    <div class="nb-table-header">Title</div>
    <table class="nb-table">...</table>
    <div class="nb-table-footer">Footer</div>
</div>

Progress & Spinner

Section demonstrates feedback components provided by NeoBrutalismCSS.

Progress Bar

75%

50%

90%

Spinner

                      
                      
<div class="nb-progress">
    <div class="nb-progress-bar" style="width: 75%"></div>
    <div class="nb-progress-text">75%</div>
</div>

<div class="nb-spinner"></div>
<div class="nb-spinner dots"><span></span></div>

Dialog

Section presents a dialog box with text content and buttons. It illustrates a user interface component provided by NeoBrutalismCSS for dialogs and pop-ups.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima officiis officia, nulla commodi repellat modi ab et ea! Excepturi molestiae voluptatibus voluptatum

                      
                      
       <div class="nb-dialog">
            <div class="nb-dialog-header">Dialog Header</div>
            <div class="nb-dialog-body">...</div>
            <div class="nb-dialog-footer">
                <button class="nb-button">Cancel</button>
                <button class="nb-button green">Save</button>
            </div>
       </div>

Avatar

Section demonstrates an avatar component provided by NeoBrutalismCSS.

SM

MD

                      
                      
       <div class="avatar avatar-sm">SM</div>
       <div class="avatar avatar-md blue">MD</div>
       <div class="avatar avatar-lg pale-red">
          <img src="..." alt="Avatar" />
       </div>

Marquee

Section demonstrates a marquee component provided by NeoBrutalismCSS.

Item 1 Item 2 Item 3 Item 4 Item 5

                      
                      
       <div class="nb-marquee green">
          <div class="nb-marquee-content">
             <span>Item 1</span>
             <span>Item 2</span>
          </div>
       </div>

Responsive Utilities

NeoBrutalismCSS provides a comprehensive set of responsive utility classes that you can apply directly to your HTML elements. These utilities help you create responsive layouts without writing custom CSS.

Display Utilities

Control element visibility and display properties across different breakpoints.

Block

Hidden

Flex

Grid Utilities

Create responsive grid layouts with automatic breakpoint adjustments.

Grid Item 1

Grid Item 2

Grid Item 3

Flex Utilities

Control flex direction and layout across breakpoints.

Spacing Utilities

Apply responsive padding and margins to elements.

This element has responsive padding: 1rem on mobile, 2rem on desktop

Text Utilities

Control text alignment and responsive font sizes.

Responsive Heading

This text is responsive and centered

Width Utilities

Control element widths and maximum widths responsively.

This container has a maximum width that adapts to screen size

                      
                      
<!-- Display Utilities -->
<div class="nb-block">Block</div>
<div class="nb-hidden">Hidden</div>
<div class="nb-flex">Flex</div>

<!-- Grid Utilities -->
<div class="nb-grid-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Flex Utilities -->
<div class="nb-flex-row nb-flex-col-sm">
    <button>Button 1</button>
    <button>Button 2</button>
</div>

<!-- Spacing Utilities -->
<div class="nb-p-2 nb-p-md-4">
    <p>Responsive padding</p>
</div>

<!-- Text Utilities -->
<h1 class="nb-text-2xl nb-text-md-3xl nb-text-center">Heading</h1>

<!-- Width Utilities -->
<div class="nb-max-w-md">
    <p>Responsive width</p>
</div>

Breakpoint Reference

Breakpoint Classes

Breakpoint	Screen Size	Class Suffix	Example
Small	576px+	`-sm`	`nb-hidden-sm`
Medium	768px+	`-md`	`nb-text-md-lg`
Large	992px+	`-lg`	`nb-flex-lg`
Extra Large	1200px+	`-xl`	`nb-block-xl`

Available Utility Classes

Display

nb-hidden - Hide element
nb-block - Display block
nb-flex - Display flex
nb-grid - Display grid
nb-inline - Display inline
nb-inline-block - Display inline-block
nb-inline-flex - Display inline-flex

Grid

nb-grid-1 - 1 column
nb-grid-2 - 2 columns (responsive)
nb-grid-3 - 3 columns (responsive)
nb-grid-4 - 4 columns (responsive)

Flex

nb-flex-col - Flex column
nb-flex-row - Flex row with wrap
nb-flex-col-sm - Column on small+
nb-flex-row-md - Row on medium+

Spacing

nb-p-1 to nb-p-4 - Padding
nb-m-1 to nb-m-4 - Margin
nb-p-sm-1 to nb-p-sm-4 - Responsive padding
nb-m-md-1 to nb-m-md-4 - Responsive margin

Text

nb-text-center - Center align
nb-text-left - Left align
nb-text-right - Right align
nb-text-sm to nb-text-3xl - Font sizes
nb-text-sm-lg to nb-text-md-3xl - Responsive sizes

Width

nb-w-full - Full width
nb-w-auto - Auto width
nb-max-w-sm to nb-max-w-xl - Max widths
nb-max-w-sm-lg to nb-max-w-md-xl - Responsive max widths