NeoBrutalismCSS

Design framework that embraces the aesthetics of neo-brutalism in web

Getting Started

Getting Started

To begin using NeoBrutalismCSS in your web projects, follow these simple steps:

  1. Installation: Download the NeoBrutalismCSS library from the official website or include it via a package manager like npm, pnpm or yarn.

    npm install neobrutalismcss

    or Include CSS: Include the NeoBrutalismCSS stylesheet in the ` ` section of your HTML document: 

    <link rel="stylesheet" href="https://unpkg.com/neobrutalismcss@latest" />

  2. HTML Structure: Create your web page using the provided CSS classes and components, as demonstrated in the documentation.

  3. Customization: Customize the styles and components according to your project's design requirements by overriding NeoBrutalismCSS classes.

That's it! You're now ready to create web designs with the unique aesthetics of NeoBrutalism using NeoBrutalismCSS.

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

Components

Buttons

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

                  
                  
    <button class="nb-button default"> Click Here </button>
    <button class="nb-button orange"> Click Here </button>
    <button class="nb-button blue"> Click Here </button>
    <button class="nb-button green"> Click Here </button>

    <button class="nb-button default rounded"> Click Here </button>
    <button class="nb-button orange rounded"> Click Here </button>
    <button class="nb-button blue rounded"> Click Here </button>
    <button class="nb-button green rounded"> Click Here </button>

Inputs

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

                  
                  
    <input class="nb-input default" placeholder="Text" />
    <input class="nb-input orange" placeholder="Text" />
    <input class="nb-input blue" placeholder="Password" />
    <input class="nb-input green" placeholder="Email@example.com" />

Checkbox

Section showcases checkbox style provided by NeoBrutalismCSS. 

                    
                    
<div class="dialog">
  <label class="nb-label">Bike
    <input type="checkbox" id="vehicle1" class="nb-checkbox" name="vehicle1" value="Bike">
  </label>
  <label class="nb-label">Car
     <input type="checkbox" id="vehicle2" class="nb-checkbox" name="vehicle2" value="Car">
  </label>
      <label class="nb-label">Boat
      <input type="checkbox" id="vehicle3" class="nb-checkbox" name="vehicle3" value="Boat">
  </label>
</div>

Card

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

Explore NeoBrutalismCSS
October 8, 2023

Explore NeoBrutalismCSS: A Revolutionary library

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

Learn More ->

 
                  
                  
   <div class="card">
      <a href="https://example.com">
         <div class="card-thumbnail">
            <img src="assets/card-img.svg" loading="lazy" alt="Explore NeoBrutalismCSS" class="card-thumbnail"/>
          </div>
          <div class="card-content">
             <div class="text-small">October 8, 2023</div>
                    <p>
                        <strong>Explore NeoBrutalismCSS: A Revolutionary library</strong>
                    </p>
                    <p>Unveil the future of NeoBrutalism with our groundbreaking approach that will transform your life.</p>
                    <p><strong>Learn More -></strong></p>
             </div>
        </a>
   </div>

Badge

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

Excellence

                  
                   
<div class="badge bg-orange text-white">
    <div class="badge-inner">
        <p class="badge-text">Excellence</p>
    </div>
</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

Not sure how I feel about it

                  
                  
   <div class="dialog">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima
      officiis officia, nulla commodi repellat modi ab et ea! Excepturi molestiae voluptatibus
      voluptatum</p>
      <p>Not sure how I feel about it</p>
      <div class="button-container">
         <button class="nb-button default">Cancel</button>
         <button class="nb-button green">Save</button>
      </div>
   </div>

Marquee

Section demonstrates a marquee component provided by NeoBrutalismCSS.

Item 1 Item 2 Item 3 Item 4 Item 5 
                  
                  
   <div class="marquee">
      <div class="marquee-content">
         <span>Item 1</span>
         <span>Item 2</span>
         <span>Item 3</span>
         <span>Item 4</span>
         <span>Item 5</span>
      </div>
   </div>

Avatar

Section demonstrates an avatar component provided by NeoBrutalismCSS.

Avatar 
                  
                  
   <div class="avatar bg-pale-red">
      <img src="assets/avatar-1.png" alt="Avatar" />
   </div>

Modal

Section demonstrates a modal component provided by NeoBrutalismCSS.

Modal Title

Content for the modal

                  
                   
   <input type="checkbox" id="modal">
   <label for="modal" class="nb-button rounded green">Open Modal</label>
   <label for="modal" class="modal-background"></label>
   <div class="modal dialog">
      <div class="modal-header">
         <h3> Modal Title</h3>
         <label for="modal" class="close"></label>
      </div>
      <p>Content for the modal</p>
   </div>

Alert

Section demonstrates an alert component provided by NeoBrutalismCSS.

This is a success alert

This is a danger alert

This is a warning alert

This is an info alert

                  
                  
   <div class="alert success">
      <p>This is a success alert</p>
   </div>
   <div class="alert error">
      <p>This is a danger alert</p>
   </div>
   <div class="alert warning">
      <p>This is a warning alert</p>
   </div>
   <div class="alert info">
      <p>This is an info alert</p>
   </div>

Accordion

Section demonstrates an accordion component provided by NeoBrutalismCSS.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis! 
                  
<div class="accordion">
       <input class="accordion-tab" type="checkbox" id="tab1" />
       label  class="accordion-label bg-blue" for="tab1">Item 1</label>
       <div class="accordion-content">
       Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
       </div>
</div>

Dropdown

Section demonstrates an dropdown component provided by NeoBrutalismCSS. 

                  
<select class="dropdown">
   <option value="option1">Option 1</option>
   <option value="option2">Option 2</option>
   <option value="option3">Option 3</option>
</select>

Colors

Section, you can see different colored background elements with their respective color names. NeoBrutalismCSS offers a range of background colors.

#ff5733 orange

#0077b6 blue

#40d39c green

#b9e2f8 sky-blue

#ffc5c8 pale-red

#bc98cb pale-violet

#4799ae soft-blue

#b9e7de pale-cyan

#fdfd96 pale-yellow