Recently, a friend and I started working on a website for a client. The requirements were pretty simple: I should set up the site with some corporate design, the content would be added later, preferably in an online web interface. Of course, our first (and very much correct) thought was to use a Content Management System (CMS). While WordPress is the most known CMS and comes with many pre-configured themes, changing them up would require a lot of work. Also, the API had to be as simple as possible, as it is just not worth it to learn a giant CMS API for a project that would need mostly static pages, a news feed and file download capabilities. We did some research and ended up using ProcessWire.
ProcessWire is “a friendly and powerful open source CMS with an API that is a joy to use at any scale”. After working with it, I can confirm the API friendliness, as the concepts are very simple to explain: There are three layers:
With this system in place, the template receives some variables which it can then use to render HTML.
The fields are quickly accessible via $page:
If I want to render the content of the page, I just use PHP short tags: <?= $page->content ?>.
Since ProcessWire doesn’t use some templating language, but pure PHP instead, it is very easy to use for anyone that has ever done any PHP programming (or even any procedural programming for that matter).
Because of this, you can move very fast with ProcessWire. But there is another problem: CSS.
I have yet to meet anybody who says that they love CSS. Although you can get used to it quickly and start remembering the most important attribute names, designing a whole page with CSS is hard, since it leads to hard-to-read and hard-to-understand code.
But there are alternative: CSS preprocessors such as Sass promise that spaghetti code can be avoided with variables and selector nesting. Having used it myself, I can confirm that it makes some things easier: Code is indeed cleaner and easier to understand. Yet, Sass does not eliminate all problems: CSS files often keep growing and one still has to keep inventing IDs and class names.
Another solution are CSS frameworks, such as Bootstrap. For regular website, e.g. for personal use, they do help you move a lot faster. But they fail completely in helping you create your custom design, often slowing you down in the process.
Enter a solution that I recently discovered on GitHub: TailwindCSS. TailwindCSS takes a new approach on CSS frameworks: Instead of predefined components, it provides atomic responsive CSS classes. Here is an example:
<div class='mb-4'>
<a class='font-bold text-phblue-600 hover:underline hover:phblue-500' href='<?= $page->parent->url ?>'>
<i class='fas fa-arrow-left text-base mr-1'></i>
Back
</a>
</div>
First, one notices a few things: TailwindCSS is all about composing atomic classes.
As you can see, I created a back button with a FontAwesome arrow icon.
Just by writing HTML, I can make my website respond to hovering or screen sizes (sm:, md:, lg: and xl: are available for all classes).
Just like that, you do not really need to write any CSS.
This means no unmaintainable CSS spaghetti and no ID naming headache.
Some might now ask But what about CSS reuse?
Normally, you reuses a lot less CSS than you think.
And for when you really want to reuse CSS, installing TailwindCSS via npm gives you access to more features, such as composing your own classes:
.btn {
@apply bg-blue-500 rounded-md text-gray-200;
}
.btn:hover {
@apply bg-blue-400 text-white underline;
}
Like that, you can reuse class patterns.
Tailwind also comes with a lot more features to create your own design systems: You can define own colors that will get compiled to respective classes.
If you really want to, you could also adjust the widths for responsiveness modifiers (e.g. md:) to your liking.
I like TailwindCSS a lot and I will definitely keep using it in future projects. Now that TailwindCSS and ProcessWire are set up, I want to create a modal for the navigation on phones. Is there a simple-to-use JavaScript library that follows similar design goals to TailwindCSS?
Alpine is a relatively new, “minimal framework for composing JavaScript behavior in your markup”.
Just like TailwindCSS, using Alpine, you do not need <script> tags or external JavaScript scripts anymore.
Alpine basically copied the declarative templating that you can find in React, Angular or Vue without any of the extra costs.
Specifically, it mostly copies Vue’s syntax with a few extra attributes to make up for the loss of the <script> tag.
Having worked with Angular, developing with Alpine was very fast.
I did not need to use any external JavaScript or call document.findElementById a single time.
Because of these very positive development experiences (and the joke that when you use a couple of frameworks / technologies together, you have to give your software stack a name), I inventend the TAP stack. Using TAP means developing your CMS with TailwindCSS and Alpine using ProcessWire.
It follows the philosophy of usinǵ as little resources as possible, having an intuitive API and using PHP (and HTML) as your only languages.
If you have make similar (or different!) experiences with some of the tools I mentioned or have any questions on them, I would love to be contacted about it (or any other topic on my website).