Astro and SASS Template Project

This is a basic template project that uses Astro (version 4.14.2) and SASS to help you quickly set up new web projects. The template also includes styles and management for dark and light themes, making it easy to switch between different visual styles.

Requirements

• Node.js (version 18 or higher)
• Astro (version 4.0 or higher)

How to use the template

Installation

1. Use this template in your project or just clone the repository:

   git clone https://github.com/albertogmdev/astro-template.git

2. Navigate to the project directory:

   cd astro-template

3. Install the dependencies:

   npm install

4. Prepare SCSS or CSS styles

   The template is configured to work with SASS. In case you dont have installed in your machine:

   Install SASS globally:

   npm install -g sass

   Verify the installation:

   sass --version

   For more information check SASS Installation Guide

   Once SASS is installed, you can start customizing the styles by editing the .scss files located in the /scss directory. To compile SCSS styles you have to run

   sass --watch ./public/scss/styles.scss:./public/css/styles.css

   If you prefer not to use SASS, you can remove the /scss directory.

   If you delete the /scss directory, you'll need to manage all styles and variables manually within the styles.css file.

Development

Development server

npm run dev

Build application

If you want to generate static HTML content

npm run build

This command will create /dist folder with your static application. For running a preview of the static content simply run

npm run preview

Themes

This template supports themes. The application has a dark theme by default, but you can change the theme of a page, section or component by simply adding theme--dark or theme--light to the class of a tag.

You can also customize colors (inside /scss/_variables.scsss) and change or add new themes to the template (inside /scss/_themes_.scsss).

Contributing

Contributions are welcome! If you have suggestions for improvements, feel free to open an issue or submit a pull request.

License

Feel free to customize this template to better suit your specific project needs.