Apr 24 2015 at 18:16

Заготовка для верстки (StartProject)

Invite pending

Хочу поделится заготовкой для верстки, которую создал для себя. Предполагается верстка по БЕМ методологии используя препроцессор less. В заготовку входит: grunt, bower, базовый html с примером БЕМ блока.

Цель использования заготовки (StartProject):

компиляция less в css;
минификация css, js;
создание красивого dev кода html, css, js;
контатенация js, css;
сжатие картинок;
удобное подключение библиотек;
наличие базового reset css;
быстрое и простое внедрение нужных библиотек (в StartProject подключена только jquery).

С клонировать заготовку можно с моего Git аккаунта https://github.com/sun-ks/StartProject.

Заготовку (StartProject) поместите на локальный сервер. Я использовал Denver. Ниже поймете, для чего.

Склонируйте заготовку (StartProject)
git clone https://github.com/sun-ks/StartProject.git
Для работы с grunt и bower вам понадобится node.js.

Установите grun и bower
Для этого перейдите в папку с заготовкой проекта и выполните — npm install
Затем установим установим зависимости bower командой — bower install

Все готово!

Теперь заходим в папку html/index.html. И наблюдаем следующий базовый код:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>StartProject</title>
  <link rel="stylesheet" href="../dist/style.min.css" />
  <script src="../bower_components/jquery/dist/jquery.min.js"></script>
  <script src="../dist/main.min.js"></script>
</head>

<body>
  <header>
    header
  </header>
  <nav>
    navigation
  </nav>
  <section>
    <article class="myblock">
      <!--Пример БЭМ блока -->
      <p class="myblock__title">My block title.
        <div class="myblock__title_state_active">active</div>
        <div class="test">test0</div>
      </p>
    </article>
    <article >
      <header>
        Article header
      </header>
      Article
    </article>
  </section>
  <aside>
    sidebar content
  </aside>
  <footer>
    copyright
  </footer>
</body>

</html>

Стоит обратить внимание на пример БЭМ блока:

<article class="myblock">
      <!--Пример БЭМ блока -->
      <p class="myblock__title">My block title.
        <div class="myblock__title_state_active">active</div>
        <div class="test">test0</div>
      </p>
    </article>

Я рекомендую писать верстку в соответствии с БЭМ. Его less реализацию можно увидеть в assets/css/main.less:

.myblock {
  /* пример блока */
  border: 1px solid #000;
  color: orange;
  &_size_s {
    /* пример модификатора блока */
    
    color: green;
  }
  &__title {
    /* пример элемента */
    
    font-size: 20px;
    &_state_active {
      /* пример модификатора елемента */
      
      background: green;
      color: white;
    }
  }
}

.test {
  /* пример блока */
  
  background: red;
  color: #fff;
}

В reset.less лежат базовый reset style и самые базовые блоки, такие как:

clearfix, show, hide…

/*--- CSS Reset ---*/

header,
nav,
section,
article,
aside,
footer {
  display: block
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: " ";
}

.clearfix:after {
  clear: both;
}

.hide {
  display: none;
}

.show {
  display: block;
}

.text-left {
  text-align: left;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

Запускаем команду — grunt.
При ее запуске выполняется:
Приведение в порядок табуляции в html, less, css файлах (попробуйте нарушить табуляцию перед запуском grunt). Папки — /assets, /html.
Минификация, контентенация js, css. Из папки /assets в /dist.
Компиляция less в css.

Сжатие картинок происходит командой — grunt imagemin Картинки берутся с папки assets/img после сжатия помещаются в dist/img.

Bower собирает нужные нам библиотеки. В нашем случае это библиотека — jqvery.

Рекомендую ознакомится:
Что такое БЭМ?
Grunt для тех, кто считает штуки вроде него странными и сложными

Tags:

бэм css html grunt bower

Hubs: