ciser/src/_floats.css

Functional CSS, help quickly build and design new UI without writing css.

/*

   FLOATS
   http://tachyons.io/docs/layout/floats/

   1. Floated elements are automatically rendered as block level elements.
      Setting floats to display inline will fix the double margin bug in
      ie6. You know... just in case.

   2. Don't forget to clearfix your floats with .cf

   Base:
     f = float

   Modifiers:
     l = left
     r = right
     n = none

   Media Query Extensions:
     -ns = not-small
     -m  = medium       -ml = mobile landscape
     -l  = large

*/



.fl { float: left;  _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }

@media screen and (min-width: 30em) {
  .fl-ns { float: left; _display: inline; }
  .fr-ns { float: right; _display: inline; }
  .fn-ns { float: none; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .fl-m { float: left; _display: inline; }
  .fr-m { float: right; _display: inline; }
  .fn-m { float: none; }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .fl-ml { float: left; _display: inline; }
  .fr-ml { float: right; _display: inline; }
  .fn-ml { float: none; }
}

@media screen and (min-width: 60em) {
  .fl-l { float: left; _display: inline; }
  .fr-l { float: right; _display: inline; }
  .fn-l { float: none; }
}