Skip to content

Repository files navigation

Griffin CSS Logo

Griffin CSS

A Modern, Lightweight CSS Framework for Building Beautiful Websites Faster

License: MIT Version Made With CSS Status

🌐 Website: https://griffin-css.netlify.app

📖 Documentation: https://griffin-css.netlify.app/griffin_css_docs.html

If you find Griffin CSS useful, please consider giving this repository a star!


✨ About

Griffin CSS is a lightweight and modern CSS framework designed to help developers create beautiful, responsive websites without writing repetitive CSS.

It provides ready-to-use UI components, responsive layouts, animations, utilities, and copy-paste HTML snippets so you can focus on building instead of styling.

Whether you're creating a portfolio, landing page, dashboard, blog, or web application, Griffin CSS helps you build faster with clean, reusable components.


🚀 Features

  • 🎨 Modern Design System
  • 📱 Fully Responsive Components
  • ⚡ Lightweight & Fast
  • 🧩 Copy-Paste HTML Components
  • 🎭 Built-in Animations
  • 📝 Beautiful Forms
  • 🖼️ Cards
  • 🔘 Buttons
  • 🧭 Navigation Bars
  • 📊 Dashboard Components
  • 💬 Modals & Popups
  • 🎯 Landing Page Sections
  • 💡 UI Utilities
  • 📦 No JavaScript Required (for most components)

📦 Installation

Simply include Griffin CSS inside your HTML.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css">

That's it.

Start using Griffin CSS immediately.


📖 Example

<button class="g-btn-primary">
    Get Started
</button>

🌍 Live Website

Visit

https://griffin-css.netlify.app

to browse every component with live previews and copy-paste code.


📚 Components

Current categories include:

  • Buttons
  • Cards
  • Navigation
  • Layouts
  • Design Utilities
  • UI Components
  • Forms
  • Modals
  • Popups
  • Dashboard
  • Landing Page
  • Feedback
  • Animations
  • Interaction Effects

More components are added regularly.


📁 Project Structure

griffin-css/

├── griffin.css
├── index.html
├── griffin-components.html
├── griffin_css_docs.html
├── buttons.html
├── cards.html
├── navigation.html
├── layout.html
├── design.html
├── ui.html
├── forms.html
├── modals.html
├── popups.html
├── dashboard.html
├── landing.html
├── interaction.html
├── animated.html
├── feedback.html
├── favicon.png
└── README.md

💻 Browser Support

✅ Chrome

✅ Firefox

✅ Edge

✅ Opera

✅ Safari


🛣️ Roadmap

  • Initial Release
  • Responsive Components
  • Documentation Website
  • Dark Mode Components
  • Theme Customizer
  • More Dashboard Widgets
  • Additional Landing Page Sections
  • Accessibility Improvements
  • NPM Package
  • Component Playground

🤝 Contributing

Contributions are always welcome.

If you'd like to improve Griffin CSS:

  1. Fork the repository

  2. Create a new branch

  3. Commit your changes

  4. Open a Pull Request

Bug reports, feature requests, and suggestions are appreciated.


⭐ Support

If Griffin CSS helped you, please consider:

⭐ Starring this repository

🍴 Forking it

📢 Sharing it with other developers

Every star motivates further development.


📄 License

This project is licensed under the MIT License.

See the LICENSE file for details.


👨‍💻 Author

Ali Ahmad Khan

Frontend Developer • Web Designer • Author

🌐 Website: https://griffin-css.netlify.app


Build Beautiful Websites Faster with Griffin CSS 🚀

⭐ Star the repository if you enjoyed using Griffin CSS!

About

A modern, lightweight CSS framework with responsive layouts, reusable UI components, animations, and copy-paste HTML.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages