Layouts | Griffin CSS

Griffin CSS

Patterns / Layouts

UI Elements 🃏Cards20 🔘Buttons20 📝Forms6 🪟Modals6 💬Popups10

Patterns 📊Dashboard5 🚀Landing Pages5 🔔Feedback10 ✨Interaction10

Advanced 🎭Animated6 🎨Design Components6 🧩UI10

Layouts

10 full page layout patterns ... click any layout to view & copy its HTML. Drop in your content and link the Griffin CSS CDN.

Layout HTML

Copy and paste into your project

HTML

How to use: Copy the CSS classes below and add them to your code file (or paste directly into a <style> tag). All layout classes follow the g-{layout-name} namespace pattern so they won't conflict with your existing styles.

CSS

💡 All layout classes use the g- prefix. Link Griffin CSS via <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AliAhmad1101/griffin-css@main/griffin.css"> for base reset, tokens, and utility classes.