I never actually launched an “official” website for Login Designer, a plugin I built to help folks better customize their WordPress login pages. The plugin’s aging landing page clearly needed some attention. And now that Login Designer is my only active side project – I gave it just that.
Over the holidays, I took some time to build out a fresh new look for the Login Designer landing page, using Twenty Twenty and Tailwind CSS as its core, accessible-first, user-preferred dark/light modes, CSS variable driven, the whole shebang.
There’s a few reasons I took the path I did with the website. For one, I wanted to flex my design chops a bit. Unhinged, whatever-I-wanted-to-do design.
Second, I wanted to experiment with a fully utility-based framework and better understand both shortcomings and opportunities with this flavor of site building in WordPress. I’m actually exploring these same variables and utilities at GoDaddy, with both CoBlocks and the Go theme, and how they can enhance the site designing experience.
The tools I used:
- Twenty Twenty WordPress theme – A starting point, though the end results shares very little with the original theme.
- Tailwind CSS – A utility-first styling framework. This is the first project where I’ve really tried sticking to Tailwind
- PurgeCSS – Development tool to remove unused styling (from selectors added by Tailwind that I’m not using
- Gulp – Automating development, watch and build workflows
- FTP Deploy Github Action – Builds and deploys the site’s theme whenever there’s a merge into master
- Lighthouse Audit Github Action – Integrates Lighthouse audits for each pull request submitted to the theme’s repo. Tests for performance, accessibility, best practices, SEO, etc
- Mailchimp – Opt-in for folks interested. Includes a super-obvious/highlighted option to straight up download the plugin without providing an email address. I don’t want email addresses from folks who don’t want to give me theirs
- After Effects & Screenflow – Created a new video to showcase how easy styling a WordPress login page can be with Login Designer.
I’m particularly proud at how well the automated build and deploy works using GitHub actions. And how easy it was to manipulate the styling using CSS variables + Tailwind. Learned a lot for sure!
So what do you think? Check out the new look, then leave a comment!
P.S. A short tidbit of history: I originally launched Login Designer late 2018, but quickly sidelined the project to work on what would eventually become CoBlocks. I’m pretty happy with that decision. 🙂