БЭМ

Stay D.R.Y
Don’t repeat yourself

  • Запись по БЭМ
  • CSS стили для элемента, идут в алфавитном порядке

Header & Nav - 1

BEM Header & Nav - 1
<!-- begin Header
  =========================================================================== -->
  <header class="header clearfix">
    <!-- begin Header Container -->
    <div class="container header__container clearfix">
      <div class="header__logo">
        <a href="#" class="header__logo-link">
          <img src="http://via.placeholder.com/200x50/4F84DB/FFFFFF?text=LOGO" alt="" class="header__logo-image"> </a>
      </div>
      <div class="header__nav">
        <!-- begin Navigation -->
        <nav class="nav">
          <ul class="nav__items clearfix">
            <li class="nav__item">
              <a class="nav__item-link" href="#">Проекты</a>
            </li>
            <li class="nav__item">
              <a class="nav__item-link" href="#">Новости</a>
            </li>
            <li class="nav__item">
              <a class="nav__item-link" href="#">Контакты</a>
            </li>
            <li class="nav__item">
              <a class="nav__item-link" href="#">О компании</a>
            </li>
          </ul>
        </nav>
        <!-- end Navigation -->
      </div>
      <!-- begin Nav Mobile Toggle -->
      <button type="button" class="nav-mobile-toggle">
        <span class="nav-mobile-toggle__icon-bar"></span>
        <span class="nav-mobile-toggle__icon-bar"></span>
        <span class="nav-mobile-toggle__icon-bar"></span>
      </button>
      <!-- end Nav Mobile Toggle -->
    </div>
    <!-- end Header Container -->
  </header>
  <!-- end Header
  =========================================================================== -->
/* -------------------------------------------------------------------------
   begin Header
 * ------------------------------------------------------------------------- */

.header {
  background-color: #fff;
  position: relative;
  padding: 10px 0;
  .header__logo {
    position: relative;
    float: left;
  }
  .header__nav {
    position: relative;
    float: right;
  }
  .header__logo-link {
    display: block;
  }
  .header__logo-image {
    display: block;
  }
}

/* -------------------------------------------------------------------------
   end Header
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   begin Navigation
 * ------------------------------------------------------------------------- */

.nav {
  position: relative;
  .nav__item {
    float: left;
    margin-right: 65px;
    &:last-child {
      margin-right: 0;
    }
  }
  .nav__item-link {
    display: block;
    font-size: 1rem;
    padding: 13px 0;
    text-align: center;
  }
}

/* -------------------------------------------------------------------------
   end Navigation
 * ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   begin Nav Mobile Toggle
 * ------------------------------------------------------------------------- */

.nav-mobile-toggle {
  border: none;
  background-color: transparent;
  display: none;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  .nav-mobile-toggle__icon-bar {
    background-color: #4F84DB;
    display: block;
    height: 2px;
    margin: 6px 0;
    width: 25px;
  }
}

/* -------------------------------------------------------------------------
   end Nav Mobile Toggle
 * ------------------------------------------------------------------------- */

/* begin Media Max-Width 767
============================================================================ */

@media screen and (max-width:767px) {
  /* -------------------------------------------------------------------------
   begin Navigation
 * ------------------------------------------------------------------------- */
  .nav {
    display: none;
  }
  /* -------------------------------------------------------------------------
   end Navigation
 * ------------------------------------------------------------------------- */
  /* -------------------------------------------------------------------------
   begin Nav Mobile Toggle
 * ------------------------------------------------------------------------- */
  .nav-mobile-toggle {
    display: block;
  }
  /* -------------------------------------------------------------------------
   end Nav Mobile Toggle
 * ------------------------------------------------------------------------- */
}

/* end Media Max-Width 767
============================================================================ */

Image-Top Box - 1

BEM Image-Top Box - 1
<!-- begin Image-Top Box -->
        <div class="image-top-box">
          <div class="image-top-box__picture">
            <a href="#" class="image-top-box__picture-link">
              <img src="http://via.placeholder.com/700x500/4F84DB/FFFFFF" alt="" class="image-top-box__image"> </a>
          </div>
          <div class="image-top-box__info">
            <div class="image-top-box__header">
              <h3 class="image-top-box__header-title">
                <a href="#" class="image-top-box__header-title-link">Awesome header here. Knock Knock. Is anyone here?</a>
              </h3>
            </div>
            <div class="image-top-box__descr">
              <p class="image-top-box__descr-p">Awesome description here. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore sapiente corrupti amet facere dolore, ea adipisci et. Ad officiis modi expedita similique, ullam architecto reiciendis. Consectetur, recusandae nesciunt vitae laudantium!</p>
            </div>
            <div class="image-top-box__buttons">
              <a href="#" type="button" class="image-top-box__btn">READ MORE</a>
            </div>
          </div>
        </div>
        <!-- end Image-Top Box -->
