DEV Community

Cover image for How To Style Sign Up - Building SaaS #47
Matt Layman
Matt Layman

Posted on • Originally published at mattlayman.com

3 4

How To Style Sign Up - Building SaaS #47

In this episode, I added styling to the Sign Up page of the site. We chatted about CSS tools and frameworks, the benefit of feature flags to control what UI is displayed to users, and how to use Tailwind CSS to modify a design quickly.

In the first portion of the stream, we focused on CSS frameworks. We compared Bootstrap, Semantic UI, and Tailwind CSS.

After that discussion, I talked about feature flags. The project uses a feature flag to protect the sign up page and only displays the page when I turn on a flag. This control will be useful for me to gate which new users I would like to allow into my project as I open it up to others.

Once the feature flag was on locally, we worked to style the signup form that was provided by django-allauth. I kept the form very basic with a plan to expand it in the future. We also talked about JS frameworks and my plans for which framework to use.

We finished the development for the stream by fixing the notification messages. While testing the sign up flow, I noticed that multiple notifications appeared from django-allauth and my UI stacked them in a way that looked off. We used flexbox to fix the issues so that multiple notifications could display well together.

This article first appeared on mattlayman.com.

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay