Astro Sassify Template

A modern, responsive Astro template with Tailwind CSS and Alpine.js integration. This template provides a solid foundation for building fast, SEO-friendly websites with a clean design system.

🚀 Features

• Astro - The web framework for content-driven websites
• Tailwind CSS - Utility-first CSS framework
• Alpine.js - Lightweight JavaScript framework for interactivity
• Responsive design system with custom color palette
• Dark mode support
• Smooth page transitions
• Performance optimized
• SEO-friendly

📦 Project Structure

/
├── public/             # Static assets
│   └── favicon.svg
├── src/
│   ├── assets/         # Images and other assets
│   ├── components/     # Reusable UI components
│   ├── layouts/        # Page layouts
│   ├── pages/          # Page routes
│   ├── scripts/        # JavaScript utilities
│   └── styles/         # Global styles
│       ├── global.css
│       └── transitions.css
├── astro.config.mjs    # Astro configuration
└── package.json        # Project dependencies

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:4321
npm run build	Build your production site to ./dist/
npm run preview	Preview your build locally, before deploying
npm run astro ...	Run CLI commands like astro add, astro check
npm run astro -- --help	Get help using the Astro CLI

🎨 Customization

Colors

The template includes a custom color palette defined in src/styles/global.css:

• Primary: Purple-based color scheme
• Secondary: Slate-based color scheme
• Accent: Lime-based color scheme
• Warning: Yellow-based color scheme

You can customize these colors by editing the src/styles/global.css file.

Typography

The template uses the following font families:

• Sans: Inter (with system fallbacks)
• Display: Lexend (with system fallbacks)

Animations

Custom animations are included:

• Fade In
• Slide Up
• Slide Down

🚀 Getting Started

There are two ways to use this template:

Option 1: Using Astro CLI (Recommended)

Create a project directly with Astro's official CLI tool:

npm create astro@latest -- --template larry-xue/astro-sassify-template

Option 2: Manual Clone

1. Clone this repository

   git clone https://github.com/larry-xue/astro-sassify-template.git my-project
   cd my-project

2. Install dependencies

   npm install

3. Start the development server

   npm run dev

4. Visit http://localhost:4321 in your browser to see your site

📝 License

MIT

👀 Learn More

• Astro Documentation
• Tailwind CSS Documentation
• Alpine.js Documentation