You should now have a basic understanding of what Astro and Alpine.js are doing. You are now ready to setup the project to start developing. We've been talking about Astro for ages but you'll quickly see how fast it is to setup your project. In your terminal window, change directory to the root of the project:
Then start by building the project. Run the following command. It will also launch a development server in your browser window :
npm run dev
When the task starts, you should be redirected to your browser showing the
index.html page. That's it, your project is now running. Every change you make to the html or scss files will trigger a code compilation and a browser refresh. Really easy isn't it?
Every project uses 3 color variables and a set of box shadows that you can customize to control global colors accross the template. There are 3 main variables :
- Primary color
- Secondary color
- Accent color
Our new example theme will use primary red (
#f95c64), secondary blue (
#325bff) and accent purple (
#dc2dff) as the main colors (these colors are just a random example, do not use in production and pick your own colors instead). Lets create those new variables. Add this to your
src/scss/abstracts/_variables.scss file :
/* ========================================================================== Example theme variables ========================================================================== */ $primary: #f95c64; $secondary: #325bff; $accent: #dc2dff;
Every project component and layout element rely on these variables. Changing them will immediatly impact all colors in the project.
Some elements, like buttons, have colored box shadows. Box shadows inherit their colors from the 3 previsously defined color variables. What is great is that you don't have anything to do. Those box shadows variables are generated for you, because they inherit the value of each one of the main colors.
//Base shadow $base-shadow: rgba(0, 0, 0, 0.12); //Primary box shadow $primary-shadow-from: rgba($primary, 0.42); $primary-shadow-to: rgba($primary, 0.2); $primary-box-shadow: 0 14px 26px -12px $primary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $primary-shadow-to; //Secondary box shadow $secondary-shadow-from: rgba($secondary, 0.42); $secondary-shadow-to: rgba($secondary, 0.2); $secondary-box-shadow: 0 14px 26px -12px $secondary-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $secondary-shadow-to; //Accent box shadow $accent-shadow-from: rgba($accent, 0.42); $accent-shadow-to: rgba($accent, 0.2); $accent-box-shadow: 0 14px 26px -12px $accent-shadow-from, 0 4px 23px 0px $base-shadow, 0 8px 10px -5px $accent-shadow-to;