Newer

Code

Older

Ways to get post thumbnails in Wordpress

With Wordpress there are a lot of ways to the same thing, for good reason, sometimes you can’t do it one way or the other. This can make it tricky to remember how to do it for each instance. At least this is the case for me. I want to use this post to serve as a guide for each method of doing so. I won’t be covering their parameters, just the necessary steps to retrieve an image.

How to use JSON-LD to replace Microdata with Wordpress

Part of the website world is making it more accessible to bots. Be it search, social or a service like Instapaper. The reason we do this is so our content looks more appealing and isn’t left up to them, to scrape text and images they think is best. I’ll be showing you how I have done it recently with JSON-LD.

Get up to speed with CSS shapes

I’ve wanted to explore CSS shapes for a little while now and get a good understanding for it. Find potential use cases, strengths and weaknesses. In this post I’m going to cover the level one properties. At the time of writing level two is in the editors draft and looks to be bringing much more power to them.

How to use inline-block for layout

The inline-block layout technique is a really handy one. It has a few advantages over float based layouts. Float based layouts suffer from needing to be cleared and if height varies it can have undesired effects. With inline-block you don’t need to worry about the height or clearing of elements. However, there are still some things to watch out for, which I will cover in this post. As well as provide a grid setup in Sass for you to use in your projects (should you need one).

Enhancing horizontal scrolling with flickity.js

I first wrote a tutorial little while back on horizontal scrolling navigation, with the intention of accommodating only mobile devices. As with every device I have come across, the usability of horizontal scrolling areas is good.

How to: flexible squares with CSS

How do you maintain a perfect square shape with a responsive layout? The solution appears simple; the only issue is your content. Which if you want to maintain a square shape it should be able to accommodate the content. I’ll show you how to do it in with this quick tip.

Browse content efficiently with toggling horizontal scrolling

I was looking through photos in Finder, and I was finding it frustrating to scan many photos quickly. The problem was down to the horizontal scrolling sections; it is quite quick to flick through but it became tedious. I wanted to see more pictures at once, here’s a solution inspired by Finder.

Feature detection with CSS using @supports

Feature detection is a core part of day to day life as someone who makes websites. It’s one of those features I usually hand off to Modernizr. I recently saw a tweet, which spurred the curiosity to see if we’re ready to use the @supports feature query. Now is definitely a good time to start.

Why you should roll your own framework

There are many opinions against rolling your own CSS framework. To the extent, it can make you think, let’s get bootstrap (or another) and see what happens.

I genuinely believe there is no harm in making your own. I started one a couple of years ago and have just got back to it recently (as I have been focused more on designing lately). It isn’t in too bad shape, but it’s made me evaluate it and begin refining it again. There’s value in creating your own if you use it regularly and keep it up to date.

Using Grunticon to inline SVG

Grunticon updated to V2 a while ago now and what came with it was the ability to insert inline SVG. This is great because it can generate the necessary fallbacks and not ruin layout in old browsers with the presence of an <svg> tag. The main benefit of having your SVG inline is it can be easily modified with CSS.

All this is done by running a grunt task. However, if you’re not too familiar with using Grunt, or want to avoid build tools altogether, it’s not possible at this stage. I have wrote previously on an alternative approach, however it doesn’t have the inline SVG benefits.

How to consistently style form elements

One of the trickiest things to deal with cross browser is the styling of form elements. All browsers influence these strictly, but over the years the ‘appearance’ property has been present in WebKit and Blink browsers, and Firefox to help gain some control. More recently it’s been added to Edge.

It is a little more to it than just using this property. I’ll explain the advantages and drawbacks to this and how I handle it. The goal of this post is to give you the base for you to apply your visual style on top of. I will be covering text, button and select elements.

Add critical CSS with wp_enqueue_scripts

Following on nicely from the previous post. One of the things with critical path CSS, is you can’t use wp_enqueue_style. It’s not a huge deal, as the easiest way to get around it is by putting it in your <head> the regular way. Though when you combine that with cookies and <noscript> tags, it can make for quite a messy <head>. Particularly for a Wordpress template, as I have found in the past..

In this post I will show you how to avoid this. It’s similar to the way Wordpress recommends you queue your scripts and styles.

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.