Carte Royal

Мережа, до якої входять резиденція Шато Роял, ресторація Буржуй, м’ясний клуб Rondel, Fazenda family park, шинок Калина, кейтерингова компанія VipSM та кондитерське ательє Vanil.

How to use

1. Clone repository
2. Install Node Modules: npm i
3. Run: gulp

Main Gulp tasks:

• gulp: run default gulp task ('img', 'styles', 'scripts', 'browser-sync', 'watch')
• cleanimg: Clean @*x responsive IMG's
• rsync: project deployment via RSYNC

Basic rules

1. All custom scripts located in app/js/_custom.js
2. All custom styles located in app/sass/main.sass
3. All Sass vars placed in app/sass/_vars.sass
4. All fonts plug in app/sass/_fonts.sass
5. All CSS styles of libraries plug in app/sass/_libs.sass
6. All responsive images placed in app/img/_src/ folder. All source images should initially have a 2x resolution. Result image folders after resize & compression: img/@1x/ and img/@2x/ accordingly.

Included features

1. bootstrap-reboot.scss - Bootstrap Reboot CSS collection
2. _breakpoints.scss - Bootstrap Breakpoints mixin
3. js/_lazy.js - Lazy loading images using Intersection Observer

Lazy loading images

Lazy loading img & background images using intersection observer. Enabled by default.

Reference: Google Developers.

1. Example of the usual <img> tag:

<img class="lazy" src="thumb.gif" data-src="img/@1x/real.jpg" data-srcset="img/@1x/real.jpg 1x, img/@2x/real.jpg 2x">

2. Background image class changer example: <div class="lazy-background"> with added class ".visible" for styling.

3. Background image style attribute lazy loading example: <div data-bg="image.jpg">.

Caching

Rename ht.access to .htaccess before place it in your web server. This file contain rules for htaccess resources caching.