Вообщем ничего умного не придумал, как писать семантику прямо в редакторе. Время это занимает много, но зато просто и на 1/3 готова верстка. Когда описываешь макет - видно какие классы повторяются и просто копируешь их, добавляя модификаторы под конкретное место. Возможно 15 макетов я опять не осилю, но зато буду писать скурпулезно и по БЭМ. В коде пока не прописываю 12 колоночную сетку Итого:

Макет №1

Семантика макета:

    <!-- Шапка сайта-->
              <header class="site-header">
                <div class="container">
                  <h1 class="site-header__title"></h1>
                </div>
              </header>
              <section>
                <div class="container">
                  <!-- Основной контент - статьи-->
                  <main class="main__content">
                    <div class="row"></div>
                    <!-- Структура статьи-->
                    <article class="postlist">
                      <div class="postlist__img"><img src=".jpg"></div>
                      <header class="postlist__header">
                        <h2 class="postlist__title">Demo Title</h2>
                        <ul class="postlist__tags">
                          <li class="postlist__date">Date</li>
                          <li class="postlist__author">Admin</li>
                          <li class="postlist__cat">Category</li>
                          <li class="postlist__tag">Tags</li>
                        </ul>
                      </header>
                      <p class="postitle__description">Demo description</p>
                    </article>
                    <!--...../-->
                    <!--.. Пагинация сайта-->
                    <ul class="pagination">
                      <li class="pagination__item"><a class="pagination__link" href="">1</a></li>
                      <li class="pagination__item"><a class="pagination__link" href="">2</a></li>
                      <li class="pagination__item"><a class="pagination__link" href="">3</a></li>
                      <li class="pagination__item"><a class="pagination__link" href="">4</a></li>
                    </ul>
                  </main>
                  <!--.. правый сайдбар-->
                  <aside>
                    <div class="row">
                      <!--.. Поиск-->
                      <div class="search_aside">
                        <form class="search__form" action="">
                          <input class="search__input" type="search">
                          <input class="search__input" type="submit">
                        </form>
                      </div>
                    </div>
                    <div class="row">
                      <!--.. Табы-->
                      <div class="tabs_aside">
                        <div class="tabs__nav">
                          <button class="tabs__link">Category</button>
                          <button class="tabs__link">Comments</button>
                        </div>
                        <div class="tabs__content" id="Category">
                          <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                          </ul>
                        </div>
                        <div class="tabs__content" id="Comments">
                          <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                          </ul>
                        </div>
                      </div>
                      <div class="tabs_aside">
                        <div class="tabs__nav">
                          <button class="tabs__link">Recent</button>
                          <button class="tabs__link">Popular</button>
                          <button class="tabs__link">Archive</button>
                        </div>
                        <div class="tabs__content" id="Recent">
                          <div class="content__img"><img src></div>
                          <div class="content__title">demo title</div>
                          <div class="content__comments">6comments</div>
                        </div>
                        <!--..etc-->
                      </div>
                      <!--Календарь-->
                      <div class="calendar_aside">
                        <div class="calendar__month">
                          <ul>
                            <li class="prev">&#10094;</li>
                            <li>August br span 2017</li>
                            <li class="next">&#10095;</li>
                          </ul>
                          <ul class="calendar__weekdays">
                            <li>Mo</li>
                            <li>Tu</li>
                            <li>We</li>
                            <!--..etc-->
                          </ul>
                          <ul class="calendar__days">
                            <li>1</li>
                            <li>2</li>
                            <li>3</li>
                            <li class="calendar__days_active">4</li>
                            <!--...etc-->
                          </ul>
                        </div>
                      </div>
                      <!-- Список тегов-->
                      <div class="tags_aside">
                        <ul class="tags__list">
                          <li class="tags__link">Wordpress</li>
                          <li class="tags__link">Plugins</li>
                          <li class="tags__link">SEO</li>
                          <!--.. etc-->
                        </ul>
                      </div>
                    </div>
                  </aside>
                </div>
              </section>
              <!--Подвал сайта-->
              <footer class="site-footer">
                <div class="container">
                  <div class="row">
                    <div class="col">
                      <!--Навигация-->
                      <nav class="navbar">
                        <ul class="navbar__list">
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                        </ul>
                      </nav>
                      <!--поиск-->
                      <div class="search-footer">
                        <form class="search__form" action="">
                          <input class="search__input" type="search">
                          <input class="search__input" type="submit"><span class="search__descroption">Описание под полем</span>
                        </form>
                      </div>
                    </div>
                    <div class="col">
                      <h2 class="site-footer__title">Salem</h2>
                      <p class="site-footer__description"></p>
                      <ul class="social__list">
                        <li class="social__item"><a class="social__link">item</a></li>
                        <li class="social__item"><a class="social__link">item</a></li>
                        <li class="social__item"><a class="social__link">item</a></li>
                      </ul>
                    </div>
                  </div>
                  <div class="row">
                    <!--Копирайт-->
                    <p class="copyright"></p>
                  </div>
                </div>
              </footer>
          

