Frontendplace Blog

Sharing Frontend developing ideas

Archive for September, 2012

Sass clearfix version

Posted by info on 12th September 2012

If you want sass to generate the classes to be generated to support “clearfix”  (clearing all the floats of previous content to be sure the element is always rendered at a new clear line). With the newest sass compiler you can use placeholders that are not generated until they are used  and can be extended.

%clearfix {
	zoom: 1;
	&:before,
	&:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0;
	}
	&:after {
	  clear: both;
	}
}
.container {
  @extend %clearfix;
  text-align: left;
}
.footer {
  @extend %clearfix;
  text-align: center;
}

This will generate:

.container, .footer {
  zoom: 1;
}
.container:before, .footer:before, .container:after, .footer:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}
.container:after, .footer:after {
  clear: both;
}
.container {
  text-align: left;
}
.footer {
  text-align: center;
}

Posted in Scripting | Comments Off

Sass Mixin for inline images

Posted by info on 12th September 2012

An inline image is an image that is generated as base64 string inside the stylesheet. But this is not supported by IE6 if you want to support both you can use the * hack for IE6 like this:

@import "compass";
@mixin inline-image($url, $repeat:repeat){
  background: inline-image($url) $repeat;
  *background: image-url($url) $repeat;
}
.facebook {
  width: 34px;
  height: 34px;
  @include inline-image("icons/facebook.png",no-repeat);
}

And generates:
.facebook {
width: 34px;
height: 34px;
background: url(‘data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAFbUlEQVR4XrWXT4hd…’) no-repeat;
*background: url(‘../images/icons/facebook.png?1346742026′) no-repeat;
}

Posted in Scripting | Comments Off

Sass Mixin for background image with retina support

Posted by info on 12th September 2012

Here is an example for a sass stylesheet. to support Retina display images. This example only support .png images where the basename of the image is passed to the mixin as variable.

@mixin retina {
  @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
    @content;
  }
}

@mixin generic-background-image($image) {
	background: image-url("#{$image}.png");
	  @include retina {
	    background: image-url("#{$image}@2X.png");
	}
}

h1 {
	@include generic-background-image("content");
}

This will generate:

h1 {
  background: url('../images/content.png');
}
@media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3 / 2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
  h1 {
    background: url('../images/content@2X.png');
  }
}

Posted in Scripting | Comments Off