Shane Rutter Blog

Category: Frontend

  • Inline CSS for better emails

    Inline CSS for better emails

    The technology behind your next fancy email is so outdated! Limited by HTML and CSS from 5+ years ago it can be a pain getting your email to work and look correctly in all email clients. Not only do you have HTML and CSS version limitations, but the email client also itself have various limitations, for example Yahoo can sometimes strip out any CSS you include in the head of the email via the <style> tags!

    Came across this cool tool from Campaign Monitor, which will take your HTML email and inline all your CSS, so certain email clients don’t strip your styling from the head! Give it a shot and let me know how you get on.

    https://www.campaignmonitor.com/resources/tools/css-inliner/

  • Flexbox Interactive Cheatsheet

    Flexbox is a great new tool we can fit into the web development toolkit, with Bootstrap 4 and other frameworks moving across to flexbox, it is becoming more important to start learning it.

    Found this great cheat sheet which has interactive demos / explanations, there is plenty other resources out there, but I find this one easy to quickly get my bearings if the brain freezes!

    https://yoksel.github.io/flex-cheatsheet/

  • Cool CSS3 Animated Weather Icons using CSS3

    Cool CSS3 Animated Weather Icons using CSS3

    Lately I have been working on a full screen office dashboard project which is going to be shown on various 50″ screens throughout an office space, wanted to add some basic information such as weather! Came across this cool CSS3 written animated weather icons.

    Give it a look and thank you to the author

    https://codemyui.com/animated-weather-icons-in-css/

  • Twitter Bootstrap 3 Media Queries

    Some useful bootstrap 3 media queries for both mobile first and non mobile first development styles, to make modifications to your front end simplier and follow the bootstrap 3 standard breakpoints.

    Origional article can be found here.

    Min-Width: Refers to everything greater than or equal to the amount given.
    Max-Width: Refers to everything less than or equal to the amount given.