This is just a random idea, but I can’t stop it from swirling around in my head.
Whenever I need to style a form on a fresh project where the CSS and style guide stuff is just settling in, the temptation to reach for a mini form framework is strong. Form elements are finicky, have little cross-browser issues, and are sometimes downright hard to wrassle away styling control.
This idea, which I’m just now managing to write about, but haven’t actually done any work toward, would be this mini-form framework. Maybe something like “Boilerform”, as Dave jokingly suggested on an episode of ShopTalk.
I imagine it going something like this:
- It would have basic form-styling to organize form elements, not unlike something like Foundation forms;
- Account for cross browser issues, not unlike normalize.css;
- Strong-arm styling control over form elements, not unlike WTF, forms?; and
- Include native browser form validation stuff, including UX improvements via native JavaScript API’s, not unlike Validate.js.
I think there is value in combining those things into one thing, but doing so with…
- A light touch, and without any more opinion about the final styling as possible, and with
- Flexibility, perhaps showing off a gallery of different form types with varied styling.
I probably don’t have time to head up a project like this, but I wouldn’t mind helping connect humans who also see value here and wanna give it a shot.
Seems like a good idea. I struggle most with styling placeholder text cross-browser.
This sounds awesome, I think I’ve also wished for this to exist on many occasions. Would love this as a weekend project.
Really like the idea. You might look at what http://responsivebp.com/css/forms/ has done. I know he did a lot to normalize form elements across browsers https://github.com/ResponsiveBP/Responsive/blob/v4/src/sass/partials/_forms.scss.
I would definitely use a mini-form framework. Great idea.
I would be up for working on this in cooperation with someone else as an open source project :)!
I am a designer and frontend developer myself.
Hit me up if you are interested in building a small awesome solution for this (very) common scenario.
i’ve had a simmelr idea for some time now. I think a lit of people, myself included would love to contribute to a project like this.
That is a good idea. Form controls are notoriously painful to control and style across devices.
The biggest challenges I see are:
1. Some element styles are completely incompatible cross devices, eg. Apple OS default styling if selects
2. Standards for some inputs types are nonexistent, eg. Postcode or date of birth vs date range.
3. Polyfills are actually not often the best solution as many of the native solutions for dates, numbers and validation have poor UX and styling control.
4. Input attributes vary extremely across needs, eg. autocomplete, inputmode, spellcheck – almost no one knows how to use these properly (including the browsers ;)
I remember gov.uk did some good work documenting best practice web forms, but was more focused on usability than technical implementation.
I have to admit that whenever I’m tempted to write from scratch these days rather than use a framework like Foundation, it’s the form styling that makes me give up. So indeed I would endorse this!
So jealous of WordPress & Craft, forms are too standard to be soo constantly custom..
I’ve developed a form boilerplate a while ago because I was facing the same problem. It’s a huge time saver when you don’t have to style forms from the ground up everytime you start a new project: https://github.com/electerious/formbase
Great idea. I’d love to contribute, especially with regards accessibility.
One thing about not being opinionated…
Common UX best practise states that form labels should appear above form fields, not aligned left or right.
So the framework should simply do just that… stack labels above.
I’m really up for getting involved in this. I think it’ll be really useful for the community.
Shall we get a project set up so we can spec out what this needs to feature?
Definitely, I was searching for something exactly like this quite recently and was disappointed with the available options. In the end I resorted to writing all my form styles from scratch.
I love the idea as getting forms right is always tedious.
My problem with most css boilerplates is that they’re either in the wrong language (sass, less, css, stylus, etc…) or use incompatible naming conventions (bem, atomic, ++), are hard to integrate with a framework (react, angular, vue), or use their own grid systems or other styles which duplicate functionality already on what I’m working on.
I think a generator would be useful – something that could take a configuration (and maybe templates?) and generate css in your language and naming convention of choice. This would open up the project to contributions from the community and prevent endless discussions on The One Way to do things. Of course pregenerated CSS/JS should be provided for those who just want to include good defaults in their project without having to think about a ton of stuff.
I think a generator is a good shout, Daniel. I immediately thought about Yeoman, but that sets the barrier to entry too high IMO.
A nice friendly interface that allows users to configure their output would be a lovely tool.
A PWA maybe?
More random ideas:
Some good points Chris, but I worry that we may be trying to solve too much. Personally, I think we should laser-focus on the form elements themselves and let whatever context they’re dropped in to do the rest.
I dunno, maybe I’m being too cautious?
So this has gone a bit quiet. I think we should maybe set up a repo or something so we can flesh out what we want this thing to do?
I’m up for setting something up, or maybe we make an organisation so we can have a couple of specialist repos?