Skip to Content

My Articles

You need to fix your `line-height`

I’ve been doing some diggin into my audience lately, and the most common issue is one relating to design. So because of that, I’m going to start talking a little bit more about design stuff here, but from the point of view of a developer, since that’s what most of you are. Little tips and tricks that can help you improve your designs, whether it’s small tweaks to work you’re doing, or just for your own personal projects.

In this article, we’re looking at line-height. It’s one of the problems that I see plague pretty much every site I see that didn’t have the direct input of a designer, and it has a massive impact on the aesthtic, and more importantly, the readability of a site.

Sometimes it’s a question of someone just not even bothering with it, but more often, it’s a bad use of it once we’re outside the ‘normal’ or body text. So to help you out, we’ll be looking at:

  • How to pick a good, default line-height for your site
  • Situatons where you need to move away from your default line-height
Read more

transform-style opens up some cool possibilities

I don't do a lot of fancy transitions with CSS. I'm a fan of minimilism in general, so simple layouts with simple effects tend to win me over. Because of this, I haven't spent much time playing with anything 3D related with CSS very much. I've toyed around with persepective a little, but that's about it.

That is, until I saw a tweet (that I've since been unable to refind) that had a cool effect in it. I was intrigued, and tried to replicate it for fun, but I wasn't able to do it until I discovered tranform-style.

Read more

Centering content without a container

Using a .container or .wrapper with a fixed width on it is a popular way to center content on the screen. Something like this:

.container {
  max-width: 1200px;
  margin: 0 auto;
}

It works wonderfully, but now that we have grid, I've stopped creating .container on my site. They aren't needed. It's just extra markup for nothing.

Read more

There is a turn unit in CSS

Following up on my posts inspired by tweets that I come across (front-end dev twitter is amazing for finding little tips and tricks and stuff like I like to post here), here is an amazing thing I came across by none other than Wes Bos:

Read more

A cool trick for checking for the alt attribute

A little while ago I came across this tweet:

I love that idea so much, and had to write up on it.

Let's break down exactly how this is working before we dive into a bit more info on why you might even want to bother with this.

Read more

CSS Scroll snapping just blew me away

CSS seems to be stealing more and more functionality from things we traditionally had to use JavaScript for. This is good because not only does it help performance and reduce dependencies, it also makes our lives easier 😊. It also reduces the barrier of entry for people to make cool and fun websites, which is awesome.

I've been a huge fan of scroll-behaviour: smooth since I discovered it, and in a similar vien I've recently stumbled across scroll snapping and it's pretty incredible, and now that support has dropped on the most recent version of Chrome, I think that it's worth taking a look at it.

Here, is an example of how it works. Try scrolling and see what happens (you'll have to be on a desktop for this, as I mention lower down, browser support hasn't hit mobile yet).

See the Pen CSS Scroll snapping basic example by Kevin (@kevinpowell) on CodePen.

Cool, right?

Read more

CSS Custom Properties in a Sass project

Read more

Using a Sass map for my colors

Last week I took a look at how I chose my color scheme, now for a little insight into how I used it when writing my Sass.

Using my colors

First, I created a variable for all my colors. This was just to make life easier to reference, or make changes to later on:

$primary-color: #EE6352;
$youtube: #D16E8D;
$articles: #FFAC83;
$community: #3F78C9;
$courses: #49C4A3;
$white: #FFF;
$black: #444A51;

$lighten: 5;
$darken: 25;

You'll notice a $lighten and $darken variables there too. That was so I could lighten everything by the same amount, and very quickly change how much I'm lightening or darkening things by.

Read more