Sass Forms

SassForms.md

Sass Forms

Styling forms is hard. Wouldn't it be great if there was a Sass extension that would do just that, configurable to fit your needs? Here's a concept for Sass Forms (which needs a fancier name, obviously). Sass Forms comes with sensible defaults.

Based on existing markup

Because we only want to fight over Sass and the resulting CSS, we'll start with markup from SimpleForm, a gem wildly used in Rails projects (but you could just hand-code said markup as well). By doing this, Sass Forms will immediately work in thousands of web apps. By making the input wrappers, etc configurable, like SimpleForm does, it can be used in even more projects.

Later on, Sass Forms can also support Formtastic markup (or any other gem with predefined output). By tweaking just a few configuration variables, it's also great for forms with custom markup.

Custom form inputs

It should be decided whether we want to support custom form inputs, like custom selects, radio's and checkboxes (which can be a pain because of keyboard support, and requires JavaScript).

Optional Modernizr support

With Modernizr support enabled, we can check for touch devices (and detect other features), to create the best experience for as many devices as possible. Nice to have in the future though.

I wonder if we can effectively do this without attacking the markup. I personally dislike the div wrapper, and do our OL/LI approach we push in The Rails View, but I'm sure other people think that ludicrous.

We could just handle styling inputs and labels and combinations thereof (and with the new maps functionality, maybe even a theming construct).

I don't see a chance to handle form-layout without a basic idea of the underlying structure. As CSS and HTML are tied together this is no real news.
On the other hand, if you only target classes without any reference to elements, different semantic approaches should be possible.

The only real broad approach to styling forms which is still in active development is the approach from YAML. You should take a look, the project is built upon Sass.

Maybe most of what you want is already solved.

Individual inputs or selects are mostly a work of JavaScript. And if you happen to create something with pure CSS you can end up hurting some browsers or accessibility. And besides that it is very indivdidual, so a collection of nice form solutions via Codepen would be a nice approach.