Redesigning My Blog With ClarityUI · TheHumbleLab

Redesigning My Blog With ClarityUI

· Read in about 10 min · (2058 words) ·

If you have visited my blog previously, you’ll notice that the design has largely changed. In case you need a reminder of the old design…

Old Blog Design

I’ve finally found some time to jump in and integrate the HTML components of ClarityUI into my hugo blog. My buddy Grant Orchard beat me to the punch in styling his blog with ClarityUI a few months back - so now that I’ve finally jumped on the wagon, I wanted to get this post out to be a bit of a tour around some of the features I’ve setup on mine. I’m extremely happy with how it turned out!

New Blog Design

Let’s get started!

Modernizing The Look

A few months back, I made the move off of WordPress and onto Hugo. I moved my site off of the hosting provider I was using, and started hosting the page within the Amazon Web Services. You can read more about the process Migrating to Hugo and AWS. It was a tricky move overall; because WordPress had largely built the overall look and feel of my page. Looking back; I think the only real “code” level changes I made were around CSS changes to move a few small things around.

As part of the migration to hugo, I decided to use one of the many templates to quickly get started with my site. Hugo is largely based on GoLang; and my skills weren’t sharp enough yet to feel comfortable digging in and building my own template from scratch. I had settled on using one called Hugo-BootStrap-Premium. Ultimately the design wasn’t exactly what I wanted in a page but I had to start somewhere. I dove in and made a lot of changes to the underlying code - and landed at an “OK” place - but not really long term where I wanted to be.

Getting Started with ClarityUI

ClarityUI is VMware’s UI/UX toolkit. It’s primarily a collection of HTML, CSS and Angular components that are really easy to get started consuming. It’s very much like bootstrap in that you load your components - and you can use any of dozens of code samples to start piecing together components.

Now, all of that being said - Often times ClarityUI gets the most attention around its Angular components; or implementations in the NodeJS world. It’s true that Clarity is really easy to install using NPM and form a NodeJS/Angular perspective - the advanced components are really easy to consume. However, what if you want more of a bootstrap-like experience? Fortunately, with a significant part of ClarityUI being “simple” HTML5 CSS and JS components - we can consume a number of those components without having to load up any sort of Angular code.

Ultimately you’ll still want to install NPM just to make the acquiring of those components easier. NPM is pretty easy to install though; just head over here to get the details. Once that’s installed you can follow the instructions at ClarityUI’s Getting started page to start pulling down the components with NPM. In short, we’re going to do the following from a command prompt…

npm install clarity-icons --save
npm install @webcomponents/custom-elements@1.0.0 --save
npm install clarity-ui --save

We don’t need to install the clarity-angular components since we’re not going to use angular here. I’m using a windows box, so once those installations complete, I can head over to the node-modules directory (C:\Users\username\node_modules) and start pulling out the CSS and JS files I want to use. Once we look in the directory I’ve listed previously you’ll see a number of CSS and JS files that can be pulled. For my blog I grabbed

  • clarity-icons.min.css
  • clarity-ui.css
  • clarity-icons-element.js
  • clarity-icons.min.js
  • custom-elements.min.js

Once you have these files placed in the appropriate locations on your laptop you can import them in just as you normally would. Within my Hugo install; I use some of the variables/parameters to make this easier - See example below

<link rel="stylesheet" href="{{ "css/overwrite.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/font-awesome.min.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/style.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/clarity-icons.min.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/clarity-ui.css" | absURL }}">
<link rel="stylesheet" href="{{ "css/fa-svg-with-js.css" | absURL }}">
<script type="text/javascript" src="{{ "js/clarity-icons.min.js" | absURL }}"></script>
<script type="text/javascript" src="{{ "js/custom-elements.min.js" | absURL }}"></script>
<script type="text/javascript" src="{{ "js/fontawesome-all.min.js" | absURL }}"></script>

This effectively uses the css and js directories in the current theme structure (under static) as the import paths. With this little code block in place we’re exposed to a ton of clarity goodness.

Lets take a bit of a tour

Major Clarity Items on My Site

Since i’m using Clarity as a bootstrap, effectively the whole page is broken up using various Clarity classes. That being said - there are a few items that really “call out” as being Clarity items. You can see all of these components if you head to the ClarityUI homepage and then click on the “Components” navigation item. From there, you’ll be able to select the component on the left, and receive design advice as well as code examples for the component. On with the tour…

The header and sub-navigation bars are both well documented Clarity components. If you take a look at the Clarity examples here you can see there are a ton of different ways we can customize the header of the page. For me, I used some Hugo configurations to set the Brand Text (TheHumbleLab). The code for my header is below. This is captured as a “partial” in Hugo, and added to an overall page.

<header class="header-4">
    <div class="branding">
        <a href="{{ .Site.BaseURL }}" class="nav-link">
            <clr-icon shape="rack-server" class="is-solid is-inverse" style="width: 48px; height: 48px;"></clr-icon>
            <span class="title">
                <b>{{ .Title }}</b>
            </span>
        </a>
    </div>

You can see we apply some basic style options to the icon to change its size as well as some classing to the icon to change its color properties. Again, these are all well documented on the clarity page.

