<commit_before>extends ../layout.jade

block menu
  +navbar()

block title
  title BEM — Block Element Modifier

block head
  link(rel="stylesheet" href="/index.css")

block scripts
  script(src="/index.js")

block content
  +header
    | Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end

  .grid.grid_fixed.grid_spaced
    .grid__row
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_green Easy
          .advantage__desc
            | To use BEM you literally do not need nothing besides BEM naming.
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_blue Modular
          .advantage__desc
            | Independent blocks and css selectors plus layer system makes your code reusable and modular.
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_red Flexible
          .advantage__desc
            | Methodology and tools, that can be recomposed and configured in the way you like BEM.

  .grid.grid_fixed.grid_spaced
    .grid__row.text_align_center
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/introduction/")
            .icon__image
              img(src="/img/book.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 10px;")
            .icon__caption Introduction
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/naming/")
            .icon__image
              img(src="/img/rename.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 5px;")
            .icon__caption Naming
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/building/")
            .icon__image
              img(src="/img/build.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 5px;")
            .icon__caption Building

  .grid.grid_fixed.grid_spaced
    .grid__row.text_align_center.bem-consumers
      h3.bem-consumers__heading Companies using BEM:
      ul.list.list_inline.list_unstyled
        li.list__item.bem-consumers__item
          a.bem-consumers__item-link(href='https://yandex.com/' title='Yandex')
            img.bem-consumers__item-logo(src="/img/consumers/yandex.png" height=70)
        li.list__item.bem-consumers<commit_msg>fix(bem-consumers): add "companies" identificator to block<commit_after>extends ../layout.jade

block menu
  +navbar()

block title
  title BEM — Block Element Modifier

block head
  link(rel="stylesheet" href="/index.css")

block scripts
  script(src="/index.js")

block content
  +header
    | Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end

  .grid.grid_fixed.grid_spaced
    .grid__row
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_green Easy
          .advantage__desc
            | To use BEM you literally do not need nothing besides BEM naming.
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_blue Modular
          .advantage__desc
            | Independent blocks and css selectors plus layer system makes your code reusable and modular.
      .grid__cell-sm.grid__cell-sm_size_4
        .advantage
          .advantage__head.advantage__head_red Flexible
          .advantage__desc
            | Methodology and tools, that can be recomposed and configured in the way you like BEM.

  .grid.grid_fixed.grid_spaced
    .grid__row.text_align_center
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/introduction/")
            .icon__image
              img(src="/img/book.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 10px;")
            .icon__caption Introduction
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/naming/")
            .icon__image
              img(src="/img/rename.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 5px;")
            .icon__caption Naming
      .grid__cell-sm.grid__cell-sm_size_4.raw-text
        .icon
          a(href="/building/")
            .icon__image
              img(src="/img/build.svg" style="width: 100px; height: 100px; padding-top: 10px; margin-top: 5px;")
            .icon__caption Building

  .grid.grid_fixed.grid_spaced
    .grid__row.text_align_center.bem-consumers#companies
      h3.bem-consumers__heading Companies using BEM:
      ul.list.list_inline.list_unstyled
        li.list__item.bem-consumers__item
          a.bem-consumers__item-link(href='https://yandex.com/' title='Yandex')
            img.bem-consumers__item-logo(src="/img/consumers/yandex.png" height=70)
        li.list__item.bem-consumers
{'fraction_non_alphanumeric': 0.09549989818774181, 'fraction_numerical': 0.015068214212991244, 'mean_word_length': 2.481218993621545, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3076452', 'n_tokens_mistral': 1635, 'n_tokens_neox': 1554, 'n_words': 324}