# Спортивные часы Nike

Nikesportwatch

Demo (opens new window)

Одностраничный сайт для продажи спортивных часов Nike.

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

  • HTML/CSS
  • Jade(Pug)
  • Sass
  • Gulp
  • PostCSS
  • BrowserSync
  • BEM/SMACSS

# Фичи

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

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

/source
	/jade
		/includes
		index.jade
	/sass
		/base
		/layout
		/module
		style.scss

# BEM/SMACSS

При работе над этой страницей, я использовал микс из двух методологий BEM (opens new window) и SMACSS (opens new window).

Подход SMACSS позволил удобно разделить стили по типу. Например, все что относится к внешнему виду имеет префикс l- и находится в папке /sass/layout.

Подход BEM позволил удобно распределить стили уже внутри соответствующих файлов.

...

.l-footer {
  ...

  &__top {
    ...
  }

  &__logo {
  	...
  }

  &__contact {
  	...
  }
}

...

/source/sass/layout/_footer.scss

# Jade(Pug)

Для разметки я использовал шаблонизатор Jade (сейчас это Pug (opens new window)). Помимо удобства написания разметки это позволило разбить страницу на отдельные модули. Например, так выглядит код шапки сайта:

//- header.jade
.l-header
  .l-header__row(itemscope)
    a.l-header__logo.m-logo--header(itemprop="url", href="#")
      img(src="images/nike-logo-min.png", alt="Логотип Найк").m-logo--header__image
      p.m-logo--header__text Официальный дилер 
        span(itemprop="name") Nike+ SportWatch GPS
    ul.l-header__contact
      li.l-header__phone
        a(href="tel:+7-916-195-97-77") +7 (916)195-97-77
      li.l-header__email
        a(href="mailto:info@nikesportwatch.ru") info@nikesportwatch.ru

/source/jade/includes/header.jade

# Sass

Использование CSS препроцессора Sass так же позволило разбить на модули стили и упростило разработку и доработку проекта.

# Gulp

Сборка проекта осуществлялась при помощи таск-менеджера Gulp.

// #WATCH
gulp.task('watch', function() {
  gulp.watch('./source/sass/**/*.scss', ['css']);
  gulp.watch('./source/jade/**/*.jade', ['html']);
});

//  BROWSER SYNC
gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: "build"
    }
  });
});

gulp.task('start', ['browser-sync', 'watch']);

gulpfile.js

# PostCSS

Я использовал плагин PostCSS Autoprefixer для того чтобы обеспечить поддержку старых браузеров.

# BrowserSync

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

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

NikeSportWatch (opens new window)