This article was created in partnership with JotForm. Thank you for supporting the partners who make SitePoint possible.
Basically, the design of JotForm Cards wasn’t a great fit for the website in question. Although the form itself looked beautiful, using the design in a context that was so different to the standard use case was ruining it.
And as we continued embedding JotForm Cards into websites, we became aware that this situation was pretty common. Double uh oh.
We noticed things like forms being squeezed into columns…:
And feature colors that didn’t match the website:
And repeated titles with different typefaces.
These issues don’t seem huge at first glance, but because we only had our 7 day HackWeek to fix them, we were nervous, real nervous.
Before I dive into implementation, I’ll share some structural information about JotForm Cards.
The styling structure on the front-end uses SCSS (basically SASS with fancy syntax) as a preprocessor and PostCSS as post processor. The remaining front-end structure (markup, logics) is mostly based on React.
Side note: the CSS files of the forms are prepared and served by PHP, which is the main back-end language for this implementation.
We decided to automate the design to achieve the following goals:
Continue reading %How to Automate a Design%
thanks you RSS link