# Natours

Natours проект

Demo (opens new window)

Адаптивная посадочная страница для туристического агенства. Проект отличается чистым, лего читаемым, масштабируемым, изменяемым и хорошо структурированным кодом. Использует самые современные свойства CSS, при этом сохраняя поддержку старых браузеров.


# Стэк технологий

    # Фичи

      # Структура проекта

      /css
      /img
      /sass
      	/abstracts
      	/base
      	/components
      	/layout
      	/pages
      	main.scss
      index.html
      

      # Sass

      Для написания стилей применен препроцессор SASS (opens new window). Это позволяет удобнее структурировать файлы стилей, использовать миксины, переменные и прочие полезные фичи этой технологии. Все это несомненно ускоряет разработку и выводит на следующий уровень масштабируемость и надежность проекта.

      # Семантическая разметка

      В разметке использованы семантические теги, такие как: header, main, footer, section, nav. Это делает страницу более SEO-friendly и улучшает доступность для скринридеров.

      <header class="header">
      	...
      </header>
      
      <main>
      	...
      </main>
      
      <footer class="footer">
      	...
      </footer>
      

      Source: index.html

      # Богатая анимация

      Страница богато приправлена анимированными элементами. Вся анимация реализована средствами CSS.

      # Анимация главного меню

      В главном меню анимированы само меню, его элементы и кнопка его открытия.

      Само меню фиксировано и растянуто на всю ширину окна. Оно скрыто с помощью свойства opacity: 0. Анимация реализуется с помощью свойства transition.

      ...
      
      	&__nav {
      		height: 100vh;
      		width: 0;
      		position: fixed;
      		top: 0;
      		left: 0;
      		z-index: 1500;
      
      		opacity: 0;
      
      		transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      	}
      
      ...
      

      Source: /sass/layout/_navigation.scss

      Кнопка так же фиксирована и связана с чекбоксом. При клике на кнопку, свойство чекбокса меняется на true и применяются стили к меню.

      ...
      
      	&__checkbox:checked ~ &__nav {
      		opacity: 1;
      		width: 100%;
      	}
      
      ...
      

      Source: /sass/layout/_navigation.scss

      # Анимация карточек туров

      Каждая карточка выбора тура разворачивается на 180 градусов, если навести на нее курсор. На другой стороне карточки указана цена и расположена кнопка заказа, которая запускает pop-up.

      Natours анимация карточки тура

      Анимация карточек реализована при помощи свойства transition.

      .card {
      	...
      
      	&__side {
      		...
      		transition: all .8s ease;
      		...
      	}
      
      	...
      
      	&:hover &__side--front {
      		transform: rotateY(-180deg);
      	}
      
      	&:hover &__side--back {
      		transform: rotateY(0);
      	}
      
      	...
      }
      

      Source: /sass/components/_card.scss

      # Адаптивность

      Natours mobile

      Страница адаптирована под несколько типов устройств:

      • смартфон
      • планшет в книжной и альбомной ориентации
      • десктоп

      Для удобства создания медиазапросов, они вынесены в отдельный миксин, находящийся в файле /sass/abstracts/_mixins.scss.

      /* 
      $breakpoint argument choices:
      - phone
      - tab-port
      - tab-land
      - big-desktop
      */
      @mixin respond($breakpoint) {
      	@if $breakpoint == phone {
      		@media only screen and (max-width: 37.5em) { @content } //600px
      	}
      	@if $breakpoint == tab-port {
      		@media only screen and (max-width: 56.25em) { @content } //900px
      	}
      	@if $breakpoint == tab-land {
      		@media only screen and (max-width: 75em) { @content } //1200px
      	}
      	@if $breakpoint == big-desktop {
      		@media only screen and (min-width: 112.5em) { @content } //1800px
      	}
      }
      

      Source: /sass/abstracts/_mixins.scss

      Пример использования миксинов адаптивности для блока .section-stories. В данном случае для планшетов у блока изменяется внутренний отступ.

      .section-stories {
      	position: relative;
      	padding: 15rem 0;
      
      	@include respond(tab-port) {
      		padding: 10rem 0;
      	}
      }
      

      Source: /sass/pages/_home.scss

      # Тема

      Все цвета вынесены в переменные и находятся в отдельном файле. Это позволяет легко менять цветовую палитру страницы.

      // Colors
      $color-primary: #55c57a; 
      $color-primary-light: #7ed56f;
      $color-primary-dark: #28b485;
      
      $color-secondary-light: #ffb900;
      $color-secondary-dark: #ff7730;
      
      $color-tertiary-light: #2998ff;
      $color-tertiary-dark: #5643fa;
      
      $color-grey-light-1: #f7f7f7;
      $color-grey-light-2: #eee;
      $color-grey-dark: #777;
      $color-grey-dark-2: #999;
      $color-grey-dark-3: #333;
      
      
      $color-white: #fff;
      $color-black: #000;
      

      Source: /sass/abstracts/_variables.scss

      # Видео

      В блоке отзывов на заднем фоне находится видео.

      Natours видео

      # Форма заказа

      Внизу страницы расположена простая форма заказа с парой кастомизированных радио-кнопок для указания размера группы туристов.

      Natours форма заказа

      # Pop-up

      При нажатии на кнопку в карточке тура, всплывает окно. Для разметки текста внутри этого окна использовано свойство column-count.

      Natours pop-up
      .popup {
      	...
      
      	&__text {
      		...
      
      		column-count: 2;
      		column-gap: 4rem;
      		column-rule: 1px solid $color-grey-light-2;
      
      		hyphens: auto;
      
      		...
      	}
      
      	...
      }
      

      Source: /sass/components/_popup.scss

      # BEM

      Для именования классов я использовал методологию BEM (opens new window). Вот, например, как выглядит разметка и стили формы.

      <form action="#" class="form">
      	...
      	<div class="form__group">
      		<input type="text" class="form__input" placeholder="Full Name" id="name" required>
      		<label for="name" class="form__label">Full name</label>
      	</div>
      	<div class="form__group">
      		<input type="email" class="form__input" placeholder="Email address" id="email" required>
      		<label for="email" class="form__label">Full name</label>
      	</div>
      	<div class="form__group u-margin-bottom-medium">
      		<div class="form__radio-group">
      			<input name="size" type="radio" id="small" class="form__radio-input">
      			<label for="small" class="form__radio-label">
      				<span class="form__radio-button"></span>
      			Small tour group</label>
      		</div>
      		<div class="form__radio-group">
      			<input name="size" type="radio" id="large" class="form__radio-input">
      			<label for="large" class="form__radio-label">
      				<span class="form__radio-button"></span>
      			Large tour group</label>
      		</div>
      	</div>
      	<div class="form__group">
      		<button class="btn btn--green">Next step &rarr;</button>
      	</div>
      </form>
      

      Source: index.html

      .form {
      
      	&__group {
      		...
      	}
      
      	&__input {
      		...
      	}
      
      	&__label {
      		...
      	}
      
      	...
      }
      

      Source: /sass/components/_form.scss

      # Поддержка старых браузеров

      Некоторые фичи, использованные на странице, поддерживаются не всеми браузерами. Например, свойство backdrop-filter. В таких случаях я использую директиву @supports для определения возможностей браузера, используемого пользователем.

      # Supports в элементе Pop-up

      .popup {
      	...
      
      	@supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
      		-webkit-backdrop-filter: blur(10px);
      		backdrop-filter: blur(10px);
      		background-color: rgba($color-black, .3);
      	}
      
      	...
      }
      

      Source: /sass/components/_popup.scss

      # PostCSS и Autoprefixer

      Плагин Autoprefixer для PostCSS (opens new window) отвечает за расстановку вендорных префиксов, необходимых для правильной работы некоторых новых CSS свойств.

      # Билд

      Итоговая версия проекта собирается посредством запуска npm-скрипта. Включает в себя компиляцию SASS -> CSS, расстановку префиксов, конкатенацию файлов и минификацию.

      "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
      

      Source: package.json

      # Исходный код на GitHub

      Natours (opens new window)