Code

Exploring CSS, JavaScript and handover techniques. Through building designs I use this to share what I learn

Ways to get post thumbnails in Wordpress
Code

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
Code

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
Code

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: flexible squares with CSS
CSS

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
Code

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
Code

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
Code

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
Code

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 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
CSS

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.