Devpost software form redesign

Before

After

Inspiration

I rebuilt the software form as part of my usual development work here at Devpost.

What it does

The new software form does everything the old one does, but everything is presented in a way that makes more sense.

How I built it

I used Zurb Foundation for the grid layout. I used CSS 3's flexbox to stretch and order form elements. I reused existing form elements from the old form that were built with Simple Form. I used and contributed to Devpost's Reimagine front-end framework.

Challenges I ran into

• The software form was pretty complex, and there are still a lot of moving parts.
• Internet Explorer 10 has a totally different syntax for flexbox than other browsers.

Accomplishments that I'm proud of

I made the code for the software form a lot simpler, and I introduced some utility styles that are now available for other Devpost engineers to use throughout the app, as well as anyone using Reimagine. I also learned a heck of a lot about CSS.

What I learned

I learned how to use flexbox. Specifically, I used it to stretch and order form elements. Try resizing your browser window on a desktop to see how the inline form fields stretch and position themselves. If there's an error on a form element, it shows in a different order based on whether it's inline or

I also learned some of the finer points of Simple Form. While it's a pretty straightforward gem--it provides a simpler interface to building forms in Rails--it was a bit of a learning curve to figure out how things like error rendering, associated collections, and such fit into the scheme.

Built With

• css3
• flexbox
• marionette.js
• ruby-on-rails
• sass
• simple-form
• zurb-foundation