# SCSS Starter Kit

A modular, reusable, and scalable SCSS starter kit to speed up your front-end development.  
This starter kit has variables, mixins, functions, placeholders, base styles, components, helpers, and themes organized so that you can easily reuse them in every project.

---

## Features

- Well-structured folder organization  
- Customizable variables for colors, fonts, spacings, etc.  
- Mixins and functions for common CSS patterns  
- Placeholder selectors for reusable styles  
- Base styles including reset, typography, buttons, cards, forms, modals, dark mode  
- Utility helper classes for common tasks  
- Print-friendly styles  
- Ready to extend and customize as per project needs  

---

## Folder Structure SASS/SCSS

scss/
- abstracts/ // Variables, mixins, functions, placeholders
- base/ // Reset, base styles, typography
- components/ // Buttons, cards, modals, forms
- layout/ // Header, footer, grid, navigation
- pages/ // Page-specific styles
- themes/ // Light and dark theme styles
- utilities/ // Helpers, spacers, scrollbar, print
- vendors/ // Bootstrap or third-party overrides
- main.scss // Main entry SCSS file

## 🚀 Getting Started

### 📦 1. Clone the repository

git clone https://github.com/AizazJamil/scss-starter-kit.git
cd scss-starter-kit

## 2. Install Dependencies

npm install

## 3. Run in Development Mode

npm run dev

## 4. Watch & Compile SCSS

npm run watch:sass

## 5. Build for Production

npm run build

## 6. Preview Production Build

npm run preview