How do I use BEM with responsive design grids and visibility classes

[harrington101]

I am used to using a framework such as Bootstrap or Foundation with my CSS. These frameworks give me classes such as .show-for-medium-up and .hide-for-large for controlling visibility of elements. It also has a grid like ..column .large-6 .small-12 for example to show something that takes up the whole screen on a small display but only half of the screen on a large display. How would I do this in BEM without re-doing the CSS for every block or element?

[manumorante]

I think there is no difference. I mean BEM helps you to understand abstractions, what is a block, what a element, (OCSS). But BEM also use helpers like you has commented.

In this example you use your BEM styles as usual and next you add .is-hide (maybe using javascript) to hide the search.

SCSS

// (UI) Styles for your site
.site-search {} // Block
.site-search__field {} // Element
.site-search--full {} // Modifier

// (UI) Helpers
.is-user-admin {} // Show button admin
.is-featured {} // Show highlighted style

// (LIBS) Helpers from other libs like Bootstrap
.is-hide {} // Hide
.small-12 {} // Using grid - colum small 12 steps

HTML

<div class="site-search site-search--full is-hide"></div>

Here a visual example: http://codepen.io/unavezfui/pen/JKaVEP I hope I've helped you @harrington101 !