🚀 Geeks UI

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

✨ Features

📦 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

🚀 Quick Start

📦 NPM Installation (Recommended)

Install via NPM for modern build workflows:

npm install geeks-ui-framework

Then 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';

🌐 CDN Installation (Quick Start)

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

Download the latest release from our GitHub repository.

📖 Documentation

🎯 📚 Documentation Hub - Your complete guide to all documentation resources!

Comprehensive documentation and guides to help you get the most out of Geeks UI:

📚 User Guides

📖 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

🔧 Developer Resources

� API Reference - Detailed class documentation and CSS variables
🔄 Migration Guide - Upgrade from older versions
🚀 Advanced Examples - Real-world implementation patterns

🎯 Quick Examples

�🚨 Alert Components

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>

🔘 Button Components

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>

🧭 Navigation Components

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>

📦 Container & Layout

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>

🦶 Footer Components

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>

🎨 Customization

CSS Custom Properties

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;
}

Override Default Styles

/* Custom button styling */
.btn-primary {
  --primary-color: #your-color;
  background: var(--primary-color);
}

🏗️ Build Process

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

📊 Package Stats

Size: 5.2KB (minified)
Unpacked Size: 24.3KB
Files: 13 total files
Dependencies: 0 (zero dependencies!)
License: MIT
Latest Version: Check NPM

🌐 Browser Support

Geeks UI supports all modern browsers:

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Opera (latest)

🤝 Contributing

We welcome contributions! Here's how you can help:

🐛 Reporting Bugs

Check existing issues
Create a new issue with:
- Clear description of the problem
- Steps to reproduce
- Expected vs actual behavior
- Browser and version information

💡 Feature Requests

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)

🔧 Pull Requests

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

Contribution Guidelines

📝 Follow semantic commit messages
🧪 Test changes across browsers
📚 Update documentation when needed
🎨 Maintain consistent code style
♿ Ensure accessibility compliance
📦 Update package version if needed

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Author

Joey Cadieux

📧 Email: joey@tech-center.com
🐙 GitHub: @joeycadieux
🌐 Website: tech-center.com

🔗 Links

📦 NPM Package: geeks-ui-framework
🌐 Live Demo: GitHub Pages
📁 GitHub Repository: Geeks_UI
🐛 Issues: Report Issues
📋 Releases: View Releases

🙏 Acknowledgments

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

📈 Roadmap

Made with ❤️ by developers, for developers

⭐ Star this repo if you find it helpful!

📦 NPM • 🌐 Demo • 🐙 GitHub

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
.github		.github
GeeksUI		GeeksUI
demo		demo
test		test
ADVANCED-EXAMPLES.md		ADVANCED-EXAMPLES.md
API-REFERENCE.md		API-REFERENCE.md
DEPLOYMENT.md		DEPLOYMENT.md
DOCUMENTATION-HUB.md		DOCUMENTATION-HUB.md
DOCUMENTATION.md		DOCUMENTATION.md
GETTING-STARTED.md		GETTING-STARTED.md
INSTALL.md		INSTALL.md
INTERACTIVE-EXAMPLES.html		INTERACTIVE-EXAMPLES.html
MIGRATION-GUIDE.md		MIGRATION-GUIDE.md
NPM-PUBLISHING-GUIDE.md		NPM-PUBLISHING-GUIDE.md
QUICK-REFERENCE.md		QUICK-REFERENCE.md
README.md		README.md
README_NEW.md		README_NEW.md
example-fix.css		example-fix.css
index.html		index.html

Geeks-UI-Css-Framework/Geeks_UI

Folders and files

Latest commit

History

Repository files navigation