Articles

Welcome To The Blog

A new site, and a brand spanking new blog to go along with it! I’m pretty excited about this!

What to expect

This blog is the natural progression of my existing newsletter, so if you’re a subscriber already, it’ll seem very familiar, just better! For those of you who weren’t subscribers, I’ve been exploring a lot of lesser known and misunderstood CSS properties, as well as some general CSS tips and tricks. I’ve converted a handful of them, so there are some older posts you can go explore right now if you’d like!

The reason I wanted to turn this into a blog, instead of only a newsletter, is because I wanted to:

One of the biggest issues with the newsletter was it was hard to show the results of what I was doing. I’d create a codepen, and then take screenshots of everything and then have to add the images in. Now I can just embed the damn codepen and you guys can see it in action and play with the code!

Read More

writing-mode

So, it turns out doing something like this is super easy:

The Markup

The markup for this is nice and basic, pretty much a parent, with the two children:

<div class="card">
  <div class="card__title">Title here</div>
  <div class="card__body">Lorem ipsum dolor sit amet... </div>
</div>
Read More

Dynamic Text Color With Sass

CSS is awesome and with the addition of Custom Properties and things like calc() it’s really, really powerful. Sass is still a major part of my workflow though. It saves allows me to work faster and be better organized, but this newsletter is about neat tips and tricks and fun little things, so in staying on topic, here is a fun way you can use Sass to dynamically set your font color to ensure high contrast with your background color!

Creating our Sass Function

To do something like this, we need a variable, we need to create our own function, and we also have to use a built in Sass function.

$bg: #000; // my background color

@function text-clr($color) {
  // do something
}

What I’ve done here is created a variable called $bg, and for the moment set it to black. Then I created a function. This function is called text-clr and it accents one argument.

$bg: #000; // my background color

@function text-clr($color) {
  @if (lightness($color) > 50) {
    // do something
  } @else {
    // do something
  }
}

Inside my function, I’ve added an if statement. The lightness($color) will look at my color as an HSL value. HSL is Hue, Saturation, Lightnes. Lightness is a percentage, so 0% is black, 100% and 50% is right dead in the middle. So it’s checking the lightness of whatever color I input in. If the lightness is less than 50, I want it to do something. If it isn’t less than 50, I want to do something else.

$bg: #000; // my background color

@function text-clr($color) {
  @if (lightness($color) > 50) {
    @return #000;
  } @else {
    @return #FFF;
  }
}

So what I’ve told it to do is spit out black if my lightness is greater than 50, and spit out white if my lightness is less than 50. Now that it’s all set up, I can use it.

Using our Sass function

body {
  background: $bg;
  color: text($bg)
}

So I first set my background using my variable, and then I used my custom function to set the color, using that variable that I created for both the background and the color function I created.

Making life easier with a @mixin

And if the idea of having to write out the same colour twice drives you nuts, maybe it’s worth taking 20 seconds to add this mixin:

@mixin dc($color) { // dc is short for dynamic color
  background: $color;
  color: text($color);
}

A Sass mixin allows us to take a block of code that we repeat a lot and store it, to be used anywhere we want. So now:

body {
  @include dc($bg);
}

And that’s it!

If you’d like to see it in action, you can checkout this Codepen.

Now, I’m just using this on my body, and I’m only setting it up using white or black, but you could push this more using brand colours to work nicer, and even push it futher with some other functions instead of lightness(). Even a simple implimentation of this could be amazing for quick mockups, or even simple theming.

Read More

Focus With

The :focus pseudo selector is useful, but it only allows us to style something which has focus directly on it. What if we want to style the parent of the thing with focus?

The common example you’ll find is changing the background, or border, of a form when someone goes inside it:

form:focus-within {
  background: limegreen;
}

With the above code, as soon as someone either clicks or tabs into an input, the background of the entire form will change!

While I think this is awesome, and is something I’m looking at implementing into my site when I redesign it, the perhaps most useful example I’ve come across yet is allowing us to make a CSS only dropdown menu that doesn’t rely on :hover!

Don't want to miss an article?

I share the cool little things I run across (like you're reading in this post right now) every Sunday. Sign up below to never miss a post.

No spam + you can unsub at any time :)

Here is a snippet of how I might use it, go and checkout this Codepen where I put it to use 🙂

.nav__dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  background: white;
}

.nav__list-item:focus-within .nav__dropdown-list {
  display: block;
}

Browser support

As you might have been acustomed to with these emails, browser support is… questionable. So be careful using it. Depending on the usecase though (say, highlighting a form), it can degrade gracefully, but if you’re using it for a dropdown menu you might want to consider JS still. You can also checkout this polyfill.

Read More

I'm always surprised more people don't know this about CSS backgrounds

Maybe it’s because I like playing around with these things, but it always amazes me how few people know that you can set multiple backgrounds on something, and there are some good use cases for it as well!

The background property

So before we really dive into this, I want to make sure that you’re aware that background is a shorthand property for a whole bunch of properties:

We can do a lot with this shorthand, but if you’re handling multiple backgrounds, it can get unweildy, but I could do something like this to set both an image and a color:

body {
  background: black url(//unsplash.it/100/100) no-repeat;
}

Another major issue with this method is, each part of the background shorthand can accept either zero or one argument, so if I wanted multiple background images, I can’t. I would need to do it the long way.

Multiple background images

Here we get our multiple background images working:

body {
  background-color: black;
  background-image: url(//unsplash.it/100/100), url(//unsplash.it/200/200);
  background-repeat: no-repeat;
}

When you do this, the images stack on top of each other, with the first one being on top, and each one after that being one layer down in the stack.

In this case, both will be set to no repeat, but I can actually repeat them individually too:

body {
  background-color: black;
  background-image: url(//unsplash.it/100/100), url(//unsplash.it/200/200);
  background-repeat: repeat-y, repeat-x;
}

By doing this, the first image will repeat along the Y-axis, and the second one along the X-axis.

Blending modes

Probably one of the more useful cases of having multiple images (or an image and a color) is using background-blending-mode to blend them together!

body {
  height: 100vh;
  background-image: linear-gradient(45deg, red, blue), url(//unsplash.it/1200/600);
  background-size: cover;
  background-blend-mode: multiply;
}

Here is a codepen where I set that up, if you’d like to see it in action.

Read More

Sass And Bem Ftw

Hi, last week I mentioned a few Sass features that won me over and had me start using it. One of the others, which keeps me coming back to Sass, is the ampersand, which is sort of like a parent selector. In Sass, you can use nesting, and if you combine it with the ampersand character, it becomes really powerful. For example:

a {
  color: #555;
  &:hover {
    color: red;
    text-decoration: underline;
  }
  &:visited {
    color: purple;
  }
}

That will compile to CSS which look like this:

a {
  color: #555;
}
a:hover {
  color: red;
  text-decoration: underline;
}
a:visited {
  color: purple;
}

The other time it’s awesome is if you use something like the BEM naming convention for your class names, where you’ll have a component, such as a .button, and then you use modifiers to change the color, size, etc:

.button {
  display: inline-block;
  padding: .5em 1.25em;
  text-transform: uppcase;
  &--primary {
    background: $primary;
    color: white;
    &:hover {
      background: $primary-dark;
    }
  }
  &--accent {
    background: $accent;
    color: black;
    &:hover {
      background: $accent-dark;
    }
  }
}

Read More