GitHub - karamansky/code-examples

Примеры кода БЭМ

1. Выбор языков

<div class="box-lang">
  <ul class="list-lang">
    <li class="list-lang__item active">
      <a class="list-lang__link" href="#">Рус</a>
    </li>
    <li class="list-lang__item">
      <a class="list-lang__link" href="#">укр</a>
    </li>
  </ul>
</div>

2. Элементы форм

<div class="box-form">
  <form>
    <div class="box-field">
      <label for="" class="box-field__label"></label>
      <div class="box-field__input">
        <input type="text" class="form-control" placeholder="Имя">
      </div>
    </div>
    <div class="box-field">
      <label for="" class="box-field__label"></label>
      <div class="box-field__input">
        <select>
          <option>name_1</option>
          <option>name_2</option>
        </select>
      </div>
    </div>
  </form>
</div>

В текстовых полях параметр type может принимать следующие значения: text, password, email, number, search, tel, url

Списки с радио кнопками:

<ul class="list-radio">
  <li class="list-radio__item">
    <label class="list-radio__label">
      <input type="radio" name="name_1">
      <span class="label-text">Name_1</span>
    </label>
  </li>
  <li class="list-radio__item">
    <label class="list-radio__label">
      <input type="radio" name="name_1">
      <span class="label-text">Name_2</span>
    </label>
  </li>
</ul>

Списки с чекбоксами:

<ul class="list-check">
  <li class="list-check__item">
    <label class="list-check__label">
      <input type="checkbox" name="check_1">
      <span class="label-text">Name_1</span>
    </label>
  </li>
  <li class="list- check__item">
    <label class="list-check__label">
      <input type="radio" name="check_2">
      <span class="label-text">Name_2</span>
    </label>
 </li>
</ul>

3.Основное меню:

<nav class="main-nav">
  <ul class="main-nav-list">
    <li class="main-nav-list__item"><a href="#" class="main-nav-list__link"></a></li>
    <li class="main-nav-list__item"><a href="#" class="main-nav-list__link"></a></li>
    <li class="main-nav-list__item"><a href="#" class="main-nav-list__link"></a></li>
  </ul>
</nav>

4. Кнопки:

Кнопкам задается класс .button изменения цветов фонов, любых параметров - дописывается модификатором, к примеру .button_primary, .button_default...

.button{
  display: inline-block;
  vertical-align: top;
  padding: 16px 30px 0 30px;
  height: 52px;
  border-radius: 26px;
  position: relative;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.5px;
  color: #0f3755;
  border: 1px solid #ffc601;
  background: #ffc601;
  transition: all 0.2s linear;
  text-align: center;
}
.button:hover{
  border-color:#0f3755;
  background: #0f3755;
  color: #FFF;
}
button.button, input.button{ padding-top: 0px!important;}
.button_small{
  height:34px;
  padding: 9px 23px 0 23px;
  font-size: 14px;
  line-height: 16px;
}

5. FAQ:

<div class="box-faq">
  <a href="#" class="box-faq__link-all">Показать/Скрыть все</a>
  <ul class="list-faq">
    <li class="list-faq__item">
      <a href="#" class="list-faq__link">question?</a>
      <div class="list-faq__answer">
        <p>Ответ</p>
      </div>
    </li>
  </ul>
</div>

6. Статьи:

<div class="box-article">
  <article class="box-article__item">
    <h3><a href="#"></a></h3>
  </article>
  <article class="box-article__item">
    <h3><a href="#"></a></h3>
  </article>
</div>

7. Новости:

<div class="box-news">
  <article class="box-news__item">
    <h3><a href="#"></a></h3>
  </article>
  <article class="box-news__item">
    <h3><a href="#"></a></h3>
  </article>
</div>

8. Список продуктов:

<ul class="products-list">
  <li class="products-list__item">
    <div class="products-list__cont">
      <div class="products-list__logo">
        <a href="#"><img src="img/logo_1.png" alt=""></a>
      </div>
      <div class="description-product">
        ...
      </div>
    </div>
  </li>
