### Quick Start CDN Installation Source: https://github.com/oshekharo/neubrutalism/blob/main/README.md Include the CSS and optional JavaScript files in the HTML head to initialize the library. ```html ``` -------------------------------- ### Install Neubrutalism CSS via CDN Source: https://context7.com/oshekharo/neubrutalism/llms.txt Include the core CSS and optional JavaScript in your HTML head for basic and interactive features. ```html My Neubrutalist Site ``` -------------------------------- ### Form Structure and Styling Source: https://context7.com/oshekharo/neubrutalism/llms.txt Provides an example of a complete form structure with styled inputs, groups, and a submit button. Inputs feature bottom-border styling with focus color transitions. ```html
``` -------------------------------- ### Customize Neubrutalism CSS Variables Source: https://context7.com/oshekharo/neubrutalism/llms.txt Override CSS custom properties in your root to theme the entire library. This example shows core colors, borders, shadows, spacing, typography, and transitions. ```css :root { /* Core Colors */ --nb-primary: #000; /* Primary color (black) */ --nb-secondary: #fff; /* Secondary color (white) */ --nb-accent: #3498db; /* Accent color for focus states */ /* Status Colors */ --nb-success: #2ecc71; /* Success state */ --nb-danger: #e74c3c; /* Error/danger state */ --nb-warning: #f39c12; /* Warning state */ --nb-info: #3498db; /* Information state */ /* Neutral Colors */ --nb-gray-100: #f8f9fa; --nb-gray-200: #e9ecef; --nb-gray-300: #dee2e6; --nb-gray-600: #6c757d; --nb-gray-900: #212529; /* Border & Shadow */ --nb-border-width: 2px; --nb-border-radius: 4px; --nb-shadow-offset: 4px; --nb-shadow-color: var(--nb-primary); /* Spacing */ --nb-spacing-xs: 5px; --nb-spacing-sm: 10px; --nb-spacing-md: 15px; --nb-spacing-lg: 20px; --nb-spacing-xl: 30px; /* Typography */ --nb-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --nb-font-size-sm: 0.8rem; --nb-font-size-base: 1rem; --nb-font-size-lg: 1.2rem; --nb-font-size-xl: 1.5rem; /* Transitions */ --nb-transition-fast: 0.2s ease; --nb-transition-base: 0.3s ease; } ``` -------------------------------- ### Animated Button Source: https://context7.com/oshekharo/neubrutalism/llms.txt An example of an animated button using the 'nb-btn-ani' class. This button includes hover effects with transform and shadow animations. ```html ``` -------------------------------- ### Define a JavaScript function Source: https://github.com/oshekharo/neubrutalism/blob/main/index.html A basic example of a function definition within a code block. ```javascript function example() { return "Neubrutalism"; } ``` -------------------------------- ### Progress Bars Source: https://context7.com/oshekharo/neubrutalism/llms.txt Visual progress indicators with semantic color variants and optional animation effects. Includes basic, colored, striped, and animated progress bar examples. ```html
50%
75%
45%
25%
Loading...
``` -------------------------------- ### Dashboard Card with Neubrutalism CSS Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md An example of a dashboard card component using Neubrutalism CSS. It features a header, a two-column grid for displaying metrics, and a progress bar. The progress bar width and text can be customized. ```html
Dashboard

Total Users

1,234

Revenue

$5,678

75% Goal
``` -------------------------------- ### Use Containers Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Layout containers with optional shadow and theme variants. ```html
Content
Container with shadow
Purple themed container
Yellow themed container
Cyan themed container
``` -------------------------------- ### Basic and Themed Containers Source: https://context7.com/oshekharo/neubrutalism/llms.txt Demonstrates basic layout containers and styled containers with themed shadows. Containers provide consistent spacing and optional decorative shadows. ```html

Page Content

Content is centered with max-width: 1200px

``` ```html
Default container with shadow
Purple themed container
Yellow themed container
Cyan themed container
``` -------------------------------- ### Create Responsive Grids Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Implement grid layouts using column-specific classes. ```html
Column 1
Column 2
Column 3
Column 1
Column 2
``` -------------------------------- ### Configure Transitions Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Define global transition speeds. ```css :root { --nb-transition-fast: 0.2s ease; --nb-transition-base: 0.3s ease; } ``` -------------------------------- ### Use Text Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Helper classes for common text styling needs. ```html

Larger, emphasized text for introductions.

Small text for fine print.

Less prominent text.

Highlighted text Ctrl + C ``` -------------------------------- ### Include Local CSS File Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use this method if you have downloaded the CSS file to your local project directory. ```html ``` -------------------------------- ### Use Code Block Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Preformatted code block component. ```html 
function example() {
  return "Neubrutalism";
}
``` -------------------------------- ### Create Masonry Grids Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use masonry layout for items with varying heights. ```html
Item 1
Tall Item
Item 3
``` -------------------------------- ### Use Display Headings Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Apply these classes for larger, more impactful headings. ```html

Display 1

Display 2

Display 3

Display 4

``` -------------------------------- ### Basic and Image Cards Source: https://context7.com/oshekharo/neubrutalism/llms.txt Shows how to structure cards with header, body, and footer sections, as well as cards incorporating images. Cards automatically include hover lift effects. ```html
Card Header

Card Title

Card content goes here. Cards automatically get hover lift effects.

``` ```html
Card image

Image Card

Cards can include images with the nb-card-image class.

``` -------------------------------- ### Configure Border and Shadow Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Adjust the global border width, radius, and shadow settings. ```css :root { --nb-border-width: 2px; --nb-border-radius: 4px; --nb-shadow-offset: 4px; --nb-shadow-color: var(--nb-primary); } ``` -------------------------------- ### Implement Navbar Source: https://context7.com/oshekharo/neubrutalism/llms.txt Creates a responsive navigation bar featuring a CSS-only hamburger menu for mobile devices. ```html ``` -------------------------------- ### Responsive Grid Layouts Source: https://context7.com/oshekharo/neubrutalism/llms.txt Illustrates the usage of the grid system for creating responsive layouts with 1 to 6 columns. Grids collapse to a single column on mobile devices. ```html
Column 1
Column 2
Column 3
``` ```html
Left Column
Right Column
``` ```html
Item 1
Item 2
Item 3
Item 4
``` -------------------------------- ### Build Tabs Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Tabbed interface using radio buttons to manage panel visibility. ```html
Tab 1 content
Tab 2 content
``` -------------------------------- ### Implement Alerts Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use these classes to display contextual feedback messages. Simple variants are also available for minimal styling. ```html
Success message!
Error message!
Warning message!
Info message!
Simple success!
Simple error!
``` -------------------------------- ### Testimonial Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A simple container for displaying user quotes. ```html

"Testimonial quote here." - Author

``` -------------------------------- ### Define Container Sizes Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use these classes to set fixed or fluid widths for layout containers. ```html
Small container (max-width: 540px)
Medium container (max-width: 720px)
Large container (max-width: 960px)
Extra large container (max-width: 1140px)
Fluid container (100% width)
``` -------------------------------- ### Standard and Styled Buttons Source: https://context7.com/oshekharo/neubrutalism/llms.txt Demonstrates various button styles including size variants, rounded, block, disabled states, and buttons with icons. Ensure the 'nb-btn' class is applied for base styling. ```html ``` ```html ``` ```html ``` -------------------------------- ### Implement Buttons Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Standard button components with various sizes, states, and icon support. ```html ``` -------------------------------- ### Implement Alerts Source: https://context7.com/oshekharo/neubrutalism/llms.txt Creates dismissible notification banners with semantic variants and hover lift effects. ```html
✓ Operation completed successfully!
✗ An error occurred. Please try again.
⚠ Warning: This action cannot be undone.
ℹ For your information: Updates available.
Simple success alert
Simple error alert
``` -------------------------------- ### Create Cards Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use cards to contain structured content, including headers, footers, and images. ```html
Header

Card Title

Card content goes here.

Description

Card Title

Card content.

``` -------------------------------- ### Configure Typography Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Set the font family and base font sizes. ```css :root { --nb-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --nb-font-size-sm: 0.8rem; --nb-font-size-base: 1rem; --nb-font-size-lg: 1.2rem; --nb-font-size-xl: 1.5rem; } ``` -------------------------------- ### Create Bordered Grids Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Apply a bordered style to grid layouts. ```html
Item 1
Item 2
Item 3
``` -------------------------------- ### Implement Tables Source: https://context7.com/oshekharo/neubrutalism/llms.txt Provides data tables with support for striping, borders, hover effects, and horizontal scrolling. ```html
ID Name Status
#001 John Doe Active
#002 Jane Smith Pending
← Scroll horizontally to see more →
``` -------------------------------- ### Configure Spacing Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Define spacing variables for consistent layout margins and padding. ```css :root { --nb-spacing-xs: 5px; --nb-spacing-sm: 10px; --nb-spacing-md: 15px; --nb-spacing-lg: 20px; --nb-spacing-xl: 30px; } ``` -------------------------------- ### Add Spinners and Loaders Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Visual indicators for loading states, including circle, square, and dot variants. ```html
``` -------------------------------- ### Width Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Utility classes for setting element width. ```css .nb-w-full /* width: 100% */ .nb-w-auto /* width: auto */ ``` -------------------------------- ### Configure Table Variants Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Various layouts for tables including scrollable containers, compact, borderless, and dense styles. ```html
← Scroll horizontally to see more →
``` ```html
``` ```html
``` ```html
``` -------------------------------- ### Display Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md CSS utility classes for controlling display and flexbox properties. ```css .nb-flex /* display: flex */ .nb-flex-column /* flex-direction: column */ .nb-flex-center /* justify-content: center; align-items: center */ .nb-flex-wrap /* flex-wrap: wrap */ .nb-inline-flex /* display: inline-flex */ .nb-block /* display: block */ .nb-inline-block /* display: inline-block */ .nb-hidden /* display: none */ ``` -------------------------------- ### Implement Modals Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A pure CSS modal implementation using the checkbox hack to toggle visibility. ```html

Modal Title

Modal content here.
``` -------------------------------- ### Apply Container Color Variants Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use color utility classes to change the background or theme of a container. ```html
Primary colored container
Success colored container
Warning colored container
Danger colored container
Info colored container
Light colored container
Dark colored container
``` -------------------------------- ### Implement Radio Buttons Source: https://context7.com/oshekharo/neubrutalism/llms.txt Creates radio button groups with support for semantic color variants. ```html ``` -------------------------------- ### Text Alignment and Font Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Utility classes for controlling text alignment, casing, and font weight. ```css .nb-text-left /* text-align: left */ .nb-text-center /* text-align: center */ .nb-text-right /* text-align: right */ .nb-text-uppercase /* text-transform: uppercase */ .nb-text-lowercase /* text-transform: lowercase */ .nb-text-capitalize /* text-transform: capitalize */ .nb-font-bold /* font-weight: bold */ .nb-font-normal /* font-weight: normal */ ``` -------------------------------- ### Display Tags Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use tags for categorization, including optional removable functionality. ```html Default Primary Success Danger Warning Removable × ``` -------------------------------- ### Focus States Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Default focus styling for interactive elements. ```css :focus-visible { outline: 2px solid var(--nb-accent); outline-offset: 2px; } ``` -------------------------------- ### Apply Container Styles Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Apply specific visual styles like borders, shadows, or centering to containers. ```html
Bordered container
Card-style container with larger shadow
Centered content
``` -------------------------------- ### Basic Form Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A standard form layout with input groups and a submit button. ```html
``` -------------------------------- ### Feature Box Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A card-like component for displaying features with an icon, title, and description. ```html
🎨

Feature Title

Feature description.

``` -------------------------------- ### Configure Status Colors Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Define colors for success, danger, warning, and information states. ```css :root { --nb-success: #2ecc71; /* Success state */ --nb-danger: #e74c3c; /* Error/danger state */ --nb-warning: #f39c12; /* Warning state */ --nb-info: #3498db; /* Information state */ } ``` -------------------------------- ### Configure Neutral Colors Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Set the gray scale palette for the application. ```css :root { --nb-gray-100: #f8f9fa; --nb-gray-200: #e9ecef; --nb-gray-300: #dee2e6; --nb-gray-400: #ced4da; --nb-gray-500: #adb5bd; --nb-gray-600: #6c757d; --nb-gray-700: #495057; --nb-gray-800: #343a40; --nb-gray-900: #212529; } ``` -------------------------------- ### Use Heading Elements Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Standard HTML heading tags are automatically styled with bold weights. ```html

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
``` -------------------------------- ### Feature Box Component Source: https://context7.com/oshekharo/neubrutalism/llms.txt Component to highlight features with an icon, title, and description. Suitable for grid layouts. ```html
⚡

Lightning Fast

Optimized performance with zero dependencies.

🎨

Beautiful Design

Bold, high-contrast aesthetic that stands out.

🔧

Fully Customizable

Easy theming with CSS custom properties.

``` -------------------------------- ### Accessibility Components Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md HTML snippets for skip links, screen reader text, and ARIA attributes. ```html Skip to main content ``` ```html Screen reader only text ``` ```html ``` -------------------------------- ### Complete Neubrutalism Landing Page HTML Source: https://context7.com/oshekharo/neubrutalism/llms.txt This HTML structure demonstrates a full landing page using Neubrutalism CSS components. It includes navigation, hero section, feature grid, and footer. Ensure the Neubrutalism CSS is linked in the head and the JavaScript in the body if interactive features are needed. ```html My Neubrutalist Site Skip to main content

Welcome

A bold, minimalist design.

Get Started
⚡

Fast

Lightning quick performance.

🎨

Beautiful

Stunning visual design.

🔧

Flexible

Easy to customize.

``` -------------------------------- ### Configure Core Colors Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Override primary, secondary, and accent colors using CSS custom properties. ```css :root { --nb-primary: #000; /* Primary color (black) */ --nb-secondary: #fff; /* Secondary color (white) */ --nb-accent: #3498db; /* Accent color for focus states */ } ``` -------------------------------- ### Display Progress Bars Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Progress indicators with support for colored variants, stripes, and animations. ```html
50%
75%
Loading...
``` -------------------------------- ### Create Tables Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Standard table structure using the nb-table class. Modifiers like nb-table-striped, nb-table-bordered, and nb-table-hover can be applied. ```html
Header 1 Header 2
Cell 1 Cell 2
``` -------------------------------- ### Container Size Variants Source: https://context7.com/oshekharo/neubrutalism/llms.txt Shows different container size variants, from small to fluid, controlling the maximum width of content. These classes ensure responsive layout adjustments. ```html
Small (max-width: 540px)
Medium (max-width: 720px)
Large (max-width: 960px)
Extra Large (max-width: 1140px)
Fluid (100% width)
``` -------------------------------- ### Implement Badges Source: https://context7.com/oshekharo/neubrutalism/llms.txt Displays inline status indicators with semantic colors and optional pill-shaped styling. ```html Default Primary Success Danger Warning Pill Badge Active ``` -------------------------------- ### Display Badges Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Use badges for labeling or status indicators. ```html Default Primary Success Danger Warning Pill Badge ``` -------------------------------- ### List Styles Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Provides various list styles including basic, ordered, and bulleted lists. Apply `nb-list-ordered` for numbered lists and `nb-list-bullet` for bullet points. ```html ``` -------------------------------- ### Spacing Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Margin and padding utility classes ranging from 0 to 4. ```css /* Margin */ .nb-m-0 /* margin: 0 */ .nb-m-1 /* margin: 5px */ .nb-m-2 /* margin: 10px */ .nb-m-3 /* margin: 15px */ .nb-m-4 /* margin: 20px */ /* Padding */ .nb-p-0 /* padding: 0 */ .nb-p-1 /* padding: 5px */ .nb-p-2 /* padding: 10px */ .nb-p-3 /* padding: 15px */ .nb-p-4 /* padding: 20px */ ``` -------------------------------- ### Use Blockquote Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Styled blockquote component with an optional author span. ```html
Quote text goes here. - Author Name
``` -------------------------------- ### Hero Section Component Source: https://context7.com/oshekharo/neubrutalism/llms.txt A large promotional section for landing pages. Includes a title, subtitle, and call-to-action buttons. ```html

Welcome to Our Site

A bold, minimalist design that makes an impact. Built with Neubrutalism CSS.

Learn More Get Started
``` -------------------------------- ### Color Utilities Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Background and text color utility classes. ```css .nb-bg-primary /* Black background */ .nb-bg-secondary /* White background */ .nb-bg-success /* Green background */ .nb-bg-danger /* Red background */ .nb-bg-warning /* Orange background */ .nb-bg-info /* Blue background */ ``` ```css .nb-text-primary .nb-text-secondary .nb-text-success .nb-text-danger .nb-text-warning .nb-text-info .nb-text-muted ``` -------------------------------- ### Create Accordions Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Collapsible content sections using checkbox states for interaction. ```html

Answer to question 1.

``` -------------------------------- ### Group UI Elements Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Organize buttons, badges, or tags into groups with optional modifiers. ```html
HTML CSS JS
``` -------------------------------- ### Dropdown Menu Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A standard dropdown component for selecting options. Ensure the toggle button and menu items are correctly structured within the main container. ```html
Option 1 Option 2 Option 3
``` -------------------------------- ### Accessibility Utilities Source: https://context7.com/oshekharo/neubrutalism/llms.txt Provides essential accessibility features like skip links, screen reader text, and accessible ARIA attributes for modals and toasts. ```html Skip to main content ``` ```html This text is only visible to screen readers ``` ```html
``` ```html ``` ```html ``` -------------------------------- ### Hero Section Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md A hero section featuring a title, subtitle, and action buttons. ```html

Hero Title

Hero subtitle text.

Primary Action Secondary Action
``` -------------------------------- ### Include Neubrutalism JavaScript Source: https://github.com/oshekharo/neubrutalism/blob/main/index.html Include this script tag to enable interactive components like toasts and dark mode toggles. ```html ``` -------------------------------- ### Apply Row Highlights Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Add contextual background colors to table rows using specific row classes. ```html ... ... ... ... ``` -------------------------------- ### Pagination Component Source: https://github.com/oshekharo/neubrutalism/blob/main/docs/DOCUMENTATION.md Component for navigating through multiple pages of content. Includes previous and next navigation icons and page numbers. Use `active` class for the current page. ```html ```