10 | News title 11 |
12 |14 | Lorem ipsum dolor sit amet. 15 |
16 | 24 |.btn {}
35 | 37 | Блок Кнопка. 38 |
39 |40 | Очень часто встречается и чуть ли не первое, что делают из стайл гайда. 41 |
42 |.checkbox {}
35 | 37 | Блок Чекбокс. 38 |
39 |40 | Кастомный чекбокс. Точно так же можно создать radio button. 41 |
42 |.form {}
35 | 37 | Блок Форма. 38 |
39 |40 | Блок формы нужен для создания сетки. Как правило у форм есть ряды, колонки, ячейки и другие вспомогательные элементы. 41 |
42 |.input {}
35 | .input-icon {}
36 | .input-btn {}
37 | 39 | Блок Поле ввода. 40 |
41 |42 | Поле ввода имеет разные модификации или может входить в состав более сложных блоков: search, date-picker, counter. 43 |
44 |.jumbotron {}
35 | 37 | Блок Джамботрон. 38 |
39 |40 | Думаю, все видели на футбольных, хоккейных матчах или на боксе здоровенный экран похожий на телевизор. Так вот это что-то такое, но на странице. 41 |
42 |.logo {}
35 | 37 | Блок Логотип. 38 |
39 |40 | Как правило, это логотип компании или продукта. Распологается в верхнем левом углу. На главной странице никуда не ведет, на дочерних ссылается на главную. 41 |
42 |.menu {}
35 | .main-menu {}
36 | .footer-menu {}
37 | 39 | Блок Меню. 40 |
41 |42 | Любое меню представляет собой просто набор однотипных ссылок, поэтому чаще всего меню делают списком. 43 |
44 |.site-header {}
35 | 37 | Блок Голова сайта. 38 |
39 |40 | В этом блоке обычно размещают: логотип, главное меню, поиск, контакты, авторизационные блоки, корзину и т.д. По сути голова является оберткой для специальной сетки верха страницы. 41 |
42 |.socials {}
35 | 37 | Блок Социалки. 38 |
39 |40 | Социалки обычно находятся на странице товара или в футере, но учитывая, что все блоки по БЭМ независимые и универсальные, то вставить можно этот блок куда угодно. 41 |
42 |.text-block {}
35 | 37 | Блок Текстовый блок. 38 |
39 |40 | Существует великое множество текстовых блоков. Вот пара примеров. 41 |
42 |.btn {}
35 | 37 | The Button. 38 |
39 |40 | You can meet this block very often. And almost the first thing you'll create from style guide. 41 |
42 |.checkbox {}
35 | 37 | The Checkbox. 38 |
39 |40 | Here is the custom checkbox. The same way you can create the custom radio button. 41 |
42 |.form {}
35 | 37 | The Form. 38 |
39 |40 | The Form block is needed to create a grid for fields. As a rule forms have such elements as rows, columns, cells and other handy elements. 41 |
42 |.input {}
35 | .input-icon {}
36 | .input-btn {}
37 | 39 | The Input. 40 |
41 |42 | The input may have different modifications or be a part of other blocks: search, date-picker, counter. 43 |
44 |.jumbotron {}
35 | 37 | The Jumbotron. 38 |
39 |40 | I think all of you could see at football, hokkey matches or a boxing ring a hefty screen that looks like TV set or something like that. So we have the same thing but on the page. 41 |
42 |.logo {}
35 | 37 | The Logo. 38 |
39 |40 | At the most cases it's a company or product logo. It's placed at the left top corner of the page. At the home page it leads nowhere, and at the child pages leads to the home. 41 |
42 |.menu {}
35 | .main-menu {}
36 | .footer-menu {}
37 | 39 | The Menu. 40 |
41 |42 | Any menu is a link set, therefore the menu should consist of the list. 43 |
44 |.site-header {}
35 | 37 | The Site Header. 38 |
39 |40 | Usually in this block they place the thing like: logo, main menu, search, contacts, authorize blocks, cart, etc. As the matter of fact header is a wrapper for the grid of the page top. 41 |
42 |.socials {}
35 | 37 | The Socials. 38 |
39 |40 | Usually social buttons is located on the product page or on the site footer. But according to the BEM methodology feel free to use it ever you need or want. 41 |
42 |.text-block {}
35 | 37 | The Text Block. 38 |
39 |40 | There are a lot of text blocks. Here is some. 41 |
42 |33 | Here is the reference manual on often used BEM methodology blocks. 34 |
35 | 36 |33 | Перед Вами справочное руководство по часто встречаемым блокам по методологии БЭМ. 34 |
35 | 36 |14 | Lorem ipsum dolor sit amet. 15 |
16 | 24 |
13 |
14 |