leejordan/reflex

SCSS placeholders

Closed this issue · 1 comments

Enhancement proposal:

I've been considering how grid systems like this can clutter the markup. My solution to avoid clutter and promote semantic markup is to use SCSS placeholders.

Currently we have (in _helpers.scss) various helper classes for alignment which we can use to position html elements. I think that we can achieve the same thing without breaking anything by making each of those classes an extension of a placeholder of the same name. This would allow us to write markup either as we do now with plenty of structural classes, or with far fewer classes because in our separate theme.scss files we can simply declare a class and then declare the extension.

I've created a gist to show what I mean https://gist.github.com/robballantyne/a08212f9beba1757ecefaa0815bb53a4

Can you give me an example of how this would affect the classes and markup you'd be generating? I'm struggling to visualise it.