Generate files with css classes that match the current set of attributes

[benjaminapetersen]

Need to decide what this should look like. It is important to keep the usage simple/clean/pleasant.

So <div flex="auto"> turns to <div class="?">? Would it be <div class="flex-auto"> or <div class="flex_auto">. I think most prefer dashes when it comes to css.

Complex rules such as those related to axis may be tricky. The class may be lengthy like <div class="axis-start-start"> <div class="axis-start-end">, or even longer like <div class="axis-end-stretch-center">.

A real world example could be: <div row flex grow="2" axis="end stretch center"> becomes <div class="flex grow-2 axis-end-stretch-center">.

[benjaminapetersen]

The README.md file has this as the first simple example:

<div layout row reverse align-items="center">
  <div flex>flex foo</div>
  <div layout row mobile="column" tablet="column">
    <div flex resize="2 2">flex bar</div>
    <div flex scrollable>
      lorem ipsum......
    </div>
  </div>
  <div>no flex.</div>
  <div conceal="mobile tablet">Hidden on mobile and tablet</div>
</div>

Converted to classes it may look like:

<div class="layout row reverse align-items-center">
  <div class="flex">flex foo</div>
  <div class="layout row mobile-column tablet-column">
    <div class="flex resize-2-2">flex bar</div>
    <div class="flex scrollable">
      lorem ipsum......
    </div>
  </div>
  <div>no flex.</div>
  <div class="conceal-mobile-tablet">Hidden on mobile and tablet</div>
</div>

[benjaminapetersen]

@sg00dwin pinging for thoughts :smile:

[sg00dwin]

Being that a primary goal of layout.attrs is to make it easier to reason about & change the markup, ie. the layout attribute structure makes them very apparent what they are doing.

Once the attributes are converted to classes and grouped with other non related css rules then they lose some of the aspects of being easily noticeable as a composed pattern.

An option to alleviate this issue would be to bracket group the related flex.attrs within the class=” [...]”. Based on http://csswizardry.com/2014/05/grouping-related-classes-in-your-markup/ it’s valid since class attributes can legally contain any character.

So the converted classes example above could look like:

<div class="[ layout row reverse align-items-center ] container">
  <div class="[ flex ]">flex foo</div>
  <div class="[ layout row mobile-column tablet-column ] panel-primary panel-header">
    <div class="[ flex resize-2-2 ] alert alert-warning small-icon">flex bar</div>
    <div class="[ flex scrollable ]">
      lorem ipsum......
    </div>
  </div>
  <div>no flex.</div>
  <div class="[ conceal-mobile-tablet ] panel-body">Hidden on mobile and tablet</div>
</div>

[benjaminapetersen]

I like this... initially thinking a user will choose between manually writing attrs or manually adding the classes. Making that easy is key. I think once the manual method is good, will explore adding tools to help automate (like the Angular Directive, or a web component)...

[benjaminapetersen]

Interesting, there is an alt to the "[ brackets to group classes]". Per this article it looks like this:

<div class="foo / bar bar-alt bar-alt2 / baz bam></div>"

Slashes seem a little simpler to digest. Curious if pipes would work as well (though more annoying to type:

<div class="foo | bar bar-alt bar-alt2 | baz bam></div>"

[benjaminapetersen]

@rhamilto curious if you have thoughts on this as well. Def want classes as an alt to attrs for performance reasons, haven't landed on the best convention yet.

[rhamilto]

👍 to Steve's idea. I really like the idea of using brackets to group the layout.attrs classes. It makes them instantly recognizable as a group and unique (whereas the slashes and pipes aren't as clear to me).

[benjaminapetersen]

Nice. Either way, this is easy as its not really a feature addition, just suggestions to document to users 😄

[benjaminapetersen]

Finally had a thought on progress for this. As far as structure goes, I'd prob do an /src with module groups:

/src
  |_ /main
        |_ main.vars.scss
        |_ main.classes.scss
        |_ main.attrs.scss

In order to generate a /dist:

/dist
  /classes
     - main.css
  /attrs
     - main.css

/classes and /attrs should be parallel, same file sets under both. One supports <div flex> and the other <div class="flex">.