/Trillo-Project

This project taught by Jonas Schmedtman helped me become familiar with flexbox in CSS and how it can simplify alignment with properties, especially compared to older methods such as floats. I also learnt about SVGs, the 'sprite' file and how its used to store multiple icons in code, rather than dozens of images in a single file.

Primary LanguageSCSS

Project logo

Trillo Project

Status License

An introduction to FlexBox

Click here for live site

Table of Contents

About

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.

Requirements

You will need to install Node.js to run this project.

Check the documentation to install it on your system.

Installation

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

Usage

Changes can be made in the components SASS folder. Run npm watch:sass to see in the browser all changes made in real time.

Built Using

  • HTML - Markup Language
  • CSS - Stylesheets
  • SASS - CSS Preprocessor
  • Node.js - CSS Preprocessor
  • Flexbox - CSS web layout model
  • SVGs - vector images

Authors

Acknowledgements

@jonasschmedtmann - Advanced CSS Course