An introduction to FlexBox
The objective of this project was to build a responsive booking site to practice using Flexbox in CSS. This project helped me understand best practices of positioning, spacing, and alignment.
SVG (vectors) icons were also used throughout, as well as the BEM methodology, CSS variables, miscellaneous animations and a responsive design ensuring the site is accessible on 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",
"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.
- HTML - Markup Language
- CSS - Stylesheets
- SASS - CSS Preprocessor
- Node.js - CSS Preprocessor
- Flexbox - CSS web layout model
- SVGs - vector images
- @willh89 - Built by
- @jonasschmedtmann - Idea & Initial Work
@jonasschmedtmann - Advanced CSS Course