/natours

Natours is a landing page for a travel website which lets you book nature tours

Primary LanguageCSS

Natours - Outdoor is where life happens

Natours | Exciting tours for adventurous people

Natours is a professional and modern responsive website tempate for the Travel industry. The template can be used for apps such as Travel blogs, Tour bookings and more.

Natours Screenshot

Table of content

Description

This template uses the following:

  • Modern CSS

    • clip-path
    • keyframes animations
    • background-clip
    • backface-visibility
    • background video
    • pop up using pure css

  • BEM Methodology

  • Custom 4 column grid

  • SASS

    • variables
    • nesting
    • parials and imports
    • mixins
    • functions
    • extends

  • 7-1 project structure for SASS Files -

    • base/
    • components/
    • layout/
    • pages/
    • themes/
    • abstracts/
    • vendors/

A build script is created to accomodate older browser compatibility

Installation

  1. Clone the project to your local directory
git clone https://github.com/KaushikShivam/natours.git
  1. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies
npm install
  1. Run the watch script to view live changes to your CSS
npm run watch:sass
  1. 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)

Scripts

The project uses AutoPrefixer, Node-sass, npm-run-all etc to build the following scripts:

Watch live changes in development

  1. Watch live changes to the sass
"watch:sass": "node-sass sass/main.scss css/style.css -w"
  1. Run Live-server for live development changes
"devserver": "live-server --browser=firefox"
  1. Script to run both simultaneously
"start": "npm-run-all --parallel devserver watch:sass"

Run npm start to run the script

Build script for production

  1. Compile sass files
"compile:sass": "node-sass sass/main.scss css/style.comp.css"
  1. Concat all the css files including font styles etc
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
  1. 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"
  1. Adds compression
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
  1. Final Build process
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

Run npm run build:css to run the build script

Contact

You can contact me at: