Articles

The ::first-letter pseudo-element

I can’t figure out why I don’t see more use of ::first-letter other than people not knowing about it. Things like drop caps and initial letters are super common print, and have been forever. There are a few places I see it pop up on the web, but it’s far and few between.

And while there is the possibility of an initial-letter property (it’s partially supported by Safari at the time of writing), we can pull off the effect we need with the ::first-letter pseudo-element really easily.

Read More

The Do's and Don'ts of letter-spacing

Another week, another article about something design related! If you missed the past few, I strongly suggest checking them out, as these little things can make a big impact on your overall design. And, have you noticed that they’re all typography related?

People don’t give typography enough credit! I’ll save the rest of that rant for another day though. For the time being, let’s look into what you should, and shouldn’t, use letter-spacing for on the web.

Read More

Using a typographic scale

Continuing my look at design tips that can help out front-end devs a little, one issue that I see cropping up often is a lack of contrast with font sizes. And by contrast, often I’ll see some color differences or something simple, but almost all the font sizes are the same, or there is no flow or rythm to the design. Having a typographic scale can help with this.

There are a lot of very in-depth and, sometimes overly complicated examinations of using a modular scale on the web. It can find it’s way into line-height, and even your padding and margins. It can reach into all aspects of your design, and for those who aren’t already knowledeable on the subject, it can be overwhelming. If you want to get deeper into the design world, it’s probably worth exploring. But if you’re a dev who just wants to make their site look a little better, you don’t have to go crazy.

Here, I’m going to look at the simple basics of it by looking at:

Read More

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:

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 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

Last week I took a look at how I set up a Sass map, to use my colors on my site, and I teased you a bit about how I went and set up some CSS custom properties.

Sidenote: If you’re not familiar with CSS custom properties (commonly referred to as CSS variables), you can check out my YouTube series on them, which I think is a nice introduction to them (as I would, 😊)!

Why I wanted to use CSS custom properties

Since you’re on my site, you might have noticed that each “section” or page uses it’s own color, and that color is unique to that design. It’s used for the headers links and button colors.

The setup

So instead of having to declare a different value everywhere, I set up this to start with:

:root {
  --main: #{clr(neutral)}; // placeholder
}

I set this neutral color as a placeholder, so that if I forget to use it somewhere, or I create a new page, this will be the default anywhere I use --main.

You’ll notice that I had to use interpolation where I decaled my --main: #{clr(neutral)}. This took me a little while to figure out, as without it, it would spit out clr(neutral) as the color in my compiled CSS, and not the actual color I wanted (if you aren’t familiar with interpolation, it’s just wrapping something in sass with #{ ... } so that it will interpolate the value inside to what you need). If you were using it with just a normal color value here, it wouldn’t be an issue, but because I wanted to use my map function, it wouldn’t work without this.

How I used it on my site

Each page of mine has it’s own class on the body so that I can easily select it. Then, all I have to do is this:

.youtube {
  --main: #{clr(yt)};
}

.article,
.articles {
  --main: #{clr(articles)};
}

.community {
  --main: #{clr(com)};
}

.courses {
  --main: #{clr(course)};
}

The real benefit here is being able to reduce the amount of code that I write, as for all my styles, the headers, links, and a few other elements, I just have to set their color or background to var(--main). For example:

.hero__title,
.section__title {
  color: var(--main);
}

As I mentioned, I also used this on my links and some other elements. Then, by changing the color of --main for each page, the color cascades throughout that page.

Other ways of using this

There are a ton of ways that this can be used other than themeing individual pages. It can be used for themeing sites, or, as I’m going to look at in a future post, themeing individual components on a site. All of it let’s you write a lot less code if you set things up well, and in reality you don’t have to do it with Sass. I used Sass because it’s a big part of my workflow, but I’m starting to use CSS variables more and more, and I’m loving them more every time I do :).

Read More