Skip to content

Instantly share code, notes, and snippets.

@ericponto
ericponto / responsive-less-grid.less
Last active December 16, 2015 23:39
Simple responsive grid using LESS generated by looping through the number of columns.
/* VARS */
@grid-columns: 12;
@grid-padding: 1em;
@grid-breakpoint: 45em;
/* MIXINS */
.box-sizing() {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@ericponto
ericponto / nth-child-ranges
Created May 13, 2013 03:02
Simple uses of :nth-child to select ranges.
/* the 3rd one */
li:nth-child(3) {}
/* the 3rd and up */
li:nth-child(n+3) {}
/* up to the 3rd */
li:nth-child(-n+3) {}
/* the 3rd up to the 7th */
First, I have to come clean. When [Scott tweeted about wanting a web app version of Grunticon](https://twitter.com/scottjehl/status/345618924219539458) a couple of weeks ago, I had never used Grunticon. Actually, still to this day I've never used Grunticon. Shocking...I know.
Of course, I had heard of it. I am a big proponent of using Grunt and use it everywhere to help automate my life. And I follow enough people on Twitter/read enough blogs/listen to enough podcast to have gotten ample exposure to Grunticon and it sounded really cool. So when I saw Scott's tweet I took to action.
Before reading on, if you're not familiar with [Grunticon](http://filamentgroup.com/lab/grunticon/) or [Grumpicon](http://www.grumpicon.com/), check those out first.
Here are kind of the steps on how Grumpicon works:
1. Handle drag and dropped SVG files
2. Read the SVGs