# ⚡ VIBE BRUTALISM 2.0 ![Version](https://img.shields.io/badge/version-2.0.0-blue.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg) ![WCAG](https://img.shields.io/badge/WCAG-2.1_AA-green.svg) ![Section 508](https://img.shields.io/badge/Section_508-Compliant-green.svg) **A bold, unapologetic, fully accessible neo-brutalist component library** Vibe Brutalism 2.0 is a complete CSS and JavaScript component library inspired by brutalist architecture and modern design trends. It features thick borders, bold colors, offset shadows, and an uncompromising aesthetic that makes your web projects stand out - while being fully compliant with WCAG 2.1 AA and Section 508 accessibility standards. --- ## 🎯 Features - **🎨 Neo-Brutalist Design** - Bold borders, high contrast, and striking visuals - **♿ WCAG 2.1 AA Compliant** - Full accessibility with ARIA labels, keyboard navigation, and screen reader support - **✓ Section 508 Compliant** - Meets federal accessibility requirements - **📦 Complete Component Library** - 20+ ready-to-use accessible components - **⚡ Zero Dependencies** - Just CSS and vanilla JavaScript - **📱 Fully Responsive** - Works on all devices with hamburger menu - **⌨️ Keyboard Navigation** - All components support full keyboard control - **🔊 Screen Reader Optimized** - ARIA live regions and proper semantic HTML - **🔧 Utility-First** - Extensive utility classes like Tailwind - **🚀 Lightweight** - Small file size, fast performance - **📚 Well Documented** - Comprehensive examples and accessibility guides --- ## ♿ Accessibility Features Vibe Brutalism 2.0 is built from the ground up with accessibility in mind: ### WCAG 2.1 AA Compliance - **Color Contrast:** All text meets 4.5:1 contrast ratio for normal text, 3:1 for large text - **Keyboard Navigation:** Every interactive component is fully accessible via keyboard - **Focus Management:** Visible focus indicators and proper focus trapping in modals - **ARIA Attributes:** Proper roles, states, and properties throughout - **Screen Reader Support:** ARIA live regions for dynamic content - **Semantic HTML:** Proper use of headings, landmarks, and form labels ### Section 508 Compliance - Meets all technical standards (§ 1194.22) - Fully keyboard accessible - Text alternatives for non-text content - Programmatically determinable information ### Keyboard Shortcuts All components support standard keyboard navigation: - **Tab/Shift+Tab:** Navigate between interactive elements - **Enter/Space:** Activate buttons and toggle controls - **Arrow Keys:** Navigate dropdowns, tabs, accordions, and carousels - **Escape:** Close modals, dropdowns, and menus - **Home/End:** Jump to first/last items in lists --- ## 📦 Installation ### Option 1: Download Files 1. Download `vibe-brutalism.css` and `vibe-brutalism.js` 2. Include them in your HTML: ```html My Accessible Brutalist App Skip to main content
``` ### Option 2: CDN (Coming Soon) ```html ``` --- ## 🚀 Quick Start Here's a simple accessible example to get you started: ```html Vibe Brutalism Demo Skip to main content

Hello, Accessible Brutalism!

My First Card

This is a fully accessible neo-brutalist card component.

``` --- ## 📚 Components ### 🍔 Responsive Hamburger Navigation Responsive navbar that automatically converts to a hamburger menu on mobile devices. ```html ``` **Accessibility Features:** - ARIA labels (aria-expanded, aria-controls) - ESC key closes menu - Screen reader announcements - Focus management ### 🎠 Carousel Accessible carousel for images and cards with keyboard navigation and autoplay control. ```html ``` **Accessibility Features:** - Left/Right arrow keys navigate slides - Autoplay pauses on hover and focus - Screen reader announces slide changes - Proper ARIA labels on all controls **JavaScript API:** ```javascript // Access carousel instance VB.carousels.myCarousel.next(); VB.carousels.myCarousel.prev(); VB.carousels.myCarousel.goTo(2); VB.carousels.myCarousel.pauseAutoplay(); VB.carousels.myCarousel.startAutoplay(); ``` ### 🔔 Toast Notifications Accessible toast notifications with automatic dismissal and screen reader support. ```javascript // Show toast notification VB.Toast('Operation successful!', 'success', 5000, 'top-right'); // Parameters: // message: string // type: 'success' | 'warning' | 'danger' | 'info' // duration: number (milliseconds, 0 for no auto-dismiss) // position: 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' ``` **Accessibility Features:** - ARIA live regions for screen reader announcements - Keyboard dismissible - Respects prefers-reduced-motion - Proper color contrast ### 📮 Snackbar Brief messages with optional action buttons. ```javascript // Simple snackbar VB.Snackbar('Message sent successfully!'); // With action button VB.Snackbar('Item deleted', 'UNDO', () => { // Undo action here console.log('Undo clicked'); }, 5000); // Parameters: // message: string // actionText: string | null // actionCallback: function | null // duration: number (milliseconds) ``` **Accessibility Features:** - ARIA live regions - Keyboard accessible action buttons - Focus management ### 🔘 Buttons Buttons come in multiple variants, sizes, and states. ```html ``` ### 🃏 Cards Cards are versatile containers with headers, bodies, and footers. ```html
Card Title

Card content goes here.

...
...
...
``` ### 📝 Forms Complete form components with proper labeling and ARIA attributes. ```html
``` ### 📑 Tabs Organize content with keyboard-accessible tabs. ```html

Content for Tab 1

Content for Tab 2

Content for Tab 3

``` **Keyboard Navigation:** - Arrow Right/Down: Next tab - Arrow Left/Up: Previous tab - Home: First tab - End: Last tab ### 📋 Accordion Collapsible content panels with full keyboard support. ```html

Content for section 1

Content for section 2

``` **Keyboard Navigation:** - Arrow Up/Down: Navigate between headers - Enter/Space: Toggle section - Home/End: Jump to first/last section ### 🪟 Modals Accessible modal dialogs with focus trapping. ```html

Modal Title

Modal content here.

``` **JavaScript API:** ```javascript VB.modals.myModal.open(); VB.modals.myModal.close(); ``` ### 📂 Dropdowns Keyboard-accessible dropdown menus. ```html
Action 1 Action 2 Action 3
``` **Keyboard Navigation:** - Arrow Down/Enter/Space: Open menu - Arrow Up/Down: Navigate items - ESC: Close menu ### 📊 Progress Bars Visual progress indicators with ARIA support. ```html
75%
100%
``` **JavaScript API:** ```javascript VB.SetProgress('myProgress', 75); ``` ### ⚠️ Alerts Display important messages with proper ARIA roles. ```html ``` ### 🏷️ Badges Small status indicators. ```html Default Primary Success Danger ``` --- ## 📐 Grid System 12-column responsive grid system. ```html
Full width
Half width
Half width
One third
One third
One third
``` --- ## 🔧 Utility Classes ### Spacing - `vb-m-{0-6}`, `vb-mt-4`, `vb-mb-4`, `vb-ml-4`, `vb-mr-4` - `vb-p-{0-6}` ### Text - `vb-text-left`, `vb-text-center`, `vb-text-right` - `vb-text-uppercase`, `vb-text-lowercase` - `vb-font-bold`, `vb-font-normal` ### Display - `vb-d-block`, `vb-d-inline`, `vb-d-flex`, `vb-d-none` ### Flex - `vb-flex-row`, `vb-flex-column` - `vb-justify-center`, `vb-justify-between` - `vb-align-center` - `vb-gap-4` ### Width - `vb-w-full`, `vb-w-half` ### Background - `vb-bg-primary`, `vb-bg-secondary`, `vb-bg-accent` - `vb-bg-white`, `vb-bg-black` ### Accessibility - `vb-sr-only` - Screen reader only content - `vb-skip-link` - Skip to main content link --- ## 🎨 Customization Customize via CSS variables: ```css :root { /* Colors */ --vb-primary: #FFD700; --vb-secondary: #FF6B9D; --vb-accent: #00F5FF; --vb-success: #00FF88; --vb-warning: #FFB800; --vb-danger: #FF3366; --vb-info: #6B9DFF; /* Border */ --vb-border-width: 3px; --vb-border-color: #000000; /* Shadows */ --vb-shadow-md: 6px 6px 0 #000; /* Typography */ --vb-font-family: 'Space Grotesk', 'Arial Black', sans-serif; --vb-font-size-base: 1rem; /* Spacing */ --vb-space-4: 1rem; } ``` --- ## 💻 JavaScript API ```javascript // Modals VB.modals.myModal.open(); VB.modals.myModal.close(); // Carousels VB.carousels.myCarousel.next(); VB.carousels.myCarousel.prev(); VB.carousels.myCarousel.goTo(2); // Toasts VB.Toast('Message', 'success', 5000, 'top-right'); // Snackbar VB.Snackbar('Message', 'ACTION', callback, 5000); // Progress VB.SetProgress('elementId', 75); // Form Validation const isValid = VB.ValidateForm(formElement); // Screen Reader Announcements VB.announce('Message for screen readers', 'polite'); ``` --- ## ♿ Accessibility Testing ### Tested With: - **Screen Readers:** NVDA, JAWS, VoiceOver - **Keyboard Navigation:** All major browsers - **Automated Tools:** axe DevTools, WAVE, Lighthouse - **Color Contrast:** Meets WCAG AA standards ### Best Practices: 1. Always include skip links 2. Use proper semantic HTML 3. Provide text alternatives for images 4. Ensure keyboard accessibility 5. Test with screen readers 6. Maintain color contrast ratios 7. Use ARIA attributes appropriately --- ## 📱 Browser Support - Chrome (latest) - Firefox (latest) - Safari (latest) - Edge (latest) - Opera (latest) --- ## 🤝 Contributing Contributions are welcome! Feel free to submit issues, fork the repository, and create pull requests. --- ## 📝 License This project is licensed under the MIT License. --- ## 🙏 Credits - **Design Philosophy:** Inspired by Brutalist architecture and neo-brutalism web design - **Typography:** Works great with [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) - **Accessibility:** Built following WCAG 2.1 AA and Section 508 guidelines --- ## 🚀 What's New in V2.0 - ✅ **Full WCAG 2.1 AA Compliance** - Every component now meets accessibility standards - ✅ **Section 508 Compliance** - Federal accessibility requirements met - ✅ **Responsive Hamburger Menu** - Mobile-first navigation with accessibility - ✅ **Carousel Component** - Keyboard-accessible image and card carousels - ✅ **Toast Notifications** - Screen reader friendly notifications - ✅ **Snackbar** - Accessible brief messages with actions - ✅ **Enhanced Keyboard Navigation** - All components support full keyboard control - ✅ **ARIA Live Regions** - Dynamic content announcements for screen readers - ✅ **Focus Management** - Proper focus trapping and restoration - ✅ **Skip Links** - Jump to main content for keyboard users --- **Made with 🖤 for modern, inclusive, and bold web development** ⚡ **VIBE BRUTALISM 2.0** - Be Bold. Be Accessible. Be Brutalist.