Хочется использовать сетку bootstrap в БЭМ. Для этого переделал сетку bootstrap по методологии БЭМ. Саму методологию БЭМ использую только в css. Вроде никаких нарушений нет при внедрении сетки, но т.к. этой методологией только начал пользоваться, хочется услышать мнение профессионалов, может есть какие-либо замечания. Сразу скажу, что библиотеку bem components использовать не желаю, т.к. мне проще верстать элементы самому. Сетку bem grid использовать не приходилось, т.к. уж очень много заморочек при ее интеграции в проект. А вот сам код html:
<div class="container">
<div class="container__row">
<div class="container__col container__col_md_4 container__col_xs_6">Блок 1</div>
<div class="container__col container__col_md_4 container__col_xs_6">Блок 2</div>
<div class="container__col container__col_md_4 container__col_xs_6">Блок 3</div>
</div>
</div>
Т.е. блок container так и остался, у него есть элемент containerrow, и обязательный элемент containercol, т.к. модификаторы containercol* нельзя использовать самостоятельно, т.к. с точки зрения БЭМ-методологии модификатор не может использоваться в отрыве от модифицируемого блока или элемента.
Очень надеюсь на ответ. Спасибо!
@Degtyarev-vg http://theprotein.github.io/sharps/gh-pages/index.html не подошел почему?
Сетки основанные на flex конечно хороши, но они не работают в safari 5.1.7, а также в ie 9 версии, а у меня постоянный хороший заказчик требует совместимости в этих браузерах, поэтому и пришлось самому делать сетку. Но так как я только начинаю пользоваться технологией БЭМ хотелось бы узнать, не нарушает какие-либо правила методологии данная сетка.
Секта работает в IE9+ с фодбэком на calc. Но если желание все еще есть, то мне кажется, что более правильно было бы так:
Решал такую же задачу https://github.com/amel-true/am-grid Отличия от твоего решения - у меня контейнер, строка и колонка являются элементами грида, а у тебя всё является элементами контейнера
Круто! А у тебя нет исходников этой сетки в sass?
И там не хватает файла variables, в котором ты задаешь все переменные, хотя в файле readme написано, что он должен присутствовать.
Нет, сетка реализована для Stylus. Файл настроект на месте https://github.com/amel-true/am-grid/blob/master/_type/am-grid_type_example.styl - подключается как зависимость. Задача была иметь разные сетки в проекте.
@amel-true не понял как подключить сетку. Собрал все стили в один файл https://codepen.io/nucknine/pen/aWPPOw am-grid__colmd не работает. Что я не так делаю?