The following article was written by Vivian of Red Pixel Themes on how they use Polypane in their development process and is part of a series of case studies by Polypane users.
We’re Red Pixel Themes, a web shop that produces web templates made with TailwindCSS. We’re a team of 2 sisters (Vivian and Daniela) who have a passion for beautiful design, have a soft spot for CSS and enjoy working with JavaScript, you can also hire us for custom work.
Our philosophy
Since we’re building templates for other developers to use, we need to take into account lots of different decisions that we, too, have made while working with other templates.
We tend to ask things like “what happens if section X needs to have double or triple the text?” or “what if the customer deletes this section, how would the design accommodate that?” because we want to offer the best possible developer experience. We want to build stuff that we would enjoy using, today and in the future.
Our Process
Here’s how we typically develop one of our templates:
- We usually start with one of our starter projects, right now we’re really digging Jekyll.
- We then open up Polypane and select our already created workspace with all our defined breakpoints, we zoom out until all breakpoints are visible.
- We start coding and we focus on each section, making it look good for all our breakpoints before moving to the next one.
- Once the HTML/CSS is done, we open up the accessibility panel and check for any errors we may have.
- Next, we open up the meta tags panel and fix any inconsistencies we see there, we also create a simple social image cover in Canva for each template so we can visualize the social cards better.
- Lastly, we switch Polypane to focus mode, open the biggest breakpoint and start adding interactivity to the design using AlpineJS or Vue.JS.
You can download the Polypane workspace that Red Pixel Themes uses here: Red Pixel Themes Breakpoints.ppws.
How we discovered Polypane
You probably all know the usual workflow of responsive design coding. You open Chrome, create a few “screens” and then constantly change the view to check each breakpoint for every code change you make. Some people prefer to do it by focusing on each breakpoint first and then take a quick look to all the breakpoints at the end to check for any visual bugs.
This is not an overly bad workflow, it's just very time consuming and since we both freelance full time, we wanted to maximize our time spent on this project so we needed to find a more time efficient alternative to this, ASAP.
In our search, we first tested another developer focused browser called Sizzy since it seemed popular but found it a bit buggy, lacked good synchronized scrolling support and didn’t play well with Browsersync.
We actually discovered Polypane just by googling for other developer-focused browsers, we found similar tools on the market but nothing beat Polypane’s stability and we really liked the regular updates, we thought the project had more potential and was better priced.
We signed up for the trial but didn’t start using it until a week or so later, we’re the kind of devs that read the entire documentation of any tool before using it and by doing that we realized Polypane had so many features it was surprising to find out it was made by a single dev!
Why we stayed
It was me (Vivian) who first started using it to try and see how it could be implemented as a regular tool in our coding workflow. I tested it on a few freelance projects and was sold.
I remember the thing that wow’ed me was the breakpoint detection functionality, it was incredibly useful for our freelance work because sometimes we worked with old CSS codebases that didn’t have clearly defined breakpoints like in Tailwind. Just this feature alone made us a paying customer.
The biggest benefit we got by using Polypane was way shorter dev time. What we used to do in 1 hour in Chrome took 20 minutes in Polypane. It wasthat good.
The second best was having less visual bugs, now that we had clear visibility of all breakpoints at the same time and great synchronized scrolling, it was very easy to spot inconsistencies in the code.
What’s next for Red Pixel Themes
We’re in the middle of finishing up for our big launch, if you love working with Tailwind and need a good start for your next project then check out our available templates, we got a beautiful e-commerce one, one for lawyers/business and many more to come!.
Thank you Vivian for sharing your experiences getting started with and using Polypane! Vivian is also the author of Tailwind Weekly, which is a must-read if you do any Tailwind CSS development.
To learn more about how Polypane can help you build Tailwind sites, learn how well they work together.