</ul>

9. Хлебные крошки:

<div class="box-bread-crumbs">
  <ul class="bread-crumbs">
    <li class="bread-crambs__item">
      <a href="#" class="bread-crambs__link">Главная</a>
    </li>
    <li class="bread-crambs__item">Оплата и доставка</li>
  </ul>
</div>

10. Пагинация:

<div class="box-paging">
  <ul class="paging-list">
    <li class="paging-list__item paging-prev">
      <a href="#" class="paging-list__link">
        <span class="arrow-paging"></span>
      </a>
    </li>
    <li class="paging-list__item active">
      <a href="#" class="paging-list__link">1</a>
    </li>
    <li class="paging-list__item">
      <a href="#" class="paging-list__link">2</a>
    </li>               	                                     	
    <li class="paging-list__item paging-next">
      <a href="#" class="paging-list__link">
        <span class="arrow-paging"></span>
      </a>
    </li>
  </ul>
</div>

11. Таблицы (если верстаются без использования table):

<ul class="table-list">
  <li class="table-list__item">
    <div class="col col_1">...</div>
    <div class="col col_2">...</div>
    <div class="col col_3">...</div>
  </li>
  <li class="table-list__item">
    <div class="col col_1">...</div>
    <div class="col col_2">...</div>
    <div class="col col_3">...</div>
  </li>
</ul>

в стилях колонки прописываются либо display:table-cell (тогда li это display:table-row, а ul - display:table), либо display:inline-block. либо делаем на flex

12. Попапы:

<a href="#win_1" class="fancybox">открывается первое окно</a>
<a href="#win_2" class="fancybox">открывается второе окно</a>

Попапы в коде ставятся перед закрытием основного дива main-wrapper

<div class="popup">
  <div class="window-open" id="win_1">
    <div class="window-open-cont">
      ...
    </div>
  </div>
  <div class="window-open" id="win_2">
    <div class="window-open-cont">
      ...
    </div>
  </div>
</div>

Скрываются попапы классом .popup без использования display:none;

.popup{
  position:absolute;
  left:-9999px;top:-9999px;
  opacity:0;
}
.window-open {
  width:1345px;max-width:100%;
  background:#FFF;
  position:relative;
  box-shadow:0 0 7px 0 rgba(0,0,0,0.5);
  padding:35px;
}

13. Табы:

<div class="tab-wrap">
  <ul class="nav-tab-list tabs">
    <li class="nav-tab-list__item active">
      <a href="#tab_1" class="nav-tab-list__link">таб_1</a>
    </li>
    <li class="nav-tab-list__item">
      <a href="#tab_2" class="nav-tab-list__link">таб_2</a>
    </li>
  </ul>
  <div class="box-tab-cont">
    <div class="tab-cont" id="tab_1">...</div>
    <div class="tab-cont hide-tab" id="tab_2">...</div>
  </div>
</div>

Неактивный таб скрывается стилями без использования display:none;

.box-tab-cont{
  position: relative;
}
.hide-tab{
  position: absolute;
  left: 0;top: 0;
  height:0; width:0;
  overflow:hidden;
  z-index: -1;
  opacity: 0;
}

Скрипт для табов

$('.tabs li a').click(function() {
  $(this).parents('.tab-wrap').find('.tab-cont').addClass('hide-tab');
  $(this).parent().siblings().removeClass('active');
  var id = $(this).attr('href');
  $(id).removeClass('hide-tab');
  $(this).parent().addClass('active');
  return false;
});

Примеры кода полезных скриптов:

1. Если нужно зафиксировать какую-то плашку, панель, сайдбар - это делается без дополнительных плагинов:

