oliverastro / bem-snippets

Our BEM-based html/css/js library

bem-snippets

Our BEM-based html/css/js library

##List of bem-snippets

1. b-accordion

Независимый аккордион блок, реализует отображение/скрытие блока <div class="b-accordion__content"> по клику на <h3 class="b-accordion__header">. Для реализации данного аккордиона подключаем библиотеку jquery-ui.custom.min.js

2. b-btn

Реализация кнопки для сайта по умолчанию class="b-btn", и реализация кнопки с модификатором class="b-btn -ico_play".

3. b-controls

Реализация расположения элементов формы и их групировка.

4. b-event

Пример использования разметки microdata форматов (microdataOrganization, microdataEvent)

5. b-faq

Html-разметка для независимого блока FAQ, реализована списком dl, dt, dd

6. b-findFormInputbtn

Html-разметка для поля поиска по сайту, с использованием иконки поиска

7. b-form__result

Html-разметка для блока получения результата в результате какого-нибудь запроса, с использованием картинки подгрузки .

8. b-googleMap

HTML-разметка для google карты с использованием блока <div id="map-canvas"></div> и подключением необходимой библиотеки для отображения карты. А также инициализация карты(в файле main.js) по заданным координатам.

9. b-hoverHint

HTML-разметка для независимого блока с подсказкой при наведении, используются также необходимое стилевое оформление.

10. b-langFlags

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

.

11. b-menuScrollTo

Блок навигации для одностраничного сайта. Используется фиксированое меню прижатое к верху страницы, при переходе к нужному разделу на странице подсвечивается соответствующий пункт меню.

12. b-moreButton

Реализован js код для ссылки <a class="j-eventNewsMore" href="">Подробнее</a>. При клике на ссылку "Подробнее", необходимый блок розворачивается на всю свою высоту.

13. b-blog

Лента блога с Microdata + Microformats-1 + Microformats-2

14. b-popup

HTML-разметка для попапа с затемнением заднего фона.

15. b-questions

HTML-разметка для блока вопросов.

16. b-scheduleFormBtnGroup

HTML-разметка и стилевое оформление для блока рассписания авиарейсов: Туда и обратно , В одну сторону

17. b-scrollSidebar

Реализация прокрутки страницы к заданому хешу.

18. b-siteSearch

HTML-разметка независимого блока-формы "Поиск по сайту" <div class="l-siteSearch">.

19. b-slider

HTML-разметка независимого блока-слайдера, с использованием js плагинов cycle2 и иницыализации слайдера в файле main.js

20. b-socialButtons

HTML-разметка независимого блока социального шаринга с отображением блока подсчета, используя плагин share42.js

21. b-table-AFL

HTML-разметка таблицы бронирования авиабилетов и стилевое оформление данной таблицы.

22. fancyboxHash

Пример использования fancyboxHash, с использованием плагина historyhelperFancybox.js и инициализация history fancybox в файле main.js

23. input-extended

В данном примере можно выбрать направление откуда/куда. При клике на иконку самолета подгружается попап с направлениями из которого можно выбрать город, или же при написании названия города автоматически подгружается попап со списком городов.

24. j-datepicker

HTML-разметка для блока datepicker, используя библиотеку jquery-ui.custom.min.js и инициализацию datapicker $('.j-datepicker').datepicker();

25. j-floatingBlock

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

26. j-inputNumbStep

Кроссбраузерная реализация <input class="b-number" type="number" min="0" max="20" step="1" /> с использованием для инпута стрелочек при клике на которые число внутри инпута увеличивается или уменьшается. Здесь применяется плагин jquery.fs.stepper.js и инициализируем таким образом $("input[type='number']").stepper();.

27. j-outDate

js-код делает не активными даты в datepicker. Даты берутся из массива, можно удалять даты которые из массива, а можно оставлять даты только из массива в календаре.

28. j-radioCheckboxCustom

Пример простой кастомизации чекбоксов и радиобатонов, реализованый в файле j-radioCheckboxCustom.js.

29. j-selectCustom

Пример простой кастомизации <select name="">...</select>, реализованый в файле js-selectCustom.js.

30. j-simpleJQueryPager

js-код создает постраничную пагинацию не перегружая страницу. Мы указываем сколько элементов должно отображатся на одной странице, в результате функция берет все количество элементов списка и создает нужное количество страниц.

31. j-zoomProduct

HTML-разметка для галереи продуктов, при клике на продукт, всплывает попап с увеличеным изображение данного продукта. Используется плагин jquery.elevatezoom.js и его инициализация в файле main.js

32. jq-validate

HTML-разметка формы и валидации элементов формы. Использется плагин jquery.validate.js и обязательно additional-methods.js, инициализация плагина валидации происходит в файле main.js, так же там дописываем дополнительные методы, или же задаем правила для появления блока с ошибкой.

33. microdataOrganization

HTML-разметка для блока с полным набором микроформатов для тега <address></address>.

34. microdataPlace

Разметка фикроформатов для google карты.

35. scrollToHash

js-код позволяющий проскролить страницу к заданому хешу, используется плагин jquery.smooth-scroll.js, инициализация данного плагина происходит в main.js

36. table

HTML-разметка таблпицы и ее стилевое оформление.

37. l-siteAccess

HTML-разметка для независимого блока логина на сайт. Также стилизация данного блока и js-реализация. При клике на кнопку попап с формой логина отображается/скрывается. Также попап логина скрывается при клике в любой точке сайта.

38. l-siteNavigation

HTML-разметка меню в шапке

39. l-siteNavigationBottom

HTML-разметка меню в подвале

40. l-siteFooter__contact

HTML-разметка contact в подвале

41. b-developerCopyright

HTML-разметка developerCopyright в подвале

42. b-siteCopyright

HTML-разметка Copyright в подвале

43. js-preloader

JS библиотека с API и калбеками для прелоада произвольных данных: картинок,видео,etc.

44. js-audioPlayer

Проигрывание звука с помощью jPlayer

b-footerLogo Логотип в подвале

b-form Дефолтная форма с валидацией

b-map Яндекс-карта в iframe с обработкой дабл-клика

php-301redirect 301 redirect

b-maintenance Страница "Сайт в разработке"

b-quote Цитата

js-scrollToNextBlock Для кнопки "далее" - прокрутка к следующему блоку

b-listIllustration Список с большими иллюстрациями

js-tree Дерево

js-pdfjs Просмотр PDF

js-fancybox Fancybox-попап

js-audioPlayer Аудио-плеер

js-preloader Предзагрузка ресурсов

js-socialSharePreload Пост-загрузка социальный кнопок

js-googleMap Карта Google через API3, со стилизацией цветов, с маркерами, кастомными балунами с текстом и фото.

b-news Отдельный пост или новость с Microdata + Microformats-1 + Microformats-2

js-fullpage Single page JS (hashchange & other funcs)

php-geo Sypex Geo — Get Country and City by IP

block-arrows Блоки со стрелочкой вниз

b-foldedCorner Блоки с загнутыми уголками