# Doob Woodcraft

Doob Woodcraft landing page

Одностраничный сайт для продажи кошельков Doob Woodcraft.

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

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

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

/source
	/jade
		/includes
		index.jade
	/sass
		/base
		/layout
		/module
		style.scss
gulpfile.js
package.json

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

Страница сверстана с учетом семантики ее блоков.

//- header.jade
header.l-header
  .l-container
    .l-header_logo
      img(src="images/logo.png", alt="")
    nav.l-header_nav
      ul.l-header_list
        li.l-header_item 
          a.l-header_link(href="#features") Что это?
        li.l-header_item 
          a.l-header_link(href="#howitworks") Как работает?
        li.l-header_item 
          a.l-header_link(href="#fabric") Материалы
        li.l-header_item 
          a.l-header_link(href="#") Магазин
        li.l-header_item 
          a.l-header_link(href="#cart" rel="modal:open") Корзина
    .l-header_hero
      h1.l-header_title Маленький кошелек с большим потенциалом
      hr
      h2.l-header_subtitle Минимализм. Вместительность. Удобство.
      .l-header_btnWrap
        a.l-header_btn(href="#calc" rel="modal:open") Хочу такой

/source/jade/includes/header.jade

# Jade(Pug)

Использование шаблонизатора Jade(ныне Pug) позволило разделить части сайта на отдельные модули.

//- index.jade
doctype
include includes/head.jade
body
  include includes/header.jade
  include includes/features.jade
  include includes/howitworks.jade
  include includes/allwayswithyou.jade
  include includes/compact.jade
  include includes/snap.jade
  include includes/fit.jade
  include includes/compare.jade
  include includes/main.jade
  include includes/footer.jade
  include includes/cart.jade
  include includes/calc.jade
  include includes/shipping.jade

/source/jade/index.jade

# Sass

Так же как Pug для разметки, использование CSS-препроцессора Sass позволило разбить стили на модули в соответствии с требованиями методологии SMACSS, а так же упростить их написание.

# SMACSS/BEM

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

// Base styles
@import "base/normalize";
@import "base/fonts";
@import 'base/config';
@import "base/mixins";
@import "base/presets";

// Layout styles
@import "layout/header";
@import "layout/features";
@import "layout/howitworks";
@import "layout/allwayswithyou";
@import "layout/compact";
@import "layout/snap";
@import "layout/fit";
@import "layout/compare";
@import "layout/main";
@import "layout/footer";
@import "layout/cart";
@import "layout/calc";
@import "layout/shipping";

// Module styles
@import "module/button";

/source/sass/style.scss

BEM применяется уже для конкретных блоков.

// _header.scss
.l-header {
  ...

  &_logo {
  	...
  }

  &_nav {
  	...
  }

  &_list {
  	...
  }

  &_item {
  	...
  }

...

/source/sass/layout/_header.scss

# Gulp

Для автоматизации работы над проектом и сборки использован таск-менеджер Gulp.

# PostCSS

Я использовал плагины PostCSS:

  • Autoprefixer - для расстановки префиксов, чтобы обеспечить поддержку старых браузеров
  • Font magician - для удобного импорта шрифтов
  • Px to rem

# Минификация CSS

Все стили в билде минифицированы с помощью библиотеки cssnano.

# BrowserSync

Инструмент, помогающий тестировать кроссбраузерность страницы в реальном времени на нескольких устройствах и браузерах.

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

Doob (opens new window)