Layouts

I muse about using CSS Grid to make the layout for the blog. I then muse about how the layout can influence content.

July 14 2020, by Karl Oscar Weber,


Hi Friends,

Today I'll be talking about layouts. I've been doing layouts for a loooooong time. Like ten years. fer reals. For most of that time I've used float based layouts. Basically, tricking block level elements into acting like inline elements to run into each other like boba tea. It was rough. I was actually doing some layouts in floats a couple of months ago when I finally had enough.

Float based layout sucks so bad. I don't even want to get into it. So I decided to modernize. I picked up this book on CSS Grid layout and consumed it post haste. I quickly became acquainted with grid layout and it's pretty great. CSS Grid allows you to name sections of a grid, and have content flow over it. It does a lot more but that's the part that I'm excited about right now.

Every webpage can be composed by combining just a few layouts. Let's look at some common layouts that we see on the web.

The Centered Layout

The Centered Layout, is the most common layout on all of the web. Content naturally flows from top to bottom, so let's keep that content in the center.

The Header with Content Layout

The Header with Content Layout, Everybody needs something up top! Headers are the basic UI of the Web. It probably follows this pattern from the menu interfaces we have in all our windows on our computers. The scroll is the most important interaction on the web, and thusly header content disappears as it's scrolled away. Titles, menus, signposts, all can be found up top in the header.

Sometimes headers stick around when you scroll. That's cool.

The Sidebar Layout

The Sidebar Layout, Sites that put content on the side usually have a lot of content. Sidebars are used for quick and immediate navigation, usually in a site that you'll want an index around to help you find your way. Documentation sites use the sidebar pattern for a good reason, You're often jumping around when reading documentation.

The Sandwhich Layout

The Sandwhich Layout, The good ol Sandwhich. Sites that have a header and a footer use this layout. Also Screen takover modals use this pattern. The header is usally a title or a small menu, the footer an action bar. Usually a save or cancel button is down there. Methinks this pattern

So these are the layouts. They are good, everybody loves them. I love them. Honestly that's what matters. But how do we get them into the website? How do we get the content to look like that. Lately I've been using CSS Grid. Which is pretty easy,

CSS Grid

You make a Grid out of CSS. CSS Grids have an area that are divided up by lines to make tracks. Tracks are like the rows or columns of the thing. It looks like this:

An example of a grid, in CSS.

yeah soo..... You can see some lines, you can see some squares. It looks fine and dandy. But what really makes it cool is that you can choose how big or small each area in the grid is. You can make them assymettrical, oblong, or weird. It's all arbitrary. You usually see a grid that looks more like this:

An example of a 12 column grid.

Grids usually have Gutters and stuff. But whatever, these examples don't.

CSS Grid is, well, CSS. Which means you can redefine the grid at different viewport sizes with Media Queries. A small screen needs fewer columns, or maybe the columns that you defined before can be different? you can do just about anything. The most interesting thing to me is that you can set Grid Areas in your grid by naming them. Names like, sidebar, main, header, footer. Giving an element a simple attribute of that grid area magically puts it into that spot. It's wild.

Let's not get too technical, I want to talk about the intention behind the grids I'm using.

Telling stories

I guess that's the point of a blog. Remember when they didn't need to have some marketing purpose behind them? when you could just write about your cats, or lack of cats, or your dog, and people would read that? I want to get back to that. I have lots of cat/dog anxiety to share. I wanna write unimportant things about Animal Crossing. I bought Tania a copy and she's been playing it everyday, like it's a dedicated important thing. My kids stole my switch to play it, now I just longingly look over at what they're decorating my house with. I swear this one little game will force me to buy 5 Nintendos, We have 3 kids and every single one wants to play. It's not a game you can share. We just bought another Switch for my son, who is 7. It's working Nintendo, we get it, ya no mas.

Or maybe stories about what we're doing during the pandemic? That's the hot topic. We're all stuck inside, our joint grief/depression/anxiety is the big common thread in our lives now...... yeah maybe not.

Black lives matter is really important right now. I say that in a slightly sarcastic tone because they have always been important, but the systemic racism, oppression, and brutality has reached a boiling point. These protests are actually great. Keep them up. Tear the whole system down. Send the wire, make the hire. Maybe stories about the role that capitalism has played in using Racism as a tool to divide the working class so that they'll hate each other for no good reason. Keep us distracted from the real bad guys, greedy people. Calling out racism and oppression will become the norm on the blog, rest assured.

Educating

I'm working on one of those fancy course thingys but decided to just included it as a premium section on my website rather than spin up a separate brand/website thingy. Much easier to keep one thing going than two things going, in my experience.

Education requires, like, reference, and signposts, and clarity of concepts. How does the layout influence this? It's not ALL just layout there's other stuff too, but how does layout help to influence it? 🤔.

So What I've decided to do is have 2 main layouts for the website, Story Layout, and Course Layout. Blog Posts, tutorials, stories, These will use the story layout. It look this:

A figure of my story layout. A single column layout, with a footer.

It's got a single column, and a footer, and not much else. I like it! yay!

Next is what I call the course layout:

The course layout, a header, sidebar, main content, and sometimes a video up top.

The minty green is navigation. Courses, books, references, tutorials, how-tos, all of these require quick and comprehensive navigation between disparate sections as part of a collective whole. I'm working on rewriting and publishing my Swift Foundations book on my website. So this would be perfect. I want to offer premium content for making iPhone apps, video courses with accompanying text, so I've got this cute little video box above text. I really like it.

So I've got the layouts, now to implement them in fancy code stuff. This is all of the code for the sidebar sandwhich layout:

.gw_sandwhich_sidebar {
  display: grid;
  max-width: 1600px;
  grid-column: minmax(120px, 240px) auto;
  grid-row:auto auto auto;
  grid-column-gap:1em;
  grid-row-gap: 0.5em;

  grid-template-columns: minmax(180px, auto) auto;

  grid-template-areas:
  "header header header"
  "sidebar content content"
  ". footer footer"
  ;
}
.gw_sandwhich_sidebar__header {
  display: block;
  width: auto;
  grid-area: header;
}
.gw_sandwhich_sidebar__sidebar {
  display: block;
  width: auto;
  grid-area: sidebar;
  box-sizing: border-box;
  padding-left: var(--step-0);
  padding-right: var(--step-0);
}
.gw_sandwhich_sidebar__content_wrapper {
  display: block;
  width: auto;
  grid-area: content;
}

.gw_sandwhich_sidebar__footer {
  display: block;
  width: auto;
  grid-area: footer;
}

@media screen and (max-width: 640px) {
  .gw_sandwhich_sidebar {
    grid-template-areas:
    "header"
    "sidebar"
    "content"
    "footer"
    ;
  }
  .gw_sandwhich_sidebar__sidebar {
    padding-left: var(--size-large);
    padding-right: var(--size-large);
  }
}

As you can tell, it's sufficciently over engineered to use CSS Grid, but it works nice. and as you can see on the website, The layout is just fantastic.

I'm confident that I"m probably over thinking the layout in Grid a little bit and can simplify it even more, but I'll wait to do that until later. Most of these layouts are coded and complete, now time to ship it, tweak it, and move on.