Create Your Own React SVG Icon Component

July 20, 2017

SVG’s are great for a lot of things. They scale nicely, load quickly, and in some cases, you are able to manipulate them with JavaScript and CSS. I’ve been playing with a new ReactJS pet project and wanted to use icons other than my typical go-to, Font Awesome. I found a lovely set that served …

Read More

Pulling Sections Outside of a Centered Container

January 31, 2016

Something that I do often when coding a layout is set a div classed “container” that is the max-width of the layout. I use max-width so that it’s responsive and use auto left and right margins to center it on the page. Sometimes a design calls for a section to be as wide as the …

Read More

Using Sass Mixins to Manage Image Sprites

December 8, 2014

It took me a little longer than others to start using Sass. I just felt like it would add to my time and that I was good enough at CSS to not need any help. Then a little over a year ago I was tasked with picking up where another developer had left off, and …

Read More

CSS Only Item Highlighting

May 7, 2014

This is a quick example of how to highlight items on hover using only CSS. Bonus: click and hold toggle buttons to highlight specified images.

Read More

Animating SVG Icons with CSS

April 12, 2014

I’ve been a fan of icon fonts for a couple of years now. All of the icons you see on my site come from a custom icon font that I made using IcoMoon. I also frequently use Font Awesome, especially for quick prototyping in the browser. You just pop in a link to their CDN …

Read More

Skewed Image Gallery

March 25, 2014

Here’s something I was playing with just for fun. It’s a basic layout with beginning and ending text and a fun skewed images gallery. Check it out!

Read More

What to Do With 1/5 Columns at Smaller Viewports

March 21, 2014

So I was looking at a pretty design for related posts in 5 neat blocks in a row. Normally anything that needs to reduce in columns in narrower viewports, I would just increase the percentage width. So at minimum width, 100%, as we get wider, 50%, and finally at our widest, 20%. But when you …

Read More

1 2 3 4