First off, RailsConf 2024 is in Detroit in a few weeks, and I'm attending. If you're reading this, it's likely that you know me somehow. My facial hair is likely more gray now, but I hope I'm still recognizable.
While I haven't posted about any site progress, I've been playing with colors/fonts a bit but haven't found anything I'm in love with.
And then CraftCMS v5 was announced so I'm looking into upgrading. I think I'm good except it requires me to upgrade the version of PHP on my server which I'm not looking forward to. If the site's broken, it's probably because I'm in the middle of that.
In the meantime, if you're at RailsConf, I hope we can catch up.
Now it's time to throw away my temporary CSS and start to work on my own. This post will focus on the overall page layout. Mainly having the entire page corresponding to a general width, and the aside area in a column to the right of the main content.
To do this, I did need to make one change to the HTML structure of the page to accommodate the index page, which lists multiple posts.
While the former layout worked fine with a single article, the aside area it wouldn't play nicely. The updated layout makes a bit more sense as you can clearly see that the section area is one column, and the aside is another.
The skip to main content link
I'm blatantly stealing some code from Garett Dimon's site for this. Even copying his comments with a brief change because he included his within his HTML for reasons explained in the comments.
/*
This is the position-related CSS for the "Skip to Content" links. It can be included directly in
the HTML document to ensure that the link isn't rendered within the viewable area and then
abruptly and obtrusively moved off-screen after the CSS loads.
*/
a[href="#main-content"] {
display: inline-block;
position: absolute;
transform: translateY(-300%);
transition: transform 0.3s;
}
/*
This CSS brings the "Skip to Content" link into the viewable area when it's focused. That
way, if someone tabs into the site to navigate via keyboard, they'll see the link and can
interact with it like any other control on the page.
*/
a[href="#main-content"]:focus { transform: translateY(0%); }
Setting up initial variables
Modern CSS finally has the ability for you to setup root level variables that you can reference in other parts of your CSS. I'm just setting up for a light theme right now, but since I do plan to add a dark color scheme, I'm just putting stuff for that in place now so I don't have to go digging for it later.
The three main areas of the page are the header, the main-content, and the footer. Here's the CSS that set's all this up.
body {
background-color: var(--background-color);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
max-width: 89em;
}
/*
This and the max-width above keep the width of the
main content areas from getting too wide. The margin
here centers everything once the max-width is reached.
*/
@media screen and (min-width: 90em) {
body {
margin: 0 auto;
}
}
body > header, #main-content, body > footer {
padding: 0 5vw 0 5vw;
}
/*
I'll pay more attention to the header in a future post.
for now, this grid just spreads it out evenly at the top.
*/
header nav ul {
align-items: center;
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
list-style: none;
margin: 0;
padding: 0;
}
footer {
text-align: center;
}
The main content and aside areas
I found some magic that puts the aside area on the right of the page, but nicely flows it to the bottom on smaller screens.
The css keeps the main contentsection to a column taking 70% of the space. The aside taking 25% leaving a 5% space between the two.
The width calculation is the magic I was referring to. A negative width isn't understood, so it's defaulting to the min-width setting of 70% since it can't get lower than that. When the content is wider than 48em, width is set wide enough that the max-width setting of 100% kicks into gear.
To round things out for now, I'm just using the color and styling I want for my links (at least for the light theme) and put a max-width for my article images so wide images don't break outside the area and throw off my layout!
That's it for this time. I'm not sure right now if I'll focus on the header area, or do something more with the colors or something for next time. Stay tuned.
I was keeping the main-content class on the main element as a hook for my Skip to main content link at the top of the page, but I'll strip all the other classes out for now.
I doubt I really need to wrap my article content with a section element, so I'll drop that, too. Articles are already wrapped within an article element.
The aside content was a sidebar area and that's what it will continue to be. The byline area is text so I'll make that plain p element right now. The Categories heading was an h4 purely for sizing. Semantically, I think that should maybe be a header instead to leave the h1/h2/h3/etc. tags more relevant to the main content area.
That leaves me with main content area looking more like this.
That feels better, but I may want some tweaking there once I start implementing a design.
Article Content
For the article content itself, the broad building blocks are in a template with CraftCMS but what you're reading comes mainly from me typing into a content editor.
<article>
<header>
<h1>-- title --</h1>
</header>
<p>Start of the actual post</p>
<pre><code>A code block</code></pre>
<h3>A subheading</h3>
<p>More content</p>
<div class="metadata">
<time class="text-sm block pb-4" datetime="2024-01-21">21 Jan 2024</time>
in <a href="">--category 1--</a> <a href="">--category 2--</a>
</div>
</article>
Everything's wrapped in an article element which I'll keep as that's exactly what this content is wrapping.
The title is wrapped in both a header and h1 element. I'm not sure if I really need both, but I'm leaving them.
Running my existing content through an accessibility checker, I got some marks against me because I was using h3 tags for the subheadings when it expected h2 in order for the page hierarchy to not be confusing for screen readers. I'll start using h2's from now on and keep them in proper order. It's another instance of me using elements for styling. Other than that, the majority of the content would be img and p elements.
The metadata div is really an article footer. So if the article can have a header, it can have a footer. I'll update that. The time element has some classes on it that I probably copy/pasted from some example. I'll take those out.
That leaves us with this, which is much cleaner.
<article>
<header>
<h1>-- title --</h1>
</header>
<p>Start of the actual post</p>
<pre><code>A code block</code></pre>
<h2>A subheading</h2>
<p>More content</p>
<footer>
<time datetime="2024-01-21">21 Jan 2024</time>
in <a href="">--category 1--</a> <a href="">--category 2--</a>
</footer>
</article>
I think that wraps up what I feel is much better for the HTML layout and structure of the site. I'm skipping at least the search listing page, but it won't be too much different from the home page, just not displaying as much content.
Next up, I'll need to drop the temporary styling I've been using and go to work on the CSS. Initially it will be around layout before I get into fonts/colors.