Основные параметры:

Ширина основного контейнера 1200px.

Основные используемые цвета:

Используемые шрифты: OpenSans


Макет №2

Семантика макета:

              <header class="site-header">
                <div class="container">
                  <div class="row">
                    <div class="col">
                      <!--Логотип-->
                      <div class="site-logo"><img class="site-logo__img"></div>
                    </div>
                    <div class="col">
                      <!--Навигация-->
                      <nav class="navbar">
                        <ul class="navbar__list">
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                          <li class="navbar__item"><a class="navbar__link">item</a></li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col">
                      <h1 class="site-header__title">Demo text</h1>
                      <p class="site-header__description">demo text</p>
                    </div>
                    <!--Форма выбивающаяся из потока DOM модели-->
                    <div class="site-header__form">
                      <form class="form" action="">
                        <input class="form__input" type="text">
                        <input class="form__input" type="mail">
                        <input class="form__input" type="number">
                        <input class="form__input" type="text">
                        <input class="form__input" type="checkbox">
                        <input class="form__input" type="submit">
                      </form>
                    </div>
                  </div>
                </div>
              </header>
              <section class="service">
                <div class="container">
                  <div class="row">
                    <h1 class="service_title"><span>Our</span>Service</h1>
                  </div>
                  <div class="row">
                    <div class="service__list"><a class="service__link" href=""><img class="servise__item_one">
                        <p class="servise__description"></p></a><a class="service__link" href=""><img class="servise__item_two">
                        <p class="servise__description"></p></a><a class="service__link" href=""><img class="servise__item_three">
                        <p class="servise__description"></p></a><a class="service__link" href=""><img class="servise__item_four">
                        <p class="servise__description"></p></a></div>
                  </div>
                </div>
              </section>
              <section class="our-story">
                <div class="row">
                  <div class="col">
                    <p class="our-story__text"></p>
                  </div>
                  <div class="col">
                    <button class="blue"></button>
                  </div>
                </div>
              </section>
              <section class="pricing">
                <div class="row">
                  <h2 class="pricing_title"></h2>
                </div>
                <div class="row">
                  <!--Карточки с ценой-->
                  <div class="pricing__card"><span class="card__name"></span><span class="card__price"></span><span class="card__descriprion"></span>
                    <button class="card_button"></button>
                  </div>
                  <!--..etc-->
                </div>
              </section>
              <section>
                <div class="container">
                  <div class="row">
                    <div class="col">
                      <h2 class="section_title">Testimotiona</h2>
                      <!--комментарии-->
                      <div class="comments">
                        <p class="comments__descriptions"></p><img class="comments__photo"><span class="comments__author"></span>
                        <!--..etc-->
                      </div>
                    </div>
                    <div class="col">
                      <h2 class="section_title">Gallery</h2>
                      <!--Фото галлерея-->
                      <div class="photo-gallery">
                        <div class="photo-gallery__list"><img class="photo-gallery__item"><img class="photo-gallery__item"><img class="photo-gallery__item"><img class="photo-gallery__item"></div><a class="photo-gallery__link">View more picture</a>
                        <!--etc-->
                      </div>
                    </div>
                  </div>
                </div>
              </section>
              <footer class="site-footer">
                <div class="container">
                  <div class="row">
                    <div class="col">
                      <!--Копирайт-->
                      <p class="copyright"></p>
                    </div>
                    <div class="col">
                      <!--Логотип-->
                      <div class="site-logo_site-footer"><img class="site-logo__img"></div>
                    </div>
                  </div>
                </div>
              </footer>
        

