Git automation of site creation

July 9, 2014

Personally I prefer hosting my own git repos. It gives me full control of the pushing and pulling and deployment process. I have for a long time had a way of using git hooks to deploy my sites to my staging server. Today though I finished automation of new site creation. It uses 2 files:…

Read full article

Responsive Sass (SCSS) Mixin

July 2, 2014

There have been many articles posted with very similar ideas to this, I think this combines some of the best concepts I’ve seen from those into one easier to work with idea.   // _mixins.scss @mixin bp($size) { @media (max-width: $size) { @content; } }   // _vars.scss // or whatever sizes you want $large:…

Read full article

WordPress 3.9+ TinyMCE 4.0 syntax for nested styles

June 10, 2014

There isn’t much documentation on how to fix styles for the new WYSIWYG in WordPress. If you’re like me you just had the rug pulled out from underneath you when you were trying to show them how slick your WYSIWYG is when theme_advanced_styles doesn’t work anymore. I was ok with modifying what I had to…

Read full article

HTML Email buttons

April 28, 2014

If you’re looking for a way style your email buttons and make them actually look like buttons you may start to go crazy. The desired effect is to have some amount of padding around the edges usually with rounded corners. Option 1: You save out the button as an image. Pros: Looks the same in…

Read full article

BEM + SASS

April 13, 2014

This concept has been discussed some recently and I have seen people illustrate that in Sass 3.3+ (`gem update sass` if you need the latest) you can use the & to setup BEM blocks, elements and modifiers. Up to this point though I’ve only seen it shown as: .block { &__element { // element styles…

Read full article

Serving up the right image (htaccess + webp)

December 11, 2013

Serving up optimized images based on headers is just a couple lines of code away.

Read full article

Mobile emails

December 3, 2013

So you’ve figured out that you can add media queries to your mobile emails and they work better. Here are a few tips to further improve the layout of your mobile emails.

Read full article

SCSS Sprite

October 4, 2013

Avoid clutter in your SCSS files. %sprite { display: block; overflow: hidden; text-indent: -999em; }   a.sprite { @extend %sprite; } Easy way to cut the file size and reuse common properties.

Read full article

CSS only icons

September 29, 2013

Icons like this Can be achieved using only CSS. The following code gives you the basic structure for the icon. Adding a specific class that you’ve customized will bring it all together. /* CSS ONLY icons Works well in our responsive world */ /* Minimum font size is quickly reached in chrome. */ body {…

Read full article

IE8 SVG fallback

August 12, 2013

I found a way to have an SVG fallback (without Javascript) online and wanted to make it a little easier though I turned it into a mixin.

Read full article