Articles

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

Picking colors

Creating a color scheme can be a pain in the ass. A lot of ‘color scheme’ websites, such as Adobe color and coolors give you 5 colors. My general advice is always to start with only three colors:

This is by far the easiest way to start with a color scheme which will always look nice. As far as the dark one, try to avoid pure black, but instead go with a really dark color, like I did with my text on this site.

Read More

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!

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!

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!

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:

Read More