Our BEM-based html/css/js library
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
b-accordion
b-blog
b-breadCrumbs
b-btn
b-controls
b-customControl
b-developerCopyright
b-event
b-faq
b-findFormInputbtn
b-flyingBlocks
b-foldedCorner
b-footerLogo
b-form
b-form__result
b-googleMap
b-hoverHint
b-langFlags
b-listIllustration
b-maintenance
b-map/-type_yandex/-type_iframe/-type_doubleclick
b-marquee
b-menuScrollTo
b-moreButton
b-news
b-popup
b-questions
b-quote
b-scheduleFormBtnGroup
b-scrollSidebar
b-siteCopyright
b-siteSearch
b-slider
b-socialButtons
b-socialShareMenu
b-table-AFL
block-arrows
fancyboxHash
humans.txt
input-extended
j-datepicker
j-floatingBlock
j-inputNumbStep
j-outDate
j-radioCheckboxCustom
j-selectCustom
j-simpleJQueryPager
j-zoomProduct
jq-validate
js-Navigation
js-audioPlayer
js-block-centering
js-customScrollbar
js-fancybox
js-fullpage/dev
js-googleMap
js-initCustomAlert
js-intJwplayer
js-jstree
js-mapGoogle_markers
js-pdfjs
js-preloader
js-scrollTo
js-scrollToNextBlock
js-socialSharePreload
js-timepicker
js-ui-autocompleteSelectChar
js-ui-tooltip
l-pagination
l-siteAccess
l-siteFooter__contact
l-siteNavigation
l-siteNavigationBottom
microdataOrganization
microdataPlace
php-301redirect
php-geo
scrollToHash
table
.editorconfig
README.md

README.md

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

  1. b-btn

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

  1. b-controls

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

  1. b-event

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

  1. b-faq

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

  1. b-findFormInputbtn

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

  1. b-form__result

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

  1. b-googleMap

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

  1. b-hoverHint

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

  1. b-langFlags

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

Flags sprite.

  1. b-menuScrollTo

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

  1. b-moreButton

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

  1. b-blog

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

  1. b-popup

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

  1. b-questions

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

  1. b-scheduleFormBtnGroup

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

  1. b-scrollSidebar

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

  1. b-siteSearch

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

  1. b-slider

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

  1. b-socialButtons

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

  1. b-table-AFL

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

  1. fancyboxHash

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

  1. input-extended

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

  1. j-datepicker

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

  1. j-floatingBlock

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

  1. j-inputNumbStep

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

  1. j-outDate

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

  1. j-radioCheckboxCustom

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

  1. j-selectCustom

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

  1. j-simpleJQueryPager

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

  1. j-zoomProduct

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

  1. jq-validate

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

  1. microdataOrganization

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

  1. microdataPlace

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

  1. scrollToHash

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

  1. table

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

  1. l-siteAccess

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

  1. l-siteNavigation

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

  1. l-siteNavigationBottom

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

  1. l-siteFooter__contact

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

  1. b-developerCopyright

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

  1. b-siteCopyright

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

  1. js-preloader

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

  1. 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 Блоки с загнутыми уголками

b-customControl Custom checkboxes and radiobuttons WITHOUT JS with BEM-syntax.