Being a bit of a code junkie, I also added in a bit of a custom object around a github link on the right side of my page. I added this in with the following snippet

    <div class="header-actions branding">
        <a href="https://github.com/codyde" class="nav-text">
            <clr-icon shape="code" class="is-solid is-inverse" style="width: 48px; height: 48px;"></clr-icon>
            <span class="title">
                <b>MyGitHub</b>
            </span>
        </a>
    </div>
</header>

And this ultimately closes off the “true” header portion of the page. Again, we leverage ClartyUI’s icon set to grab a cool icon, apply the classes we want to the code and we’re all set.

The subnav was something I wanted to include to enhance the navigation on the page (mostly for future content). The subnav code examples are inside the same header link I shared earlier so it’s easy to pull them in and modify as needed.

On my original page, these were just lists of items which admittedly looked pretty ugly. I wanted to frame them up in a nice object so they stood out, as well as change the way that the tags were represented. I also wanted a clean way to link back to social media.

I wanted all of these to show up alongside my existing content, but I’m a bit OCD around the centering and spacing. In the bootstrap world, there exists the concept of “The 12 Column Grid”. How this effectively works, is using classes, you can break the viewable area on a screen up into 12 columns. This also helps you create responsive pages that will move objects around as needed for smaller devices. For example - On my phone, I want the sidebar content to show up BELOW my blog. I use the column system to achieve this by saying on “smaller screens” to have my posts DIV take up all 12 columns, thus forcing the sidebar to the “next line”. There is a lot more to it than that - i’d highly suggest reading up on it - but hopefully the way i’ve explained it above gives you some idea.

To frame these items out, I used the Clarity Cards component. I decided to place my content within Cards, which gave a nice graphical break. For the recent blogs link; I combined this with some of the existing Hugo code for looping over my most recent blog posts to create an easy block that would show my 5 most recent posts. Code below

<div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <b>Latest Posts</b>
        </div>
        <div class="card-block">
          <div class="card-text">
            <ul class="list">
              {{ range first 5 (where (where .Site.Pages "Type" "post") "IsPage" true) }}
              <li>
                <a href="{{ .Permalink }}"><b>{{ .Title }}</b></a>
                {{ end }}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

There are definintely some enhancements I could make to the way the code is written to reduce the lines; this is just a first pass.

To create the “tag” card, I needed to pull in a few more components. I decided to use the labels components from Clarity, because I liked the look of the “circular” filled in tags. For this one, we do a loop over all of the tag objects, and apply the styling to all of them individually. This creates a nice effect of the “bubble” around every item. I change the list style to “unstyled” to remove any bullets or numbers from each - and set the label type to label-info so its blue and peaceful. All of this is detailed in the ClarityUI examples on their page! Code below.

  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <b>Post Tags</b>
        </div>
        <div class="card-block">
          <div class="card-text">
            <ul class="list-unstyled">
              {{ range $key, $value := .Site.Taxonomies }} {{ $len := len $value }} {{ if (not ( eq $len 0 ) ) }} {{ range first 10 $value.ByCount}}
              <span class="label label-info">
                <a href="{{$.LanguagePrefix }}/{{ $key }}/{{ .Name | urlize }}">{{ .Name }}</a>
              </span>
              {{ end }}
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

The “Social Media” card was a new addition to the page. ClarityUI didn’t have any of the social media icons created, so I decided to lean on the fantastic “FontAwesome” set of stylings. You can check out their content here - but it’s highly likely you’ve seen it all over the internet already (even if you didn’t realize it). I used their icon’s by downloading their CSS and JS and importing them the same way we did with the Clarity components earlier on. I combined those icons with the cards component that we used earlier and voila - A nifty social media box!

 <div class="row">
      <div class="col-lg-12">
          <div class="card">
              <div class="card-header">
            <b>Follow Me On Social Media</b>
          </div>
          <div class="card-block">
            <div class="card-text">
                <a href="https://twitter.com/codydearkland" class="nav-link"><i class="fab fa-twitter-square fa-3x"></i></a>
                <a href="https://www.linkedin.com/in/codydearkland/"><i class="fab fa-linkedin fa-3x"></i></a>
                <a href="https://www.reddit.com/u/blahcodyde"><i class="fab fa-reddit-square fa-3x"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>

You can see within that block that the FontAwesome icon’s have a bit more room for customizing which made it easy to tune them the way I wanted.

Further Customization’s

I have a lot more planned that I want to do. I want to rewrite the theme from the ground up to remove a lot of the “old” stuff from the other theme that isn’t being used at all anymore. I also have a few broken controls that exist around that need to be cleaned up from aged versions of plugins.

It’s important to note that the majority of my clarity work was able to be done via copy and paste. Grabbing entire components and dropping them in; with minor tweaks to URL pointers and labels made getting started extremely quick. I did all of this in a single night (with the exception of some lingering bugs that popped up here and there).

Closing

The ClarityUI team has done a great job of taking something that used to be an internal “product” and open sourcing it for the community to consume. It’s a product that I’m starting to see pop up on other members work in the community, and not just VMware employees either! When it comes to INTERNAL stuff, you can see Clarity’s influences in almost every current generation product, including the new HTML5 interface for vCenter!

Do you have some cool uses for Clarity that you’re doing? I’d love to hear more! Drop me a tweet and be sure to tag the folks at @VMwareClarity as I’m sure they’d love to hear about it. Also - if you see anything you think I could do better on my blog - drop me a suggestion!