/* -------------------------------------------------------------------------
   begin Image-Top Box
 * ------------------------------------------------------------------------- */

.image-top-box {
  background-color: #fff;
  .image-top-box__picture {}
  .image-top-box__picture-link {
    display: block;
  }
  .image-top-box__image {
    display: block;
    height: auto;
    width: 100%;
  }
  .image-top-box__info {
    padding: 30px 0 70px;
    position: relative;
  }
  .image-top-box__header {
    margin-bottom: 15px;
    padding: 0 30px;
  }
  .image-top-box__header-title {}
  .image-top-box__header-title-link {
    display: block;
  }
  .image-top-box__descr {
    min-height: 200px;
    padding: 0 30px;
  }
  .image-top-box__buttons {
    bottom: 30px;
    left: 30px;
    position: absolute;
  }
  .image-top-box__btn {}
}

/* -------------------------------------------------------------------------
   end Image-Top Box
 * ------------------------------------------------------------------------- */

/* begin Media Max-Width 767
============================================================================ */

@media screen and (max-width:767px) {
  /* -------------------------------------------------------------------------
   begin Image-Top Box
 * ------------------------------------------------------------------------- */
  .image-top-box {
    .image-top-box__descr {
      min-height: 0;
    }
  }
  /* -------------------------------------------------------------------------
   end Image-Top Box
 * ------------------------------------------------------------------------- */
}

/* end Media Max-Width 767
============================================================================ */

Header & Nav - 1

Используются иконки от fontello.

BEM Social-Block- 1
<!-- begin Social Block -->
  <div class="social-block">
    <ul class="social-block__items clearfix">
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_vkontakte fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_odnoklassniki fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_facebook fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_twitter fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_instagram fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_google-plus fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_linkedin fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_youtube fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_tumblr fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_skype fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_yandex fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_vimeo fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_pinterest fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_behance fontello"></span>
        </a>
      </li>
      <li class="social-block__item">
        <a class="social-block__item-link" href="#">
          <span class="social-block__item-icon social-block__item-icon_github fontello"></span>
        </a>
      </li>
    </ul>
  </div>
  <!-- end Social Block -->
/* -------------------------------------------------------------------------
   begin Social Block
 * ------------------------------------------------------------------------- */

.social-block {
  .social-block__item {
    float: left;
  }
  .social-block__item-link {
    display: block;
  }
  .social-block__item-icon {
    display: block;
    &:before {
      color: #1C79C0;
      font-size: 20px;
      transition: color .3s;
    }
    &:hover {
      &:before {
        color: #5692bf;
      }
    }
    &.social-block__item-icon_vkontakte {
      &:before {
        content: '\f189';
      }
    }
    &.social-block__item-icon_odnoklassniki {
      &:before {
        content: '\f263';
      }
    }
    &.social-block__item-icon_facebook {
      &:before {
        content: '\f30c';
      }
    }
    &.social-block__item-icon_twitter {
      &:before {
        content: '\f309';
      }
    }
    &.social-block__item-icon_instagram {
      &:before {
        content: '\f32d';
      }
    }
    &.social-block__item-icon_google-plus {
      &:before {
        content: '\f30f';
      }
    }
    &.social-block__item-icon_linkedin {
      &:before {
        content: '\f318';
      }
    }
    &.social-block__item-icon_youtube {
      &:before {
        content: '\f167';
      }
    }
    &.social-block__item-icon_tumblr {
      &:before {
        content: '\f315';
      }
    }
    &.social-block__item-icon_skype {
      &:before {
        content: '\f339';
      }
    }
    &.social-block__item-icon_yandex {
      &:before {
        content: '\f305';
      }
    }
    &.social-block__item-icon_vimeo {
      &:before {
        content: '\f306';
      }
    }
    &.social-block__item-icon_pinterest {
      &:before {
        content: '\f312';
      }
    }
    &.social-block__item-icon_behance {
      &:before {
        content: '\f34e';
      }
    }
    &.social-block__item-icon_github {
      &:before {
        content: '\f300';
      }
    }
  }
}

/* -------------------------------------------------------------------------
   end Social Block
 * ------------------------------------------------------------------------- */