Giters

colourgarden / avalanche

Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system

Home Page:http://colourgarden.github.io/avalanche/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

BEVM syntax

willemvb opened this issue · comments

commented

Hi, this looks like a great flexbox grid! We'd love to use it in a more BEVM-way (like eg. described by envato) so you could write the HTML like this:

<div class="grid -flush -bottom">
    <div class="grid__cell -width-1/3 -center">
        ...
    </div>
</div>

This helps us a lot to keep our markup non-verbose.
In fact, it seems like something you started doing already for cell widths by not writing grid__cell--1/3 explicitly but keeping it short.

Would you accept a PR that makes this behaviour configurable? Eg. by setting some vars

 $av-modifier-class-chain: '--' !default;
 $av-child-class-chain: '__' !default;

which would allow us to overwrite $av-modifier-class-chain with '.-'.

Curious about your thoughts on this!

commented

Hi @willemvb. BEVM is not something I've come across before but it certainly looks useful and I'll have do some more reading! I think your approach of having variables for the chain characters sounds a good one so, as long as the default behaviour isn't changed then I think your suggestion would be a good addition. Please submit your PR and I'll take a look.

Thanks for your interest in the project. Tom