Building the Blog: Day 1

We’ve got a fresh piece of marble in front of us - it’s time to start chiseling away!

I like that there’s a world of opportunity when designing web pages just as there is in any other art form. I like how two sites can have the same exact HTML structure yet look completely different due to their CSS. That was what influenced me in creating SimpleShowcase a year or so ago. I wanted to explore what the smallest amount of HTML you could have to describe a GitHub project could be while still being an aesthetically pleasing and interesting site because of CSS. Sometimes constraints, even artificial, can help us to be more creative. And sometimes you just have to experiment, finding what works and what you like and taking inspiration from the designs of others.

We start off today by laying out the page.

All code shown today and in the future will be Sass syntax. Sass is a preprocessor for CSS. This means I can write my styling code in a different format than CSS but have it transformed to CSS before it’s sent to your web browser. I find Sass to be more pleasurable to work with than vanilla CSS due to not having to repeat selectors and being easier to read and comprehend what’s going on right away. Beware of nesting, though! Too much nesting and your styles start to take on the shape of your HTML, so if you change your HTML, you’ll likely have to rework or redo your styles.

body {
  margin: 100px auto;
  max-width: 1000px;
}

First, we center the page and add some margin to the top and bottom. We also constrain the width of the page, saying that it will be at most 1000px wide (though it can be smaller if the page size is smaller, say if you’re on a smaller screen). This will make the main content be a little wider than a sheet of paper, much easier to read than if you had to scan your eyes across the entire width of your screen.

.home {
  ul {
    list-style: none;
    padding: 0;
  }

  li time {
    float: right;
    position: relative;
    top: 7px;

    @media screen and (max-width : 768px) {
      display: none;
    }
  }
}

Next we’ll add some layout to the home page. We start by removing the bullet points from the list of posts and removing the left-padding that is added to compensate for those points. Then we move the post dates to the right and down 7px from the top of their parent so that they’re about vertically center with the post title. We also add a media query so that the post date is hidden if you’re browser window is around tablet-size or smaller. 768px is what is recommended for targeting iPads.

We’ve only added a bit of CSS and the blog already has a clean feel to it. Some minimalists might even stop here! But we’ve still much more to go. I’ll see you tomorrow where we’ll be laying out the heading and navigation as well as the post page.