Code

At one point, I was relying on JavaScript for setting the cookie for my critical path CSS. The issue with that is when JavaScript isn’t available the cookie will not be set. Not a huge deal as the website, would still function.When it comes to Wordpress, it’s not as straight forward as using setcookie in your header.php file or another less than ideal location. In this post I will show you how to set a cookie with Wordpress and use it in your code. The method is very similar to the JavaScript method, with a focus on PHP and Wordpress.

If you’ve ever wanted to place your logo in the centre of your header, between your navigation items, at first it can appear tricky to achieve. You may have been used to an approach that involved setting up, two separate menus, within Wordpress. May you added a link to ‘home’ in between the items in a single menu. Or worse still you used JavaScript to change the position. Each of them have a less than ideal feeling to it. This is where flexbox can really help.

This post is a follow up to a different method for horizontal scrolling navigation which used inline-block. In this post, I want to cover how flexbox can be used to achieve the same thing and the benefits over the inline-block method.

One of the best things about Sass, is the ability to adjust colour nicely and be able to apply that, consistently across, many colours.In this post I’m going to demonstrate, as I have in the past with scale-color. How you can create gradients, that look much more harmonious. Instead of the standard, take the colour and darken it. Using adjust-hue and scale-color we can achieve this.

The great thing about the Wordpress customiser, is it allows you to make editable regions throughout your website. Without giving you too much control, but allowing that, real time, visual focus.You could have much of the functionality, I will show, within the admin panel. However, being able to make the edits in real time, makes decision making, easier. Particularly, with how your text or images display.

One of the frustrating things about the letter-spacing property is the addition of the letter-spacing you apply to the last letter of the text. This is fine when you have left aligned text, however if you right align or centre the text, you’re left with a little bit of space.

I have only recently looked into using the custom meta boxes that come with Wordpress. I’ve been a fan of Advanced Custom Fields for a long time, so it’s something I’ve never had a great urge to use.I’m going share with you over the course of this post how to get them set up. You’ll learn to add them efficiently, how to add custom CSS, change placement to under the title and finally how to use them in your theme.

If you use Wordpress, it’s likely you’ll be familiar with the_post_thumbnail() or one of its variants. In this post I want to provide a way of using srcset with your post thumbnails today. The aim will be to create a similar function, that takes the same parameters and except the output will contain the srcset attribute.

Sass maps can provide some powerful functionality to make life easier and less repetitive. I’ll cover briefly how to use them and then detail some of the cases that I use them, as I don’t think the benefits are immediate.

With blend modes we can apply a vintage style to any image like we would in Photoshop. Blend modes is something I have been looking forward to coming to CSS for a while and this feels like a fitting way for me to share a deeper look at them. You can test them for yourself with the demo at the bottom.

Flexbox is still one of those properties that isn’t quite ready for prime time use. Due to the necessary support of IE 8 and 10. There are some uses of flexbox we can use for ‘free’ without worry of any knock on effects. These are especially handy if we don’t have the time to invest into heavily flexbox based layouts.

If you’re looking for an alternative approach to responsive navigation, which doesn’t involve the ‘hamburger’ this may be for you.