Shane Rutter Blog

Tag: css

  • 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.

  • CSS: Useful CSS Selectors

    There is a range of fancy stuff you can do with HTML and CSS but a lot of developers are not aware of the little tricks you can do with CSS which results in developers using alternatives such as JavaScript or PHP when CSS can achieve the same results, sometimes even better as its less code to be written and downloaded by the client.

    Time after time I notice websites which have used JavaScript to achieve something like a menu when most of the time simple CSS selectors such as :hover could have been used resulting in a 100% CSS menu which works the same.

    Here is a must read article which outlines some of those hidden CSS selectors which make development a lot easier and faster. Did you know you could use regular expressions in CSS as I didn’t.

    http://net.tutsplus.com/tutorials/html-css-techniques/the-30-css-selectors-you-must-memorize/

  • Making Internet Explorer development easier

    Internet Explorer (IE) also known to some as Internet Exploder or the worst browser on the internet causes headaches for a lot of us developers. IE has what I would call a lack of tools or features, IE7  lacks the abilities to show images with a alpha channel which is something we take for granted these days, this is just one of many features used on modern websites which us developers have to combat against due to IE limitations.

    The main issue is that people are still using IE7 and IE8 which are very out dated, both of these versions of IE don’t support many of the new technologies meaning us developers have to be careful which normally results in hours of extra time writing code specific for each browser version so that the pages render correctly.

    Thank fully people have realized these issues and have written some JavaScript libraries we can use to try and fix / add features to IE to make development a lot easier.

    HTML5Shiv

    A great library I use often which adds HTML5 support to IE8 and below.

    http://code.google.com/p/html5shiv/

    IE7-JS

    Tries to fix various issues with IE7 so you can spend a considerable amount less making sure your website renders correctly in IE7.

    http://code.google.com/p/ie7-js/