caycefischer

<div class="nav">
  <li class="box"><a href="">One</a></li>
  <li class="box"><a href="">Two</a></li>
  <li class="box"><a href="">Three</a></li>
</div>

fmal

// Still need to work out how to combine rules for numbers
// that share a greatest common factor without the unit-builder
// actually containing the fraction to which they can both be
// reduced.

// Calculate the greatest common factor of two integers
@function gcf($a, $b) {
    @if $b == 0 {
        @return $a;
    }

daneden

/* CSS Photo Album */
/* Rebound of this shot by @daryl: http://drbl.in/fwwM */

* {
	margin: 0;
	padding: 0;
	position: relative;
	box-sizing: border-box;
}

MoOx

  //...
  $background: null; // if you don't do this, background is undefined out of the @if/else scope
  @if ($direction) {
    $background: linear-gradient($direction, $color, $color2);
  }
  @else {
    $background: linear-gradient($color, $color2);
  }
  //...
  

blackfalcon

Sprites are a pain in the ass, we all know that. And with a recent reminder of Google's Bootstrap I am once again reminded of the horrible ways that people solve problems.

It's funny to me. We are reminded again and again that universal selectors are bad. We as UI devs are beat over the head time and time again that CSS performance is key. As shown in the wildly popular deck by Jon Rohan, [unqualified selectors][css-deck] are only second in the list of no-no's behind universal selectors. But yet we see them all over the place. Do what we say, but not as we do is the world we live in.

In Google's Bootstrap we see the following icon code, [class^="icon-"], [class*=" icon-"] is the selector? Really?

[class^="icon-"], [class*=" icon-"] { <-- WTF?!
display: inline-block;
width: 14px;

blackfalcon

by Dale Sande

Icon-fonts. They are pretty awesome, but much like managing Sprite files, there are issues that make them a real pain to manage. Sure there are full libraries out there that you can grab wholesale and rely on their documentation, but for optimization and performance reasons you do not want to load up a series of libraries just to use a few icons. Leveraging the power of HAML and Sass we can make this less painful and at the same time maintain a living style guide. Basically, winning all over the place.

[IcoMoon][IcoMoon] is a fantastic resource that allows users to select specific icons from various libraries, as well as upload custom SVG art and download a customized font library. In the download package there is an HTML document that illustrates the library you just created, but for most professional applications this isn't going to work. Mainly because you will probably not use IcoMoon's code verbatim. Customizing the HTML and CSS per your use is ve

LeaVerou

/* CSSConf gradient */

html {
	background: #e6e6e6;
	height: 100%;
}

body {
	position: relative;
	width: 800px;

thelibrarian

The Problem

If you have installed the standalone Command Line Tools for XCode on your Mac (i.e. without having XCode.app installed), some of these tools can get a bit confused due to a couple of oversights on Apple's part in finalising the setup.

Note: all commands below will need to be run from an Administrator account, or by an account with appropriate permission in /etc/sudoers.

The Solution

1. Failing to Find Frameworks

Sometime when compiling against the preinstalled Frameworks (e.g. Ruby or Python), various tools will inexplicable fail to find header files that are quite clearly there. This is caused by the fact that no XCode has been selected for the command-line tools. Wait, I hear you cry, I don't have XCode installed! Indeed, but you nonetheless need to select one, and point it somewhere where the command line tools exist, like so

stuartsierra

#!/usr/bin/env bash

# fresh-chrome
#
# Use this script on OS X to launch a new instance of Google Chrome
# with its own empty cache, cookies, and user configuration.
#
# The first time you run this script, it will launch a new Google
# Chrome instance with a permanent user-data directory, which you can
# customize below. Perform any initial setup you want to keep on every

joaocunha

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

1. Set -moz-appearance to none. This will "reset" the styling of the element;
2. Set text-indent to 0.01px. This will "push" the text a tiny bit^[1] to the right;