List of ideas/gotchas

[dy]

This is really promising idea! Reminds tachyons a lot! Recently I was prototyping the same framework, and got some ideas, handy practically or inspired by other frameworks. Would be nice to see them incorporated here!

• tailwindcss adds prefixes to classes to define target breakpoints as sm:bg-red md:bg-green. Handy to target styles for different screen sizes. Basically each size: prefix just copies full table of styles into some media-query scope, that generates really extensive CSS. What battery could do - customizing number of such media breakpoints, some websites may not need media queries at all, for others enough mobile/desktop separation, others may require xs, s, m, l, xl screen variants.
• :hover, :active, :focused states can be also incorporated into class names as hover:b-red, that is not possible with inline style attribute
• :before, :after - the same
• Units can be put directly into class names w-100 => width: 100px, but w-100% => width: 100%. Or w-1/3 is also possible. (but honestly w-100 is better for 100 grid units, if we use 8pt grid)
• Some css rules can be combined for faster use as grid-2x3, flex-row-center - such tachyons are way easier than grid grid-rows-2 grid-cols-3 and flex flex-direction-rows items-center.
• Super-handy solution for layout is combining prefixes with ratios: s:1 m:1/2 l:1/3
• Customizing typographic scale / grid via CSS variables is some outer space feature, same as fonts and base colors.

[kilmc]

@dy Hey Dimitry. I totally missed this comment. Thanks for posting. I've been working to support that naming convention from Tailwind. I was having trouble with escaping the : at the right point in the processing of the class names but have recently re-worked how Battery is built to allow for it. It's in a branch right now and hasn't been merged but when it is, you'll be able to do : separators. That would also allow for using the % symbol too for your examples about lenghtUnits.

A lot of what you're talking about is possible via plugins. I have a bunch of sample plugins here if you'd like to check them out https://github.com/kilmc/battery-config/tree/master/src/plugins including lengthUnits, aspect ratios and pseudo selectors.

I also have plans to allow people to pull in a core naming convention in, almost like babel's presets and then they can have a simple config to adjust type size, color, breakpoints and spacing. We're definitely on the same page in terms of future features.