Exciting tours for adventurous people
The purpose of this project was to become familiar and comfortable using SASS to compile and organise CSS.
It also helped me understand more advanced CSS techniques such as animation, how to scale or rotate images using the transform property, as well as the pre-requisites needed to ensure websites are responsive, browser compatible, and accessible.
You will need to install Node.js to run this.
Check the documentation to install it on your system.
Once Node.js is installed, you will need several extensions to run this project.
Open the terminal/command-line in your code editor, then install the following:
npm install node-sass ---save-dev
npm install postcss --save-dev
npm install npm-run-all --save-dev
npm install live-server --save-dev -w
Once the above are installed run the following commands:
npm run build:css
npm run start
npm watch:sass
Once installed, all following commands in the package.json file should function correctly.
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
package.json
Changes can be made in the components SASS folder. Run npm watch:sass to see in the browser all changes made in real time.
- @willh89 - Built by
- @jonasschmedtmann - Idea & Initial Work