andi1984

@-ms-viewport{width:device-width}

andi1984

#!/usr/bin/sh

rm -rf $HOME/Library/Preferences/WebIde*
rm -rf $HOME/Library/Caches/WebIde*
rm -rf $HOME/Library/Application Support/WebIde*
rm -rf $HOME/Library/Logs/WebIde*

andi1984

img.grayscale.disabled {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}

andi1984

Floating Labels

Click the field and the label will scale down and move up. Looks fancy and more importantly the fields expected value is still crystal clear to the user.

Resources:

• https://github.com/jverdi/JVFloatLabeledTextField
• http://littlebigdetails.com/post/82478225432/circleci-once-activated-the-input-placeholders

A Pen by Rik Schennink on CodePen.

andi1984

$base-font-size: 	16px;
$base-line-height: 	1.5;

// this value may vary for each font
// unitless value relative to 1em
$cap-height: 		0.68;


@mixin baseline($font-size, $scale: 2) {

andi1984

@mixin triangle($direction:up, $hypotenuse-width:20px, $color:black) {
  $triangle-border-width: $hypotenuse-width/2;
  $triangleSettings: (
    up: (
      border-left: $triangle-border-width solid transparent,
      border-right: $triangle-border-width solid transparent,
      border-bottom: $triangle-border-width solid $color,
    ),
    right: (
      border-top: $triangle-border-width solid transparent,

andi1984

// Brightness math based on:
//   http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx

$red-magic-number: 241;
$green-magic-number: 691;
$blue-magic-number: 68;
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number;

@function brightness($color) {
  // Extract color components

andi1984

// Add percentage of white to a color
@function tint($color, $percent){
  @return mix(white, $color, $percent);
}

// Add percentage of black to a color
@function shade($color, $percent){
  @return mix(black, $color, $percent);
}

andi1984

@import "compass/css3";
@function relativeLuminance($color) {
  @return 0.2126 * red($color)/255.0 + 
          0.7152 * green($color)/255.0 +
          0.0722 * blue($color)/255.0;
}

@function contrast($color1,$color2) {
  $luminance1: relativeLuminance($color1);
  $luminance2: relativeLuminance($color2);

andi1984

Animated Navicons

Expanding on the work of Bennet Feeley http://codepen.io/bennettfeely/details/twbyA

Forked from Hugo Darby-Brown's Pen Animated Navicons .

A Pen by Secret Sam on CodePen.

License.