An introduction to CSS Grid
The objective of this project was to construct a dynamic real estate website, utilising CSS-Grid within SASS/CSS to practice my skills with this particular methodology. Throughout the project, I gained insight into tried and tested techniques for positioning, spacing, and alignment.
Numerous variables were incorporated, particularly colours, fonts, and size proportions. Additionally, a responsive design was integrated to ensure accessibility across all devices.
You will need to install Node.js to run this project.
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",
"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 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.
- HTML - Markup Language
- CSS - Stylesheets
- SASS - CSS Preprocessor
- Node.js - CSS Preprocessor
- CSS Grid - CSS web layout model
- @willh89 - Built by
- @jonasschmedtmann - Idea & Initial Work
@jonasschmedtmann - Advanced CSS Course