Utilidades

Las utilidades existen en todo el sitio y como su nombre lo dices son de uso fácil y ayudan a hacer cosas rutinarias de UI en las que no queremos repetir estilos sino heredar.

Las utilidades empiezan SIEMPRE con .u-
Las utilidades se instancian antes de los estilos de componentes

u-left

Flota un elemento a la izquierda

<div class="">
    <div class="u-left u-border">izquierda</div>
</div>

.u-left {
  float: left;
}

u-right

Flota un elemento a la derecha

<div class="">
    <div class="u-right u-border">derecha</div>
</div>

.u-floatRight,
.u-right {
  float: right;
}

u-clearfix

Si estas usando floats, será muy común usar .u-clearfix sobre el padre directo

sin clearfix

<div class="u-border">
    <div class="u-left u-border">izquierda</div>
    <div class="u-right u-border">derecha</div>
</div>

con clearfix

<div class="u-clearfix u-border">
    <div class="u-left u-border">izquierda</div>
    <div class="u-right u-border">derecha</div>
</div>

.u-clearfix {
  zoom: 1;
}
.u-clearfix:before,
.u-clearfix:after {
  content: "";
  display: table;
}
.u-clearfix:after {
  clear: both;
}

.u-uppercase

Coloca los textos en mayusculas

Esto es un texto en mayusculas

.u-uppercase {
  text-transform: uppercase;
}

.u-wrapper

Platzi tiene por lo general contenedores a 1000px pero uno general no es suficiente y ahi es donde u-wrapper brillará

<div>
    <p>Este es el background se una sección importante</p>
    <div class="u-wrapper u-border">Este es el contenido de la sección importante </div>
</div>
<div>
    <p>Este es el background se otra sección importante</p>
    <div class="u-wrapper u-border">Este es el contenido de la sección importante  </div>
</div>

.u-wrapper,
.u-wrapper_A,
.u-wrapper_B {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 15px;
  position: relative;
}

.u-wrapper_A

Es un contenedor orientado a tablets

<div>
    <p>Este es el background se una sección importante</p>
    <div class="u-wrapper_A u-border">Este es el contenido de la sección importante </div>
</div>
<div>
    <p>Este es el background se otra sección importante</p>
    <div class="u-wrapper_A u-border">Este es el contenido de la sección importante  </div>
</div>

.u-wrapper_A {
  max-width: 768px;
}

.u-wrapper_B

Es un contenedor orientado a moviles

<div>
    <p>Este es el background se una sección importante</p>
    <div class="u-wrapper_B u-border">Este es el contenido de la sección importante </div>
</div>
<div>
    <p>Este es el background se otra sección importante</p>
    <div class="u-wrapper_B u-border">Este es el contenido de la sección importante  </div>
</div>

u-verticalCenter + u-verticalContent

<div class="u-verticalCenter u-border" style="height 500px">
    <div class="u-verticalContent u-border">
        contenido centrado verticalment
    </div>
</div>

.u-wrapper_B {
  max-width: 340px;
}
.u-verticalCenter {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: table;
  width: 100%;
}
.u-verticalContent {
  display: table-cell;
  vertical-align: middle;
}

.u-inlineCenter

Coloca a los hijos directos con display inline-block y los alinea verticalmente

<div class="u-inlineCenter">
    <img src="https://static.platzi.com/static/images/logos/platzi_favicon.png">
    <p>platzi :)</p>
</div>

.u-inlineCenter > * {
  vertical-align: middle;
  display: inline-block;
}
.u-textLeft {
  text-align: left;
}
.u-textCenter {
  text-align: center;
}
.u-flexBetween {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.u-flexAround {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: distribute;
  -moz-box-pack: distribute;
  -o-box-pack: distribute;
  -ms-flex-pack: distribute;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}
.u-alignCenter {
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.u-marginLeft {
  margin-left: 0.5em;
}
.u-videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.u-videoSource {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.u-hr {
  border-top-color: #16210b;
}
.u-lightText {
  font-weight: 300;
}
body {
  margin: 0;
}
.u-border {
  border: 1px solid #f00;
}
.u-border .u-border {
  border-color: #00f;
}