BEMIT CSS Based Grid Mixin
If you ‘ve read any of Harry Roberts’ articles, you know that
u stands for utility,
1/3 declares that this element takes one third of the available space and
@md declares the breakpoint.
- The CSS and HTML code is highly readable for you and your coworkers
- CSS size
- Declaration of layout in the dom
I want to say is that I am using this in a project, but this is simple prototype and it needs tuning. I need to come up with an elegant way to add a ‘hide this’ feature without having to declare it to each grid item because not everyone has the privilege to mess with the backend item loop (if there is any).
This is the (current) sass code to create this kind of grid.
Somewhere in our sass file we need to declare the variables we used in our mixin:
You don’t need to mess with the mixin, you can just declare you variables and compile your files.
You can get a more structured code in my github repository.
If you have any comments or recommendations feel free to comment here or on github.