Go ahead, just copy and paste the code for this feature right in. No javascript or author credit required.
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.
The feature chosen from Tailwind UI to intelligently organize a page with multiple secondary concerns.
For this layout, we selected a FAQ Layout that would promise to show the condensed headlines of the services we apply at each step of your journey. What you have here is one page that contains multiple sub-page partials and, in some cases, links off to full pages, supported completely by Craft CMS structures and Related Entries fields. Tailwind UI provided all of the style code, accessibility code, and Javascript instructions in the comments. We still had to write the JS, which was kind of a bummer, but totally understandable given individual website customizations and how Javascript gets implemented, generally. We use Vue.js - which is not at all what all sites use. Even though we couldn’t copy and paste and just have it work, it was still a thrill to see it work easily once we got it plugged into our Vue.
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.
The Tailwind UI component catalog for ecommerce product features.
Why the Petroglyph UI?
As a starter template, the Petroglyph UI is already set up with everything needed to implement Tailwind UI features in a copy-paste-customize scenario, including Vue.js. Again, you’ll have to add your custom javascript, but working with custom JS on the Petroglyph UI’s webpack development server is a breeze. It’s so easy, that when it came time to customize our JS for the Our Process page, we took the feature into Aquarian’s own UI and worked the javascript there instead of on our local Craft CMS install. When the JS was ready, we piped it into the local install, validated that it worked just in case, then sent it live. It was smoother, quicker, and easier to work on this feature in the Petroglyph UI webpack environment than it was to use the code in the website.
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.