https://rakujourney.wordpress.com/2024/09/08/htmx-raku-and-pico-css/

Skip to content

Open::Journey

my personal open source journey

Close collapsed

  * Latest
  * Comments
  * Archive

Menu expanded

HTMX, Raku and Pico CSS

Sep 08 2024

This post is kind of part 3, coming off last week's thrilling episode
.

I am a simple sole, I want to reduce the cognitive load in my web
projects. The general idea is to go back to the halcyon early days of
the web before Netscape dropped the JS-bomb. You know HTML for the
layout and CSS for the style. An elegant division of roles.

When I read about HTMX it was clear that Raku and Cro are ideal
candidates for the back end HTML assembly, defining routes and
serving RESTful APIs. As we have seen in the previous posts, HTMX
eliminates the need for JS to make dynamic web content. Lovely.

Remember - we are talking simpler ways to build attractive, dynamic,
modern websites. While HTMX is well suited to 90% of this, if you are
building a webapp like FaceBook or Google Maps, then it's not for
you.

Pico CSS

But what to do about style and CSS?

Well HTMX is neutral to CSS ... it can be used with Bootstrap,
Tailwind, SASS and so on. But many of these CSS tools have evolved to
jam more stuff into the HTML tag attributes.

In my mind, the ideal would be something like this for a simple
navbar:

<nav>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
  </ul>
</nav>

I had heard that Pico CSS was often used in HTMX projects. And sure
enough, the Pico Components have this feel...

Here's Bootstrap for contrast:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav ms-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Product</a>
      </li>
    </ul>
  </div>
</nav>

What about Tailwind, also for contrast:

<nav class="bg-gray-100">
  <div class="flex justify-end">
    <ul class="flex space-x-3">
      <li class="nav-item">
        <a class="text-gray-700 hover:text-gray-900" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="text-gray-700 hover:text-gray-900" href="#">Services</a>
      </li>
      <li class="nav-item">
        <a class="text-gray-700 hover:text-gray-900" href="#">Product</a>
      </li>
    </ul>
  </div>
</nav>

Bootstrap and Tailwind come at the cost of "more stuff in the HTML
tags".

Here's the Pico CSS example:

[screenshot-2024-09-08-at-09]https://picocss.com/docs/nav

So for our goals, it looks like Pico CSS is on a good track. Their
website says:

[screenshot-2024-09-08-at-09]

What's that?

Semantic HTML!

Looks like my goal all along has been Semantic HTML (not that I knew
at the time).

    By adding semantic HTML tags to your pages, you provide
    additional information that helps define the roles and relative
    importance of the different parts of your page.

    (As opposed to non-semantic HTML, which uses tags that don't
    directly convey meaning.)

So having more powerful Semantic HTML is a win.

[EN-Semanti]

Hopefully the figure above is enough of an eye opener for now.
There's much more info out there if you are curious. But obviously
read the rest of my post first.

[For hardcore aficionados, I plan to look into Web Components in a
future post. I also think that Bootstrap and Tailwind and SASS in
general are good companions to HTMX and Raku -- but my project and
this series of posts starts by using Pico CSS to minimize the
cognitive load on the style side - later we will come back to these
other styling tools].

Real Code

So lets see how this looks in action. All the code for these posts is
on GitHub for your perusal and collaboration.

I have been using Pico CSS as part of my project to rebuild the HTMX
examples for Raku / Cro largely by translating the Python / Flask
examples. This post draws on the Tabs HATEOAS one in particular,
since I have in mind that I will want a Tab Component in my toolbag
but that Pico CSS does not provide one out of the box. Pico does have
Accordions so there is some prior art for inspiration.

Anywho, here's the way the final code ended up.

tabs/index.crotmp:

<nav>
  <ul>
    <li>
      <a href="#" hx-get="/tabs/tab1" hx-target="#tab">Tab 1</a>
    </li>
    <li>
      <a href="#" hx-get="/tabs/tab2" hx-target="#tab">Tab 2</a>
    </li>
    <li>
      <a href="#" hx-get="/tabs/tab3" hx-target="#tab">Tab 3</a>
    </li>
  </ul>
</nav>
<div id="tab" hx-get="/tabs/tab1" hx-trigger="load"></div>

/tabs/tab1.crotmp (tab2 and tab 3 are much the same so I won't bore
you)

<section>
  <figure>
    <blockquote>
      "When you're new to something, you bring an ignorance that can
      be highly innovative."
      <footer>
        <cite>- Rick Rubin</cite>
      </footer>
    </blockquote>
  </figure>
</section>

/Routes/Examples/Tabs.rakumod to fulfil the hx-get attrs.

use Cro::HTTP::Router;
use Cro::WebApp::Template;

sub tabs-routes() is export {

    route {
        template-location 'templates/tabs';

        get -> {
            template 'index.crotmp';
        }

        get -> 'tab1' {
            template 'tab1.crotmp';
        }

        get -> 'tab2' {
            template 'tab2.crotmp';
        }

        get -> 'tab3' {
            template 'tab3.crotmp';
        }
    }
}

And the proof... oh yeah, Pico has built in dark mode 

Thanks for tuning in, please feel free to like, share or comment.

You can find me on the Raku Discord and IRC Channels.

~librasteve

Share this:

  * Twitter
  * Facebook
  * 

Like Loading...

Related

Sep 08 2024
[63da3]

Published by librasteve

View all posts by librasteve

Leave a Comment Cancel reply

 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
 [                                             ] 
D[                                             ] 

Open::Journey, Blog at WordPress.com.
[Close and accept] Privacy & Cookies: This site uses cookies. By
continuing to use this website, you agree to their use.
To find out more, including how to control cookies, see here: Cookie
Policy
  * Comment
  * Reblog
  * Subscribe Subscribed
      + [712931] Open::Journey
        [                    ]
        Sign me up
      + Already have a WordPress.com account? Log in now.
  * 
      + [712931] Open::Journey
      + Customize
      + Subscribe Subscribed
      + Sign up
      + Log in
      + Copy shortlink
      + Report this content
      + View post in Reader
      + Manage subscriptions
      + Collapse this bar

 

  

Loading Comments...
 
Write a Comment... [                    ]
Email (Required) [                    ] Name (Required)
[                    ] Website [                    ]
[Post Comment]

 
%d

[b]
Design a site like this with WordPress.com
Get started