mishelen

@mixin vector-bg-with-fallback($name) {
  background-image: url('#{$public_path}images/#{$name}.png');  
  background-image: none, url('#{$public_path}images/#{$name}.svg');
}

mishelen

/* То что называется Bulletproff @font-face */
@font-face {
   font-family: 'mz';
      src: url('assets/x/font.eot');
      src: url('assets/x/font.eot?#iefix') format('embedded-opentype'),
           url('assets/x/font.woff') format('woff'),
           url('assets/x/font.ttf') format('truetype'),
           url('assets/x/font.svg#mz') format('svg');
   font-weight: 400;
   font-style: normal;

mishelen

/* one item */
li:nth-child(1):nth-last-child(1) {
	width: 100%;
}

/* two items */
li:nth-child(1):nth-last-child(2),
li:nth-child(2):nth-last-child(1) {
	width: 50%;
}

mishelen

.module {
  background: url('logo.png');
  background: none, url('logo.svg');
}

mishelen

/*":after" Pseudo-element

This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.

http://www.positioniseverything.net/easyclearing.html*/
.container {
    display: inline-block;
}
.container:after {
    content: " ";

mishelen

html,body {
  width: 100%;
  height: 100%;
  padding:0;
  margin:0;
}

.container {
  width: 100%;
  height: 100%;

mishelen

.inib,
.ib li, 
.ib_justife li,
.ib_justife:after
{display: inline-block; vertical-align: top; zoom: 1; *display: inline;}

.ib_justife {text-align: justify;}
.ib_justife li {text-align: left;}
.ib_justife:after{width: 100%; height: 0; content: '\00a0';}

mishelen

// This mixin outputs a property with rem units and a px fallback.
// Values passed without units are used as multipliers for the final
// rem and px values, all other units are output without modification.
// $base-font-size represents the root value of the document font-size
// in pixels.
//
// i.e. html { font-size: 100%;} // -> 16px

// Usage:
// @include px-and-rem([property], [multiplier | explicit value] [, ...]);

mishelen

/*HTML всегда занимает всю высоту окна браузера.
Для управления высотой содержимого следует 
определить высоту HTML в CSS height:100%. 
IE игнорирует правило !important и свойство min-height, 
поэтому для него работает height:100%, тогда как 
height:auto !important маскирует в FF и Opera height:100%.*/

html {
  height:100%;
}

mishelen

<!-- background-size-polyfill v0.2.0 | (c) 2012-2013 Louis-Rémi Babé | MIT License -->
<PUBLIC:COMPONENT lightWeight="true">
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="o.init()" />
<PUBLIC:ATTACH EVENT="ondocumentready" ONEVENT="o.init()" />
<PUBLIC:ATTACH EVENT="onpropertychange" ONEVENT="o.handlePropertychange()" />
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="o.restore()" />
<PUBLIC:ATTACH EVENT="onresize" FOR="window" ONEVENT="o.handleResize()" />
<PUBLIC:EVENT NAME="onbackgroundupdate" ID="updateEvent" />
<script type="text/javascript">
var o;!function(a,b){var c=/url\(["']?(.*?)["']?\)/,d=/^\s\s*/,e=/\s\s*$/,f=/\s\s*/g,g=/%$/,h={top:0,left:0,bottom:1,right:1,center:.5},i=a.document,j="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",k="background-size-polyfill",l=function(){},m=100,n,p,q,r;function s(){var b=i.createElement("div"),c=i.createElement("img"),d=b.style,e=a.style,f=a.currentStyle,g=a.bgsExpando,h=a.firstChild;g&&(g.restore&&(e.backgroundImage=g.restore.back