44 |
45 |
46 |
47 | Features
48 | What makes us different
49 |
50 |
51 |
52 |
⚡
53 |
Fast
54 |
Lightning-quick performance with no bloat.
55 |
56 |
57 |
🎨
58 |
Beautiful
59 |
Stunning visual design that stands out.
60 |
61 |
62 |
🔧
63 |
Flexible
64 |
Easy to customize to match your brand.
65 |
66 |
68 |
69 |
70 |
71 |
72 |
73 |
About Us
74 |
We believe in bold, honest design that puts function first.
75 |
Our approach combines the raw aesthetic of brutalist design with modern usability principles. The result? Websites that are both striking and user-friendly.
76 |
Read Our Story
77 |
78 |
79 |
80 |
81 |
82 | Simplicity over complexity
83 | Function over decoration
84 | Accessibility for everyone
85 | Performance matters
86 |
87 |
88 |
89 |
91 |
92 |
93 |
94 | What People Say
95 | Testimonials from our clients
96 |
97 |
98 |
99 |
"This design approach completely transformed how our users interact with our site. Bold, clear, and effective."
100 |
101 | ★
102 | ★
103 | ★
104 | ★
105 | ★
106 |
107 |
— Jane Doe, CEO
108 |
109 |
110 |
"Finally, a CSS framework that doesn't look like everything else. Our brand really stands out now."
111 |
112 | ★
113 | ★
114 | ★
115 | ★
116 | ★
117 |
118 |
— John Smith, Designer
119 |
120 |
122 |
123 |
124 |
143 |
144 |
145 |
146 |
147 |
163 |
164 |
165 |
166 |
167 |
168 |
--------------------------------------------------------------------------------
/neubrutalism.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Neubrutalism CSS - JavaScript Utilities
3 | * A minimalist, high-contrast CSS library inspired by Brutalist design principles.
4 | */
5 |
6 | document.addEventListener("DOMContentLoaded", function () {
7 | "use strict";
8 |
9 | // ==========================================================================
10 | // Mobile Menu Toggle
11 | // ==========================================================================
12 |
13 | const mobileMenuButton = document.querySelector(".mobile-menu-button");
14 | const navbarMenu = document.querySelector(".navbar-menu");
15 |
16 | if (mobileMenuButton && navbarMenu) {
17 | mobileMenuButton.addEventListener("click", function () {
18 | navbarMenu.classList.toggle("active");
19 | // Toggle aria-expanded for accessibility
20 | const isExpanded = navbarMenu.classList.contains("active");
21 | mobileMenuButton.setAttribute("aria-expanded", isExpanded);
22 | });
23 |
24 | // Close mobile menu when clicking outside
25 | document.addEventListener("click", function (event) {
26 | if (!navbarMenu.classList.contains("active")) {
27 | return;
28 | }
29 |
30 | const isClickInsideMenu = navbarMenu.contains(event.target);
31 | const isClickOnMenuButton = mobileMenuButton.contains(event.target);
32 |
33 | if (!isClickInsideMenu && !isClickOnMenuButton) {
34 | navbarMenu.classList.remove("active");
35 | mobileMenuButton.setAttribute("aria-expanded", "false");
36 | }
37 | });
38 |
39 | // Close menu on Escape key
40 | document.addEventListener("keydown", function (event) {
41 | if (event.key === "Escape" && navbarMenu.classList.contains("active")) {
42 | navbarMenu.classList.remove("active");
43 | mobileMenuButton.setAttribute("aria-expanded", "false");
44 | mobileMenuButton.focus();
45 | }
46 | });
47 | }
48 |
49 | // ==========================================================================
50 | // Toast Notifications
51 | // ==========================================================================
52 |
53 | /**
54 | * Creates a toast notification
55 | * @param {string} message - The message to display
56 | * @param {string} type - Toast type: 'default', 'success', 'danger', 'warning'
57 | * @param {number} duration - Duration in milliseconds (default: 5000)
58 | * @returns {HTMLElement} The toast element
59 | */
60 | function createToast(message, type = "default", duration = 5000) {
61 | const toast = document.createElement("div");
62 | toast.classList.add("nb-toast", `nb-toast-${type}`);
63 | toast.setAttribute("role", "alert");
64 | toast.setAttribute("aria-live", "polite");
65 |
66 | const toastContent = document.createElement("div");
67 | toastContent.classList.add("nb-toast-content");
68 | toastContent.textContent = message;
69 |
70 | const closeBtn = document.createElement("button");
71 | closeBtn.classList.add("nb-toast-close");
72 | closeBtn.innerHTML = "×";
73 | closeBtn.setAttribute("aria-label", "Close notification");
74 |
75 | let autoRemoveTimer = null;
76 |
77 | const removeToast = () => {
78 | if (autoRemoveTimer) {
79 | clearTimeout(autoRemoveTimer);
80 | autoRemoveTimer = null;
81 | }
82 | toast.classList.add("nb-toast-hide");
83 | setTimeout(() => {
84 | if (toast.parentNode) {
85 | toast.remove();
86 | }
87 | }, 300);
88 | };
89 |
90 | closeBtn.addEventListener("click", removeToast);
91 |
92 | toast.appendChild(toastContent);
93 | toast.appendChild(closeBtn);
94 | document.body.appendChild(toast);
95 |
96 | // Auto-remove toast
97 | autoRemoveTimer = setTimeout(removeToast, duration);
98 |
99 | // Expose method to clear auto-remove timer
100 | toast.clearAutoRemove = () => {
101 | if (autoRemoveTimer) {
102 | clearTimeout(autoRemoveTimer);
103 | autoRemoveTimer = null;
104 | }
105 | };
106 |
107 | return toast;
108 | }
109 |
110 | // ==========================================================================
111 | // Copy Component HTML to Clipboard
112 | // ==========================================================================
113 |
114 | /**
115 | * Copy HTML content of a component section to clipboard
116 | * @param {Event} event - Click event
117 | */
118 | async function copyComponentHTML(event) {
119 | const section = event.target.closest("section");
120 |
121 | if (!section) {
122 | return;
123 | }
124 |
125 | // Get all HTML content within the section, excluding the heading
126 | const componentHTML = Array.from(section.children)
127 | .filter(el => el.tagName !== "H2")
128 | .map(el => el.outerHTML)
129 | .join("\n");
130 |
131 | try {
132 | // Use modern Clipboard API with fallback
133 | if (window.isSecureContext && navigator.clipboard && navigator.clipboard.writeText) {
134 | await navigator.clipboard.writeText(componentHTML.trim());
135 | } else {
136 | // Fallback for older browsers or insecure contexts
137 | const tempTextArea = document.createElement("textarea");
138 | tempTextArea.value = componentHTML.trim();
139 | tempTextArea.style.position = "fixed";
140 | tempTextArea.style.opacity = "0";
141 | tempTextArea.setAttribute("aria-hidden", "true");
142 | document.body.appendChild(tempTextArea);
143 | tempTextArea.select();
144 | document.execCommand("copy");
145 | document.body.removeChild(tempTextArea);
146 | }
147 |
148 | // Create a temporary toast/feedback
149 | const toast = document.createElement("div");
150 | toast.textContent = "Component HTML copied to clipboard!";
151 | toast.className = "nb-copy-toast";
152 | toast.setAttribute("role", "status");
153 | toast.setAttribute("aria-live", "polite");
154 |
155 | document.body.appendChild(toast);
156 |
157 | // Remove toast after 2 seconds
158 | setTimeout(() => {
159 | if (toast.parentNode) {
160 | document.body.removeChild(toast);
161 | }
162 | }, 2000);
163 | } catch (err) {
164 | console.error("Failed to copy:", err);
165 | }
166 | }
167 |
168 | // Use event delegation for better performance
169 | // Only copy sections within the components container
170 | document.body.addEventListener("click", function(event) {
171 | const section = event.target.closest("section");
172 | // Only copy if section exists and is within the main content container
173 | if (section && section.closest(".nb-container")) {
174 | copyComponentHTML(event);
175 | }
176 | });
177 |
178 | // ==========================================================================
179 | // Dark Mode Toggle (Optional)
180 | // ==========================================================================
181 |
182 | /**
183 | * Toggle dark mode on the document
184 | * @param {boolean} enable - Whether to enable dark mode
185 | */
186 | function toggleDarkMode(enable) {
187 | if (enable) {
188 | document.documentElement.classList.add("nb-dark");
189 | try {
190 | localStorage.setItem("nb-dark-mode", "true");
191 | } catch (e) {
192 | // LocalStorage not available (privacy mode, etc.)
193 | }
194 | } else {
195 | document.documentElement.classList.remove("nb-dark");
196 | try {
197 | localStorage.setItem("nb-dark-mode", "false");
198 | } catch (e) {
199 | // LocalStorage not available (privacy mode, etc.)
200 | }
201 | }
202 | }
203 |
204 | /**
205 | * Check if dark mode is enabled
206 | * @returns {boolean}
207 | */
208 | function isDarkMode() {
209 | return document.documentElement.classList.contains("nb-dark");
210 | }
211 |
212 | // Check for saved dark mode preference
213 | try {
214 | const savedDarkMode = localStorage.getItem("nb-dark-mode");
215 | if (savedDarkMode === "true") {
216 | document.documentElement.classList.add("nb-dark");
217 | }
218 | } catch (e) {
219 | // LocalStorage not available (privacy mode, etc.)
220 | }
221 |
222 | // ==========================================================================
223 | // Expose Global Functions
224 | // ==========================================================================
225 |
226 | window.createToast = createToast;
227 | window.toggleDarkMode = toggleDarkMode;
228 | window.isDarkMode = isDarkMode;
229 | });
230 |
--------------------------------------------------------------------------------
/docs/DOCUMENTATION.md:
--------------------------------------------------------------------------------
1 | # Neubrutalism CSS Documentation
2 |
3 | Comprehensive documentation for Neubrutalism CSS - a minimalist, high-contrast CSS library inspired by Brutalist design principles.
4 |
5 | ## Table of Contents
6 |
7 | - [Getting Started](#getting-started)
8 | - [Installation](#installation)
9 | - [CSS Custom Properties](#css-custom-properties)
10 | - [Typography](#typography)
11 | - [Layout & Grid](#layout--grid)
12 | - [Components](#components)
13 | - [Form Elements](#form-elements)
14 | - [Utilities](#utilities)
15 | - [Dark Mode](#dark-mode)
16 | - [Accessibility](#accessibility)
17 | - [Browser Support](#browser-support)
18 | - [Examples](#examples)
19 |
20 | ---
21 |
22 | ## Getting Started
23 |
24 | Neubrutalism CSS is a lightweight, dependency-free CSS library that provides bold, high-contrast components perfect for modern web applications.
25 |
26 | ### Key Features
27 |
28 | - 🎨 High-contrast black and white design
29 | - ⚡ Lightweight (~70KB unminified)
30 | - 🌙 Built-in dark mode support
31 | - ♿ Accessibility-first approach
32 | - 📱 Responsive components
33 | - 🔧 Customizable with CSS custom properties
34 | - 🎯 No JavaScript dependencies for styling
35 |
36 | ---
37 |
38 | ## Installation
39 |
40 | ### CDN (Recommended)
41 |
42 | Add the following to your HTML ``:
43 |
44 | ```html
45 | Larger, emphasized text for introductions.
184 |
185 |
186 | Small text for fine print.
187 |
188 |
189 | Less prominent text.
190 |
191 |
192 | ...
1166 |
1167 |
1168 | ...
1169 |
1170 |
1171 |
244 |
245 |
246 | Neubrutalism CSS
247 | A minimalist, high-contrast CSS library inspired by Brutalist design principles. Bold, clean, and unapologetically simple.
248 |
252 |
253 |
35 Stars
254 |
4 Forks
255 |
4 Contributors
256 |
258 |
259 |
260 |
261 |
262 |
263 |
🎨
264 |
High Contrast
265 |
Bold black and white design with striking shadows
266 |
267 |
268 |
⚡
269 |
Lightweight
270 |
No dependencies, pure CSS with minimal footprint
271 |
272 |
273 |
🌙
274 |
Dark Mode
275 |
Built-in dark mode support with easy toggle
276 |
277 |
279 |
280 |
281 |
282 | Installation
283 | Get started with Neubrutalism CSS in seconds
284 |
285 | CDN
286 | Add this to your HTML head:
287 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.css">Optional: JavaScript
290 | For interactive components (toast, dark mode toggle):
291 | <script src="https://cdn.jsdelivr.net/gh/OshekharO/Neubrutalism@main/neubrutalism.js"></script>
293 |
294 |
295 |
296 | Headings
297 | Typography scale for all heading levels
298 |
299 |
300 |
Heading 1
301 | Heading 2
302 | Heading 3
303 | Heading 4
304 | Heading 5
305 | Heading 6
306 |
307 |
308 | Display Headings
309 |
310 |
Display 1
311 |
Display 2
312 |
Display 3
313 |
Display 4
314 |
316 |
317 |
318 |
319 | Text Utilities
320 | Common text styling utilities
321 |
322 |
323 |
This is a lead paragraph - larger and emphasized text for introductions.
324 |
This is a regular paragraph with bold text , italic text , and links .
325 |
This is small text for fine print.
326 |
This is muted text for less important content.
327 |
Highlight text with marked styling.
328 |
Use Ctrl + C to copy.
329 |
Blockquote
332 |
333 |
334 | Design is not just what it looks like and feels like. Design is how it works.
335 | - Steve Jobs
336 |
337 |
Code Block
340 |
341 |
function example() {
342 | return "Neubrutalism";
343 | }
344 |
Dividers
347 |
348 |
Content above
349 |
350 |
Content below
351 |
OR
352 |
Alternative divider with text
353 |
355 |
356 |
357 |
383 |
384 |
385 |
386 | Group
387 | Group related elements together
388 |
389 |
390 |
Button Group
391 |
392 | Left
393 | Middle
394 | Right
395 |
396 |
397 |
Badge Group
398 |
399 | HTML
400 | CSS
401 | JS
402 |
403 |
404 |
Spaced Group
405 |
406 | Option 1
407 | Option 2
408 | Option 3
409 |
410 |
411 |
Vertical Group
412 |
413 | First
414 | Second
415 | Third
416 |
417 |
419 |
420 |
421 |
422 | Badges
423 | Labels and status indicators
424 |
425 |
426 | Default
427 | Primary
428 | Success
429 | Danger
430 | Warning
431 | Pill Badge
432 |
433 |
434 |
435 |
436 |
449 |
450 |
451 |
452 | Cards
453 | Content containers with various layouts
454 |
455 |
456 |
457 |
458 |
459 |
460 |
Card Title
461 |
This is a simple card with header and body content.
462 |
463 |
466 |
467 |
468 |
469 |
470 |
471 |
Card with Image
472 |
Cards can contain images and rich content.
473 |
474 |
475 |
476 |
478 |
479 |
480 |
481 | Alerts
482 | Contextual feedback messages
483 |
484 |
485 |
This is a success alert!
486 |
This is a danger alert!
487 |
This is a warning alert!
488 |
This is an info alert!
489 |
Simple Alerts
492 |
493 |
Simple success alert!
494 |
Simple error alert!
495 |
497 |
498 |
499 |
500 | Tables
501 | Data tables with neubrutalist styling
502 |
503 |
504 |
Standard Table
505 |
506 |
507 |
508 | Name
509 | Role
510 | Status
511 |
512 |
513 |
514 |
515 | John Doe
516 | Developer
517 | Active
519 |
520 | Jane Smith
521 | Designer
522 | Active
524 |
525 | Bob Wilson
526 | Manager
527 | Away
529 |
530 |
531 |
532 |
Scrollable Table
533 |
572 |
573 |
Compact Table
574 |
575 |
576 |
577 | Item
578 | Qty
579 | Price
580 |
581 |
582 |
583 |
584 | Widget A
585 | 5
586 | $10.00
587 |
588 |
589 | Widget B
590 | 3
591 | $15.00
592 |
593 |
594 | Widget C
595 | 8
596 | $8.00
597 |
598 |
599 |
600 |
601 |
Borderless Table
602 |
603 |
604 |
605 | Product
606 | Category
607 | Price
608 |
609 |
610 |
611 |
612 | Laptop
613 | Electronics
614 | $999
615 |
616 |
617 | Desk Chair
618 | Furniture
619 | $250
620 |
621 |
622 | Notebook
623 | Office
624 | $5
625 |
626 |
627 |
628 |
629 |
Row Highlights
630 |
631 |
632 |
633 | Task
634 | Status
635 |
636 |
637 |
638 |
639 | Deploy to production
640 | Completed
641 |
642 |
643 | Code review pending
644 | In Progress
645 |
646 |
647 | Critical bug fix
648 | Blocked
649 |
650 |
651 | Documentation update
652 | Scheduled
653 |
654 |
655 |
656 |
658 |
659 |
660 |
661 | Progress Bars
662 | Visual progress indicators
663 |
664 |
665 |
668 |
671 |
674 |
677 |
678 |
Striped & Animated
679 |
682 |
684 |
685 |
686 |
687 | Spinners & Loaders
688 | Loading indicators
689 |
690 |
691 |
Circle Spinners
692 |
697 |
698 |
Color Variants
699 |
700 |
701 |
702 |
703 |
704 |
705 |
706 |
Square Spinner
707 |
708 |
709 |
Dots Loader
710 |
711 |
715 |
717 |
718 |
719 |
731 |
732 |
733 |
734 | Breadcrumb
735 | Navigation path indicator
736 |
737 |
744 |
745 |
746 |
747 |
748 | Modals
749 | Dialog windows for user interaction
750 |
751 |
753 |
754 |
755 |
756 |
757 |
759 |
760 |
761 |
Modal Title
762 |
763 |
This is a neubrutalist modal dialog. It can contain any content including forms, text, or other components.
764 |
765 |
768 |
769 |
770 |
773 | Open Modal
774 |
775 |
776 |
777 |
778 |
779 | Accordion
780 | Collapsible content sections
781 |
782 |
783 |
784 |
785 |
786 |
790 |
791 |
Neubrutalism is a modern CSS design approach that focuses on minimalist, high-contrast, and bold design principles.
792 |
793 |
794 |
795 |
796 |
800 |
801 |
Yes! Neubrutalism CSS is completely free and open source under the MIT license.
802 |
803 |
804 |
805 |
806 |
810 |
811 |
Neubrutalism CSS supports all modern browsers including Chrome, Firefox, Safari, and Edge.
812 |
813 |
814 |
815 |
817 |
818 |
819 |
820 | Tabs
821 | Tabbed content navigation
822 |
823 |
824 |
Standard Tabs
825 |
826 |
827 |
Tab 1
828 |
829 |
First Tab Content
830 |
This is the content for the first tab.
831 |
832 |
833 |
834 |
Tab 2
835 |
836 |
Second Tab Content
837 |
This is the content for the second tab.
838 |
839 |
840 |
841 |
Tab 3
842 |
843 |
Third Tab Content
844 |
This is the content for the third tab.
845 |
846 |
847 |
848 |
Scrollable Tabs
849 |
Perfect for many tabs - scroll horizontally to see more.
850 |
900 |
902 |
903 |
904 |
905 | Dropdown
906 | Dropdown menus
907 |
908 |
909 |
910 | Select Option
911 |
916 |
917 |
919 |
920 |
921 |
941 |
942 |
943 |
944 | Lists
945 | Styled list components
946 |
947 |
948 |
Basic List
949 |
950 | List item one
951 | List item two
952 | List item three
953 |
954 |
955 |
Ordered List
956 |
957 | First item
958 | Second item
959 | Third item
960 |
961 |
962 |
Bullet List
963 |
964 | Bullet item one
965 | Bullet item two
966 | Bullet item three
967 |
968 |
970 |
971 |
972 |
973 | Avatars
974 | User profile images
975 |
976 |
981 |
982 |
983 |
984 |
985 | Skeleton Loaders
986 | Loading placeholders for content
987 |
988 |
989 |
Card Skeleton
990 |
991 |
992 |
993 |
994 |
995 |
996 |
997 |
998 |
Avatar + Text Skeleton
999 |
1006 |
1007 |
Button Skeleton
1008 |
1009 |
1011 |
1012 |
1013 |
1014 | Timeline
1015 | Chronological display of events
1016 |
1017 |
1018 |
1019 |
1020 |
Jan 2024
1021 |
1022 |
Project Started
1023 |
Initial development phase began with core features.
1024 |
1025 |
1026 |
1027 |
Mar 2024
1028 |
1029 |
Beta Release
1030 |
First public beta released for testing.
1031 |
1032 |
1033 |
1034 |
Jun 2024
1035 |
1036 |
Version 1.0
1037 |
Official stable release with full documentation.
1038 |
1039 |
1040 |
1041 |
Dec 2024
1042 |
1043 |
Future Plans
1044 |
Upcoming features and improvements.
1045 |
1046 |
1047 |
1048 |
1050 |
1051 |
1052 |
1053 | Steps / Stepper
1054 | Multi-step process indicators
1055 |
1056 |
1057 |
Horizontal Steps
1058 |
1059 |
1060 |
1061 |
1062 |
Account
1063 |
Create account
1064 |
1065 |
1066 |
1067 |
1068 |
1069 |
Profile
1070 |
Setup profile
1071 |
1072 |
1073 |
1074 |
1075 |
1076 |
Settings
1077 |
Configure settings
1078 |
1079 |
1080 |
1081 |
1082 |
1083 |
Done
1084 |
Complete setup
1085 |
1086 |
1087 |
1088 |
1090 |
1091 |
1092 |
1093 | Rating
1094 | Star rating components
1095 |
1096 |
1134 |
1135 |
1136 |
1137 |
1138 | Empty State
1139 | Placeholder for empty content areas
1140 |
1141 |
1142 |
1143 |
📭
1144 |
No messages yet
1145 |
When you receive messages, they will appear here.
1146 |
Send a message
1147 |
1148 |
1150 |
1151 |
1152 |
1173 |
1174 |
1175 |
1176 | Checkboxes
1177 | Checkbox styles and variants
1178 |
1179 |
1213 |
1214 |
1215 |
1216 |
1217 | Radio Buttons
1218 | Radio button styles
1219 |
1220 |
1244 |
1245 |
1246 |
1247 |
1255 |
1256 |
1257 |
1272 |
1273 |
1274 |
1285 |
1286 |
1287 |
1288 | Containers
1289 | Content containers with various styles and sizes
1290 |
1291 |
1292 |
Basic Containers with Shadows
1293 |
Container with shadow
1294 |
Container-1 with shadow-1 (Purple)
1295 |
Container-2 with shadow-2 (Yellow)
1296 |
Container-3 with shadow-3 (Cyan)
1297 |
1298 |
Sized Containers
1299 |
1300 | Small container (max-width: 540px)
1301 |
1302 |
1303 | Medium container (max-width: 720px)
1304 |
1305 |
1306 | Large container (max-width: 960px)
1307 |
1308 |
1309 |
Card-style Container
1310 |
1311 | This container has card-like styling with a shadow offset, perfect for highlighting content.
1312 |
1313 |
1314 |
Color Variants
1315 |
Primary Container
1316 |
Success Container
1317 |
Warning Container
1318 |
Danger Container
1319 |
Info Container
1320 |
1321 |
Light/Dark Containers
1322 |
Light Container
1323 |
Dark Container
1324 |
1326 |
1327 |
1328 |
1329 | Grid System
1330 | Responsive grid layouts
1331 |
1332 |
1333 |
3 Column Grid
1334 |
1335 |
Column 1
1336 |
Column 2
1337 |
Column 3
1338 |
1339 |
1340 |
Bordered Grid
1341 |
1342 |
Item 1
1343 |
Item 2
1344 |
Item 3
1345 |
1346 |
1347 |
Masonry Grid
1348 |
1349 |
Item 1
1350 |
Item 2
1351 |
Item 3
1352 |
Item 4
1353 |
1354 |
1356 |
1357 |
1358 |
1359 | Navbar
1360 | Navigation bar components with various styles
1361 |
1362 |
1363 |
Standard Navbar
1364 |
1365 |
1368 |
1370 |
1374 |
1375 | Home About Contact Get Started
1380 |
1381 |
1382 |
Dark Navbar
1383 |
1384 |
1387 |
1388 | Home About Action
1392 |
1393 |
1394 |
Primary Navbar
1395 |
1396 |
1399 |
1400 | Home About Action
1404 |
1405 |
1406 |
Success Navbar
1407 |
1408 |
1411 |
1412 | Home About Action
1416 |
1417 |
1418 |
Warning Navbar
1419 |
1420 |
1423 |
1424 | Home About Action
1428 |
1429 |
1430 |
Danger Navbar
1431 |
1432 |
1435 |
1436 | Home About Action
1440 |
1441 |
1442 |
Compact Navbar
1443 |
1444 |
1447 |
1448 | Home About
1451 |
1452 |
1453 |
Note: Use nb-navbar-sticky for sticky positioning, nb-navbar-fixed-top or nb-navbar-fixed-bottom for fixed positioning.
1454 |
1456 |
1457 |
1458 |
1459 | Nav Pills
1460 | Pill-style navigation tabs
1461 |
1462 |
1463 |
Standard Pills
1464 |
1470 |
1471 |
Square Pills
1472 |
1477 |
1478 |
Color Variants
1479 |
1485 |
1491 |
1497 |
1503 |
1504 |
Small Pills
1505 |
1510 |
1511 |
Large Pills
1512 |
1516 |
1517 |
Pills with Badge
1518 |
1523 |
1524 |
Justified Pills
1525 |
1530 |
1531 |
Vertical Pills
1532 |
1538 |
1539 |
Scrollable Pills
1540 |
Scroll horizontally to see more pills.
1541 |
1552 |
1553 |
Bordered Pills Container
1554 |
1559 |
1561 |
1562 |
1563 |
1582 |
1583 |
1584 |
1585 | Colors
1586 | Color utility classes
1587 |
1588 |
1589 |
Background Colors
1590 |
1591 |
Primary
1592 |
Success
1593 |
Danger
1594 |
Warning
1595 |
Info
1596 |
1597 |
1598 |
Text Colors
1599 |
Primary text color
1600 |
Success text color
1601 |
Danger text color
1602 |
Warning text color
1603 |
Muted text color
1604 |
1606 |
1607 |
1608 |
1609 | Dark Mode
1610 | Toggle between light and dark themes
1611 |
1612 |
1613 |
Toggle Dark Mode
1614 |
Click the button to switch between light and dark mode. Your preference is saved automatically.
1615 |
1617 |
1618 |
1619 |
1620 | Toast Notifications
1621 | Temporary notification messages
1622 |
1623 |
1624 | Default Toast
1625 | Success Toast
1626 | Danger Toast
1627 | Warning Toast
1628 |
1629 |
1630 |
1631 |
1632 |
1633 | Marquee
1634 | Scrolling text animation
1635 |
1636 |
1637 |
1638 |
Neubrutalism CSS: Minimalist Design • High Contrast • Bold Aesthetics • Clean Typography • Open Source
1639 |
1640 |
1642 |
1643 |
1644 |
1645 | Carousel
1646 | Image slider component
1647 |
1648 |
1649 |
1650 |
1651 |
1652 |
1653 |
Slide 1
1654 |
1655 |
1656 |
1657 |
Slide 2
1658 |
1659 |
1660 |
1661 |
Slide 3
1662 |
1663 |
1664 |
1665 |
1667 |
1668 |
1669 |
1670 | Newsletter
1671 | Email subscription form
1672 |
1673 |
1674 |
1675 |
1676 |
1679 |
Subscribe
1680 |
Stay updated with our latest news
1681 |
1685 |
1686 |
1687 |
1689 |
1690 |
1691 |
1692 | Thumbnails & Images
1693 | Image styling utilities
1694 |
1695 |
1696 |
1697 |
1698 |
1699 |
1700 |
1701 |
1702 |
1703 |
1705 |
1706 |
1707 |
1708 | Testimonials
1709 | Customer quotes and reviews
1710 |
1711 |
1712 |
1713 |
"Neubrutalism CSS has transformed how I approach web design. The bold, high-contrast aesthetic is exactly what I was looking for!" - Happy Developer
1714 |
1715 |
1717 |
1718 |
1719 |
1729 |
1730 |
1758 |
1759 |
1760 |
--------------------------------------------------------------------------------
414 | 
709 | ```
710 |
711 | ### Navbar
712 |
713 | ```html
714 |
730 | ```
731 |
732 | #### Navbar Variants
733 |
734 | Color variants:
735 | ```html
736 |
737 |
738 |
739 |
740 |
741 |
742 | ```
743 |
744 | Position variants:
745 | ```html
746 |
747 |
748 |
749 |
750 |
751 |
752 |
753 |
754 |
755 |
756 |
757 | ```
758 |
759 | Size variants:
760 | ```html
761 |
762 |
763 |
764 |
765 |
766 | ```
767 |
768 | ### Nav Pills
769 |
770 | Pill-style navigation tabs:
771 |
772 | ```html
773 | 
881 | 
885 |