More often than not, less is more

When I first started my journey on freeCodeCamp, I was really looking forward to the portfolio project. I had built a few of my own websites before using Wordpress.org, but it always left me wanting more.

As amazing as the Wordpress ecosystem and community are, I couldn’t help but think that it was just too bloated and heavy for my use case. There is a decently steep learning curve when going from ‘plug-in juggler’ to ‘theme developer’. I’ve also heard that PHP can be a pain to learn, especially as your first language.

I’d like to get there someday soon, but Wordpress will have to wait.

Enter static site generators

A few months before, a friend of mine recommended taking a look at Jekyll, a popular, blog-aware, static site generator. I’d been wanting to actually learn web development and had an idea for a simple blog project. With a decent understanding of HTML5, a few CSS essentials, and some help from my friend I was able to get inthecomments up and running in a few days using a Jekyll theme and GitHub Pages.

The idea behind the blog was to be a project that I could finish quickly while learning the basics of setting up a Jekyll site. I hope to extend the readme one day soon to encourage people that are new to GitHub to learn how to make pull requests. All they would need to do is write a microblog post about something funny or interesting they found online somewhere (most likely Reddit)and submit a pull request to the repo.

CloudCannon has a really great tutorial series on Jekyll. Check it out if you have some time, you’ll learn something guaranteed.

Time to build something

I decided on using a framework to build my project rather than vanilla CSS. Somewhere in between browsing through web development subreddits and medium stories, I stumbled on a framework called UiKit. I really liked what I saw when reading through the documentation. It offers a lot of the same functionality as other frameworks but just looks better, in my opinion (of course).

Starting from the top

I started with the nav bar. I knew that I wanted to keep it simple, just a text logo on the left and a few pages of navigation on the right. Heading over into Navbar section of UiKit’s documentation, it says:

The Navbar component consists of a navbar container, the navbar itself and one or more navigations.

UiKit markup for a simple Navbar with a text logo on the left

<nav class="uk-navbar-container" uk-navbar>
  <div class="uk-navbar-left">
    <a class="uk-navbar-item uk-logo" href="#">Logo</a>
  </div>
  <div class="uk-navbar-right">
    <ul class="uk-navbar-nav">
      <li class="uk-active"><a href="#">Active</a></li>
      <li><a href="#">Item</a></li>
      <li>
        <a href="#">Parent</a>
        <div class="uk-navbar-dropdown">
          <ul class="uk-nav uk-navbar-dropdown-nav">
            <li><a class="uk-nav-header" href="#">Item</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</nav>

This is the basic skeleton I put together to start with. While a good start, it is not responsive. When viewed on mobile, the navigation links do scale with the site but they don’t turn into any type of menu icon with a drop-down. I researched how to do this with UiKit and found that there really isn’t an elegant solution like Bootstrap. The documentation recommends using an Off Canvas component for mobile navigations. This is more of a sidebar style, which wouldn’t fit with the design I was going for.

I started thinking about it in another way after going over the examples in their documentation and experimenting a bit. I read somewhere along the line that a somewhat dirty implementation is to have two menus and show only the one you want with CSS, it’s not perfect but it will get the job done.

UiKit uses responsive visibility classes to display or hide elements on different devices, so I essentially had to create two div’s with the uk-navbar-right class, with the first also having the class uk-visible@s and the other uk-hidden@s. This makes it so the first one only shows on devices that are larger than 640px with the other being hidden and vice versa.

You end up with something like this

  <nav class="uk-navbar-container" uk-navbar>
    <div class="uk-navbar-left">
      <a class="uk-navbar-item uk-logo" href="#">Logo</a>
    </div>
    <div class="uk-navbar-right uk-visible@s">
      <ul class="uk-navbar-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li>
          <a href="#">Parent</a>
          <div class="uk-navbar-dropdown">
            <ul class="uk-nav uk-navbar-dropdown-nav">
              <li><a class="uk-nav-header" href="#">Item</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
    <div class="uk-navbar-right uk-hidden@s">
      <ul class="uk-navbar-nav">
        <li class="ad_navicon_toggle"><a href="" uk-icon="icon: menu"></a>
          <div uk-dropdown class="uk-border-rounded">      
            <ul class="uk-nav uk-dropdown-nav">
              <li class="uk-nav-header"><a href="#">Item</a></li>
              <li class="uk-nav-header"><a href="">Item</a></li>
              <li class="uk-nav-header"><a href="">Item</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </nav>

Here is the CodePen if you would like to try it out for yourself

See the Pen UIKit Navbar Mobile by Josh Pasholk (@jpasholk) on CodePen.

That is about as in depth about my navbar as I’d like to get, for now. I ended up included some Liquid logic to loop through links in a data file that I’ll go over in a later post. I plan on turning this into a theme, and I’ve seen a lot of themes do stuff like this to make it easier for people who aren’t great with HTML.

Laying out the home page with sections

Next, I needed to start laying out the wireframe of the homepage. UiKit has a component called Section which nicely lays everything out in a grid.

From their documentation:

Create horizontal layout sections with different background colors and styles.

  <div class="uk-section uk-section-default">
    <div class="uk-container">
      <h3>Section Default</h3>
      <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </div>
        <div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
        </div>
      </div>
    </div>
  </div>

This is pretty much perfect as it already does a bunch of work with padding and margin, etc. I only had to adapt its structure to fit my needs for the homepage. I wanted a large header with an image in the background and text in front. Following that a few more sections for the Projects and Contact pages, and one for the footer.

All in all, it was a fairly quick process, after a bit of troubleshooting I was done with my final layout in about a day of tinkering. Any changes made after that were tiny adjustments or refactoring the code into Jekyll includes or layouts. It took me an additional weekend to figure out the tag logic and another three days or so to implement Algolia search. I will go over those in separate posts at a later date.

CodePen

See the Pen UIKit Sections by Josh Pasholk (@jpasholk) on CodePen.

Thanks for reading

Thanks for stopping by!

I will try and get a post out about once a week or so about my process of building this site and eventually turning it into a theme. There is a lot more to cover and I didn’t want to make this post too big so stay tuned for more updates!

Some things I’ll cover are:

• Looping through blog posts.
• Looping through tags for a tag cloud.
• Using data files for navigation.
• Creating an archive page sorted by tag.
• Integrating Algolia search. (Super cool!)
• Adding an active state to nav items.
• Issues or problems that I can’t seem to solve.

Credit: Cute images provided by Undraw