Основные параметры:

Ширина основного контейнера 1200px.

Основные используемые цвета:

Используемые шрифты: OpenSans


Макет №3

Семантика макета:

              <header class="site-header">
                <div class="site-header__info">
                  <h1 class="site-header__title">Demo Title</h1>
                  <p class="site-header__description">Text Text</p>
                  <button class="site-header__button">Read More</button>
                  <button class="site-header__button">Contact Us</button>
                </div><img class="site-header__img">
              </header>
              <section>
                <div class="row">
                  <h2 class="section__title">About Us</h2>
                  <p>Text Text</p>
                </div>
                <div class="row">
                  <div class="card__list"><a class="card__link" href="">
                      <div class="card__img_one"></div>
                      <p class="card__description"></p></a><a class="card__link" href="">
                      <div class="card__img_two"></div>
                      <p class="card__description"></p></a><a class="card__link" href="">
                      <div class="scard__img_three"></div>
                      <p class="card__description"></p></a><a class="card__link" href="">
                      <div class="card__img_four"></div>
                      <p class="card__description"></p></a></div>
                </div>
              </section>
        


Макет №4

Семантика

<ul class="navigation">
                <li class="nav-item"><a href="">Link Menu</a></li>
                <li class="nav-item"><a href="">Link Menu</a></li>
                <li class="nav-item"><a href="">Link Menu</a></li>
                <li class="nav-item"><a href="">Link Menu</a></li>
              </ul>
              <input class="nav-trigger" type="checkbox" id="nav-trigger">
              <label for="nav-trigger"></label>
              <div class="site-wrap">
                <!-- Шапка сайта-->
                <header class="site-header">
                  <div class="jumbotron">
                    <div class="row">
                      <h1 class="site-header__title">Creative Time</h1>
                      <p class="site-header__description">Text Text</p>
                    </div>
                    <div class="row">
                      <button class="site-header__button_circle">Play</button>
                    </div>
                    <div class="row">
                      <button class="site-header__button">Read More</button>
                      <button class="site-header__button">Contact Us</button>
                    </div>
                  </div>
                </header>
                <section>
                  <div class="row">
                    <div class="card__list"><a class="card__link" href="">
                        <div class="card__img_one"></div>
                        <p class="card__description"></p></a><a class="card__link" href="">
                        <div class="card__img_two"></div>
                        <p class="card__description"></p></a><a class="card__link" href="">
                        <div class="scard__img_three"></div>
                        <p class="card__description"></p></a><a class="card__link" href="">
                        <div class="card__img_four"></div>
                        <p class="card__description"></p></a></div>
                  </div>
                </section>
                <section class="slider">
                  <h2 class="slider__title"></h2>
                  <div class="slider__content">
                      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
          <!-- Indicators -->
          <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          </ol>
        
          <!-- Wrapper for slides -->
          <div class="carousel-inner" role="listbox">
            <div class="item active">
              <img src="..." alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            <div class="item">
              <img src="..." alt="...">
              <div class="carousel-caption">
                ...
              </div>
            </div>
            ...
          </div>
        
          <!-- Controls -->
          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
                  </div>
                </section>
              </div>
        


Макет №5


Макет №6


Макет №7


Макет №8


Макет №9


Макет №10

Макет №11


Макет №12


Макет №13


Макет №14


Макет №15