A Modern, Lightweight CSS Framework for Developers
Build beautiful, responsive interfaces with minimal effort using our carefully crafted component library.
📦 NPM Package • 🎨 Live Demo • 📖 Documentation • ⚡ Get Started • 🤝 Contributing
- 📦 NPM Package - Easy installation and version management
- 🎯 Lightweight - Only 5.2KB minified, 24.3KB unpacked
- 📱 Responsive - Mobile-first design approach
- 🎨 Customizable - CSS custom properties for easy theming
- ⚡ Fast - Optimized for performance and quick loading
- 🔧 Developer-friendly - Clean, semantic class names
- 🌐 CDN Ready - Multiple integration options
- 🎭 Modern - Built with current web standards
- ♿ Accessible - WCAG compliant components
- 🔄 Zero Dependencies - Pure CSS framework
Install via NPM for modern build workflows:
npm install geeks-ui-frameworkThen import in your CSS:
@import 'geeks-ui-framework/dist/geeks-ui.css';Or import the minified version:
@import 'geeks-ui-framework/dist/geeks-ui.min.css';Add this line to your HTML <head> section:
<link rel="stylesheet" href="https://unpkg.com/geeks-ui-framework@latest/dist/geeks-ui.min.css">Download the latest release from our GitHub repository.
🎯 📚 Documentation Hub - Your complete guide to all documentation resources!
Comprehensive documentation and guides to help you get the most out of Geeks UI:
- 📖 Complete Documentation - Full component reference with examples
- 🚀 Getting Started Guide - Beginner-friendly setup instructions
- ⚡ Quick Reference - Handy cheat sheet for developers
- 🎮 Interactive Examples - Live playground and demos
- � API Reference - Detailed class documentation and CSS variables
- 🔄 Migration Guide - Upgrade from older versions
- 🚀 Advanced Examples - Real-world implementation patterns
Create attention-grabbing alerts with various styles:
<div class="alert alert-primary">🎉 Welcome to Geeks UI!</div>
<div class="alert alert-success">✅ Changes saved successfully!</div>
<div class="alert alert-warning">⚠️ Please review your settings.</div>
<div class="alert alert-danger">❌ An error occurred.</div>Versatile buttons for all your interaction needs:
<!-- Primary Actions -->
<button class="btn btn-primary">Get Started</button>
<button class="btn btn-secondary">Learn More</button>
<!-- Status Buttons -->
<button class="btn btn-success">Save Changes</button>
<button class="btn btn-warning">Reset Form</button>
<button class="btn btn-danger">Delete Item</button>
<!-- Size Variants -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>Modern navigation bars and menus:
<!-- Basic Navbar -->
<nav class="navbar">
<div class="navbar-brand">
<a href="#">Your Brand</a>
</div>
<div class="navbar-menu">
<a href="#" class="navbar-item">Home</a>
<a href="#" class="navbar-item">About</a>
<a href="#" class="navbar-item">Contact</a>
</div>
</nav>Responsive containers and layout systems:
<!-- Main Container -->
<div class="container">
<h1>Your Content Here</h1>
<p>Responsive content that adapts to screen size.</p>
</div>
<!-- Fluid Container -->
<div class="container-fluid">
<h2>Full-width content</h2>
</div>Professional footer layouts:
<footer class="footer">
<div class="container">
<div class="footer-content">
<h3>Your Company</h3>
<p>Building amazing web experiences.</p>
</div>
</div>
</footer>Geeks UI uses CSS custom properties for easy theming:
:root {
--primary-color: #667eea;
--secondary-color: #764ba2;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
--info-color: #3b82f6;
}/* Custom button styling */
.btn-primary {
--primary-color: #your-color;
background: var(--primary-color);
}If you're contributing or want to build from source:
# Clone the repository
git clone https://github.com/Geeks-UI-Css-Framework/Geeks_UI.git
# Navigate to the GeeksUI package directory
cd Geeks_UI/GeeksUI
# Install dependencies
npm install
# Build the CSS
npm run build
# Watch for changes
npm run dev- Size: 5.2KB (minified)
- Unpacked Size: 24.3KB
- Files: 13 total files
- Dependencies: 0 (zero dependencies!)
- License: MIT
- Latest Version: Check NPM
Geeks UI supports all modern browsers:
- ✅ Chrome (latest)
- ✅ Firefox (latest)
- ✅ Safari (latest)
- ✅ Edge (latest)
- ✅ Opera (latest)
We welcome contributions! Here's how you can help:
- Check existing issues
- Create a new issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Browser and version information
- Check existing issues for similar requests
- Create a new feature request with:
- Clear description of the feature
- Use case and benefits
- Proposed implementation (if any)
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Make your changes
- Add tests if applicable
- Update documentation
- Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- 📝 Follow semantic commit messages
- 🧪 Test changes across browsers
- 📚 Update documentation when needed
- 🎨 Maintain consistent code style
- ♿ Ensure accessibility compliance
- 📦 Update package version if needed
This project is licensed under the MIT License - see the LICENSE file for details.
Joey Cadieux
- 📧 Email: joey@tech-center.com
- 🐙 GitHub: @joeycadieux
- 🌐 Website: tech-center.com
- 📦 NPM Package: geeks-ui-framework
- 🌐 Live Demo: GitHub Pages
- 📁 GitHub Repository: Geeks_UI
- 🐛 Issues: Report Issues
- 📋 Releases: View Releases
- Inspired by modern CSS frameworks like Bootstrap and Tailwind
- Built with ❤️ for the developer community
- Special thanks to all contributors and users
- Designed for developers who value simplicity and performance
- Additional components (forms, cards, modals)
- Dark theme support
- Advanced grid system
- Animation utilities
- React/Vue component wrappers
- Accessibility improvements
- Performance optimizations