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.
-
Use this template in your project or just clone the repository:
git clone https://github.com/albertogmdev/astro-template.git
-
Navigate to the project directory:
cd astro-template -
Install the dependencies:
npm install
-
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
.scssfiles located in the/scssdirectory. To compile SCSS styles you have to runsass --watch ./public/scss/styles.scss:./public/css/styles.css
If you prefer not to use SASS, you can remove the
/scssdirectory.If you delete the
/scssdirectory, you'll need to manage all styles and variables manually within thestyles.cssfile.
Development server
npm run devBuild application
If you want to generate static HTML content
npm run buildThis command will create /dist folder with your static application. For running a preview of the static content simply run
npm run previewThis 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).
Contributions are welcome! If you have suggestions for improvements, feel free to open an issue or submit a pull request.
Feel free to customize this template to better suit your specific project needs.
