• Break Out Of Containers

    Have you ever been working with a CSS framework and needed a full-width block, but where stuck in a container that you couldn’t close? You can break out of that container using the following code .full-width { //or whatever your class is width: 100vw; position: relative; left: 50%; right: 50%;...


  • Faster Page Loading with Preloading

    With the introduction of preload, you can now tell the browser to start loading resources without blocking the document’s onload event. It loads the resource into cache and holds it there until the document requests it. There is also prefetch, which differs from preload in the priority it’s given. Preload...


  • Pan a background image using CSS

    If you have ever had a background image that you wanted to show more of, consider panning through it using this technique. First we create a simple header - you could mark it up however you wish, however to keep things simple I did <header> <h1>Content</h1> </header> Next for the...


  • Shopify Filter by Sub-Collection

    If you want to have a sub-collection in shopify, there are a few different ways of tackling this. You could use a linkgroup, which has it’s benefits, or you could use the method described here. Step 1. Creating the Collections First you need to have the main collection. In my...


  • How to add a FontAwesome field in the WordPress Customizer

    I won’t go in to the details of the WordPress customizer, you can read them over at https://codex.wordpress.org/Theme_Customization_API This is to showcase how to create a custom control - and in this case, one that lists icons available from FontAwesome. First step is to create the controls $wp_customize->add_setting( 'your_fontawesome_icon_title', array(...