if($('.fixed-block').length){
  var offset_this = $('.fixed-block').offset();
  var scr_top = $(window).scrollTop();   	
  $(window).scroll(function() {
    if (offset_this.top <= scr_top) {
      $('.fixed-block').addClass("fixed");
    } else{
      $('.fixed-block').removeClass("fixed") 	
    }
  });
  $(window).load(function() {
    if (offset_this.top <= scr_top) {
      $('.fixed-block').addClass("fixed");
    } else{
      $('.fixed-block').removeClass("fixed") 	
    }
  });
};

2. Если нужно плавно проскролить к id:

$('.js-scroll').click(function() {
  var target = $(this).attr('href');
  $('html, body').animate({
   scrollTop: $(target).offset().top
  }, 1000);
  return false;
});

3. Если нужно плавно проскролить к верху страницы:

$(".js-top").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

4. Если нужно свернуть/развернуть блок с заменой текста в кнопке:

$(".js-toggle").toggle(function() {
  $(this).parents('.help').find('.block').slideDown();
  $(this).text("Свернуть");
}, function() {
  $(this).parents('.help').find('.block').slideUp();
  $(this).text("Развернуть");
});

5. Если нужно для ретины скриптом подменять url в картинке:

if($('.js-img').length) {     
  if(window.devicePixelRatio > 1) {
    var lowresImages = $('img.js-img');
    lowresImages.each(function(i) {
      var lowres = $(this).attr('data-original');
      var highres = lowres.replace(".png", "@2x.png");
      var highresJpg = lowres.replace(".jpg", "@2x.jpg");
      $(this).attr('data-original', highres);
      $(this).attr('data-original', highresJpg);
    });
  }        
}

6. Если нужно по клику увеличивать или уменьшать число счётчике:

<span class="counter">
  <span class="counter__input">
    <input type="text" value="10">
  </span>
  <span class="counter__button">
    <span class="counter__link counter__link_next"></span>   
    <span class="counter__link counter__link_prev"></span> 
  </span>
</span>

$('.counter__link_prev').click(function() {
  var $input = $(this).parents('.box-counter').find('input');
  var count = parseInt($input.val()) - 1;
  count = count < 1 ? 1 : count;
  $input.val(count);
  $input.change();
  return false;
});
$('.counter__link_next').click(function() {
  var $input = $(this).parents('.box-counter').find('input');
  var count = parseInt($input.val()) + 1;
  count = count > ($input.attr("maxlength")) ? ($input.attr("maxlength")) : count;
  $input.val(count);
  $input.change();
  return false;
});

7. По клику вне блока закрывать его:

$(document).on('touchstart click', function(e) {
  if ($(e.target).parents().filter('.main-nav:visible').length != 1) {
    $('.main-nav').removeClass('open-nav');
  }
});

8. Инициализация Яндекс карты:

if ($('#map').length) {
  ymaps.ready(function() {
    var myMap = new ymaps.Map('map', {
    center: [55.760874, 37.718076],
    zoom: 15
  }, {
    searchControlProvider: 'yandex#search'
  }),
    myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
    hintContent: ''
  }, {
    iconLayout: 'default#image'
  });
    myMap.geoObjects.add(myPlacemark);            
    if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
      myMap.behaviors.disable('multiTouch');
      myMap.behaviors.disable('scrollZoom');
      myMap.behaviors.disable('drag');
    }
  });
};

9. Инициализация Гугл карты, стилизованная:

https://gist.github.com/MokusM/0aa4273a1dfc69aa4d004c3fb132a007

10. Еслим нужно при адаптации вырезать блок и вставить в другое место:

if (viewport_wid <= 767) {
  $('.col-country').detach().insertAfter($('.customers'));
}
if (viewport_wid > 767) {
  $('.col-country').detach().insertAfter($('.customers-map'));
}

Слова, часто используемые в CSS-классах

Изображения

image, img, picture, pic — картинка
icon — иконка
logo — логотип
userpic, avatar — юзерпик, маленькая картинка пользователя
thumbnail, thumb — миниатюра, уменьшенное изображение

Текст

