Skip to content

Instantly share code, notes, and snippets.

@anotheruiguy
anotheruiguy / extends-in-libsass.scss
Last active August 29, 2015 13:56
Where extended placeholder selectors go wrong in libsass
// ----
// libsass (v0.7.0)
// ----
// Where extends go wrong in libsass
// In the following placeholder selector, all the selectors are created as
// such using the % syntax
%default-parent {
@anotheruiguy
anotheruiguy / color-diff.md
Last active January 4, 2016 20:29 — forked from KittyGiraudel/SassMeister-input.scss
How to programmatically go from #BADA55 to #B0BCA7"
@anotheruiguy
anotheruiguy / web-images.md
Last active April 13, 2021 18:23
What I learned about images and the web

I admit it, I have a print background. As much as I try to leave that all in the past, it always creeps up and bites me in the ass.

Pixel based image asset management is a mystery to many in print and in the new purely digital world. What constitutes a quality asset file to be reproduced? In print there are clear rules, but in digital display, there are many other variables at play. This post is a description of my journey in finally figuring this out.

The principals of an image

With every image, regardless of intended output, it has three primary attributes; pixel width and height, physical width and height, and dpi. Of course there is color space, color profile and a few others, but that is outside the scope of this discussion.

Images and print

@anotheruiguy
anotheruiguy / node-grunt-sass.md
Last active March 11, 2020 17:07
Set up Node.js, Grunt and Node-Sass from scratch

Run the following steps inside a clean directory

Not sure if you are in the same boat as I, but I could not find any good resource out there that pulled this all together. So here is a step-by-step tutorial for creating a Node.js app from scratch, adding in Grunt and then Node-Sass. Yeah, try and find good docs on Node-Sass alone :(

Hope this is of help!

Create your Node.js project

  • npm init - create a clean node project
  • NOTE: be sure to add "private": true, to the package.json so that your project is not globally distributed as a npm app
@anotheruiguy
anotheruiguy / web-fonts-asset-pipeline.md
Last active May 24, 2023 22:08
Custom Web Fonts and the Rails Asset Pipeline

Web fonts are pretty much all the rage. Using a CDN for font libraries, like TypeKit or Google Fonts, will be a great solution for many projects. For others, this is not an option. Especially when you are creating a custom icon library for your project.

Rails and the asset pipeline are great tools, but Rails has yet to get caught up in the custom web font craze.

As with all things Rails, there is more then one way to skin this cat. There is the recommended way, and then there are the other ways.

The recommended way

Here I will show how to update your Rails project so that you can use the asset pipeline appropriately and resource your files using the common Rails convention.