ciser/src/_text-align.css

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

/*

  TEXT ALIGN
  Docs: http://tachyons.io/docs/typography/text-align/

  Base
    t = text-align

  Modifiers
    l = left
    r = right
    c = center
    j = justify

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

*/

.tl  { text-align: left; }
.tr  { text-align: right; }
.tc  { text-align: center; }
.tj  { text-align: justify; }

@media screen and (min-width: 30em) {
  .tl-ns  { text-align: left; }
  .tr-ns  { text-align: right; }
  .tc-ns  { text-align: center; }
  .tj-ns  { text-align: justify; }
}

@media screen and (min-width: 30em) and (max-width: 60em) {
  .tl-m  { text-align: left; }
  .tr-m  { text-align: right; }
  .tc-m  { text-align: center; }
  .tj-m  { text-align: justify; }
}

@media screen and (max-width: 60em) and (orientation: landscape) {
  .tl-ml  { text-align: left; }
  .tr-ml  { text-align: right; }
  .tc-ml  { text-align: center; }
  .tj-ml  { text-align: justify; }
}

@media screen and (min-width: 60em) {
  .tl-l  { text-align: left; }
  .tr-l  { text-align: right; }
  .tc-l  { text-align: center; }
  .tj-l  { text-align: justify; }
}