title, subject, heading, headline, caption — заголовок
subtitle — подзаголовок
slogan — слоган
lead, tagline — лид-абзац в тексте
text — текстовый контент
desc — описание, вариант текстового контента
excerpt — отрывок текста, обычно используется перед ссылкой «Читать далее...»
link — ссылка
copyright, copy — копирайт

Списки

list, items — список
item — элемент списка

Блоки

page — корневой элемент страницы
header — шапка (страницы или элемента)
footer — подвал (страницы или элемента)
section — раздел контента (один из нескольких)
body — основная часть (страницы или элемента)
content — содержимое элемента
sidebar — боковая колонка (страницы или элемента)
aside — блок с дополнительной информацией
widget — виджет, например, в боковой колонке

Раскладка

wrapper, wrap — обёртка, обычно внешняя
inner — внутренняя обёртка
container, holder, box — контейнер
grid — раскладка (страницы или элемента) в виде сетки (обычно содержит в себе row и col)
row — контейнер в виде строки
col, column — контейнер в виде столбца

Элементы управления

button, btn — кнопка, например, для отправки формы
control — элемент управления, например, стрелки «Вперёд/назад» в фотогалерее, кнопки управления слайдером
dropdown — выпадающий список

Медиавыражения

phone, mobile — мобильные устройства
phablet — телефоны с большим экраном (6-7")
tablet — планшеты
notebook, laptop — ноутбуки
desktop — настольные компьютеры

Размеры

tiny — маленький, крохотный
small — небольшой
medium — средний
big, large — большой
huge — огромный
narrow — узкий
wide — широкий

Разное

search — поиск
socials — блок иконок соцсетей
advertisement, adv, commercial, promo — рекламный блок (режутся Адблоком, не рекомендуется использовать такие классы для блоков с внутренней рекламой)
features, benefits — список основных особенностей товара, услуги
slider, carousel — слайдер, интерактивный элемент с прокруткой содержимого
pagination — постраничная навигация
user, author — пользователь, автор записи или комментария
meta — блок с дополнительной информацией, например, блок тегов и даты в посте
cart, basket — корзина
breadcrumbs — навигационная цепочка, «хлебные крошки»
more, all — ссылка на полную информацию
modal — модальное (диалоговое) окно
popup — всплывающее окно
tooltip, tip — всплывающее подсказки
preview — анонс, отрывок, например новости или поста, может состоять из заголовка, описания и картинки. Предполагается ссылка на полную версию

Состояния

active, current — активный элемент, например, текущий пункт меню
hidden — скрытый элемент
error — статус ошибки
warning — статус предупреждения
success — статус успешного выполнения задачи
pending — состояние ожидания, например, перед сменой статуса на error или success

Name		Name	Last commit message	Last commit date
Latest commit History 21 Commits
README.md		README.md

Folders and files

Latest commit

History

Repository files navigation

Примеры кода БЭМ

1. Выбор языков

2. Элементы форм

Списки с радио кнопками:

Списки с чекбоксами:

3.Основное меню:

4. Кнопки:

5. FAQ:

6. Статьи:

7. Новости:

8. Список продуктов:

9. Хлебные крошки:

10. Пагинация:

11. Таблицы (если верстаются без использования table):

12. Попапы:

13. Табы:

Примеры кода полезных скриптов:

1. Если нужно зафиксировать какую-то плашку, панель, сайдбар - это делается без дополнительных плагинов:

2. Если нужно плавно проскролить к id:

3. Если нужно плавно проскролить к верху страницы:

4. Если нужно свернуть/развернуть блок с заменой текста в кнопке:

5. Если нужно для ретины скриптом подменять url в картинке:

6. Если нужно по клику увеличивать или уменьшать число счётчике:

7. По клику вне блока закрывать его:

8. Инициализация Яндекс карты:

9. Инициализация Гугл карты, стилизованная:

10. Еслим нужно при адаптации вырезать блок и вставить в другое место:

Слова, часто используемые в CSS-классах

Изображения

Текст

Списки

Блоки

Раскладка

Элементы управления

Медиавыражения

Размеры

Разное

Состояния

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Packages