CSS Atlas

A modern, comprehensive reference tool for CSS properties and functions. Built with React, TypeScript, and Tailwind CSS.

✨ Features

• 180+ CSS Properties & Functions - Comprehensive coverage of modern CSS3
• Smart Search - Instant fuzzy search across all properties
• Category Filtering - Quick access by Layout, Typography, Colors, Animation, and more
• Favorites/Bookmarks - Save frequently used properties locally for quick access.
• Keyboard Navigation - Navigate between property cards using arrow keys and manage favorites with the Enter key.
• Syntax Highlighting - Beautiful code examples with proper formatting
• Copy to Clipboard - One-click code copying with visual feedback
• Lazy Loading - Optimized performance with intersection observer
• Responsive Design - Works seamlessly on desktop, tablet, and mobile
• SEO Optimized - Structured data, meta tags, and semantic HTML

🚀 Quick Start

Prerequisites

• Node.js 20+
• npm, pnpm, or bun

Installation

# Clone the repository
git clone https://github.com/art70x/css-atlas.git

# Navigate to the project
cd css-atlas

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:3000

Build for Production

# Create production build
npm run build

# Preview production build
npm run preview

📁 Project Structure

src/
|── app.tsx
|── auto-imports.d.ts
|── main.css
|── main.tsx
├── components/
│   ├── category-filter.tsx
│   ├── footer.tsx
│   ├── header.tsx
│   ├── lazy-property-card.tsx
│   ├── load-more-button.tsx
│   ├── search-bar.tsx
│   ├── skeleton.tsx
│   ├── syntax-highlight.tsx
│   └── theme-provider.tsx
├── data/
│   └── css-properties.ts
├── hooks/
│   ├── use-intersection-observer.ts
│   ├── use-keyboard-navigation.ts
│   ├── use-lazy-load.ts
│   ├── use-seo.ts
│   └── use-theme.ts
└── pages/
    ├── index.tsx
    ├── not-found.tsx
    └── og.tsx

🎨 Design System

The project uses a custom design system with CSS variables for theming:

:root {
  --background: 220 20% 97%;
  --foreground: 220 20% 10%;
  --primary: 240 70% 60%;
  --accent: 280 70% 60%;
  /* ... */
}

All colors use HSL format for easy theming. See src/main.css for the complete token set.

📚 Adding New Properties

Properties are defined in src/data/css-properties.ts:

{
  name: "property-name",
  category: "Layout", // Layout, Typography, Colors, Animation, etc.
  description: "Brief description of what the property does.",
  syntax: "property-name: value;",
  values: ["value1", "value2", "value3"],
  example: `.example {\n  property-name: value1;\n}`,
  browserSupport: {
    chrome: true,
    firefox: true,
    safari: true,
    edge: true
  }
}

🛠️ Tech Stack

• Framework: React
• Build Tool: Rolldown Vite
• Language: TypeScript
• Styling: Tailwind CSS
• Code Highlighting: Prismjs
• Routing: React Router
• Icons: Lucide React

📊 Performance

The application is optimized for performance:

• Lazy Loading: Cards load as they enter the viewport
• Code Splitting: Route-based code splitting with React Router
• Optimized Re-renders: Memoized components and callbacks
• Minimal Bundle: Tree-shaking and dead code elimination

🤝 Contributing

We welcome contributions! Please see CONTRIBUTING.md for guidelines.

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• MDN Web Docs - CSS documentation reference
• Can I Use - Browser support data
• Nuxpert - Inspiration for project structure, CI, Prettier, VS Code, and Vite configurations
• Lovable - Initial Prototype

---

Made with ❤️ for the web development community