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🔥 Did you know CSS has a `turn` unit? It’s often easier to turn something `rotate(0.75turn)` instead of doing the math to `rotate(270deg)`
— Wes Bos (@wesbos) August 20, 2018
A little while ago I came across this tweet:
Include this #CSS rule in your styles and ensure every image tag includes an #alt attribute or things will look pretty dark for you 😉 pic.twitter.com/lCmNpxzXAo
— Juan Herrera 🇨🇴 (@jdjuan) July 26, 2018
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 moreCSS 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 moreLast 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.
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.
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 moreA new site, and a brand spanking new blog to go along with it! I'm pretty excited about this!
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 moreSo, it turns out doing something like this is super easy:
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>