UI contribution guide (HTML/CSS)

If you'd like to help design the user interface (UI) for various Civiform pages and widgets, here's where you'll find key resources and guides.

High-fidelity mockups (for more design-minded folks)

One way you can contribute to the UI effort is to create high-fidelity, (mostly) pixel-perfect mockups of what various screens should look like. As an example, one contributor made excellent mockups of part of the application flow. Once you've created these resources, we'll send them off to our engineering team to help them as they build out the UI.
To get started:

Tailwind prototypes (for more HTML/CSS-minded folks)

Another way to contribute is to create prototypes using our CSS library, Tailwind. Our engineers will follow your HTML and CSS prototype very closely as they build out the UI. This is a great alternative to making pixel-perfect mockups if you're more proficient with HTML and CSS than with visual design tools.
To get started:
  • Learn about Tailwind on the website or with this crash course.
  • Go through our frontend introduction deck, assembled by one of our core engineers.
  • Find an open Tailwind issue on GitHub and comment that you'd like to take it on.
  • Copy this Tailwind playground, which contains the basic styles and components that fit our style guidelines.
  • Start editing the playground to create a prototype of what the page should look like. Check out the user story and mockup connected to the issue you took on to get a sense of what to build in.
  • Once you're happy with your creation, copy the sharing link and paste it in the #tailwind channel on Slack to get feedback!


Feel free to ask questions to our team on the #product-ux or #tailwind channels on Slack. We'll try to get back to you as soon as we can.