Many web developers, including us, have been taken over by Tailwind CSS, the ever-improving, tech-forward, problem-solving CSS framework that at its core is a design system for developers. Given all this, how could we not? The convenience, portability, and configurability of Tailwind CSS appeals to a large swath of code workers and website builders with its thorough documentation, integration with compiling systems, and its steady performance. We started using Tailwind CSS in 2017 and built the Petroglyph UI shortly after that time so that we would have easier access to the starter code we wanted. The Petroglyph UI, at that time, contained Tailwind 2 and Vue 2 with WebPack bundling.
Since updating the code to Tailwind 3 and Vue 3, we have started building Zapooca. Since Zapooca is an app, it needs far more than text pages. It exists to get work done - so the layout has to communicate where features are located, how to engage with them, what to expect after engaging, and repeat these behaviors predictably over its life of service. We are planning features that are both visibly available to the user (as in, clickable) and have enough space to be easily used (expandable, convenient.) Frankly, thinking about every feature we will need to consider along these lines at first was abstract and distant. Now, it’s a constant re-factoring of location and re-use of space (sliding drawers, appearing features, workflow specifics being obvious - it’s going to be quite the Beta test.) With these kinds of demands, organizational structures need to be constantly reinvented, and no process of design from the top down is going to get this right the first time. But then again, that’s why Our Process doesn’t even go after this, but refines these kinds of features over time with an attitude that nothing is ever totally complete, forever.
Our Process - Tailwind UI
Speaking of our web design process - maybe you’ve seen the new page, maybe you haven’t. We needed a way to fold up and organize page-length content to be viewed all at once - not at all something we had tried to do on this website before. That - and Zapooca was going to need multiple iterations of UI features - that would maybe only last a few weeks each? To design all of that from scratch - how exhausting (not to mention project-lengthening.) So! I signed up for the Tailwind UI after browsing, specifically, with the Our Process document in mind. Did it have anything that might help me with the length of content to be present there? Yes, yes it did.
Pricing, Marketing, ECommerce, oh my!
Once you’re in and using Tailwind UI for one or two things, it’s easy to see how it could take over the scaffolding of many projects - especially those like ours that are designed in code. These components come with a complete set of common sense design and functionality features - many of which might not get included for different reasons, be it “not my job,” “not my specialty,” or “not time yet.” That, and the legibility of the default designs in these features are truly what high-end consumers have come to expect. You don’t have to level up as a designer to replicate the features you truly want to implement while having difficulty in gathering every detail.
Why the Petroglyph UI?
What do you need to try out the Petroglyph UI?
To try the Petroglyph UI, you don’t need an existing local development set-up or URLs or any of that fancy stuff. You will need to be able to handle dependency error research on Google and some light command line work. If you’re not used to the command line, it can take a bit of practice to feel confident in this work, but know that you don’t need confidence to get it set up! Instructions on how to use the Petroglyph UI live on its github repository page. Generally, if it’s your first time maneuvering around the command line with NPM, dependency issues will crop up but can be fixed - just google your error messages like the pros.