Trillo is a professional, flat and modern website tempate for the Travel industry. The template can be used for apps such as Travel blogs, Hotel bookings, Flight bookings and more.
This template only uses Flexbox for alignment and layout. So, no external framework is necessary. The project also implements the BEM-methodology for CSS classes.
The project uses a lot of modern and experimental CSS rules and a build script is added to accomodate older browser compatibility.
- Clone the project to your local directory
git clone https://github.com/KaushikShivam/Trillo.git
- The project uses NPM for managing dependencies. Run npm install to install all the required dependencies
npm install
- Run the watch script to view live changes to your CSS
npm run watch:sass
- Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)
The project uses AutoPrefixer, Node-sass, npm-run-all etc to build the following scripts:
Watch live changes to the sass
"watch:sass": "node-sass sass/main.scss css/style.css -w"
Run npm run watch:sass to run the script
- Compile sass files
"compile:sass": "node-sass sass/main.scss css/style.comp.css"
- Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css"
- Adds compression
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
- Final Build process
"build:css": "npm-run-all compile:sass prefix:css compress:css"
Run npm run build:css to run the build script
You can contact me at: