Libreria de utilidades para maquetar

utilidades.css

/*  UTILIDADES
    Clases intercambiables
    que ayudan a la maquetación
***********************************************************************/


/* FORMAS */

.circular {
    border-radius: 50%;
}

/* FLOTADORES */

.flota-derecha {
    float: right;
}

/* TEXTO */

.texto-destacado {
    font-family: Roboto, Ubuntu, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 2.2rem;
    margin-bottom: 4rem;
}
.texto-destacado--peque {
    font-family: Roboto, Ubuntu, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
    line-height: 1.7rem;
    margin-bottom: 4rem;
}
.texto-centrado {
    text-align: center;
}
.texto-centrado li {
    margin: 0 auto;
}
.texto-mini {
    font-size: .8rem;
}
.texto-con-serifa {
    font-family: "Roboto Slab", FreeSerif, "Georgia", "Times New Roman", serif;
}
.texto-sin-serifa {
    font-family: Roboto, Ubuntu, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif;
}
.texto-mayuscula {
    text-transform: uppercase;
}
.texto-delgado {
    font-weight: 300;
}
.texto-iconos {
    font-weight: bold;
    line-height: inherit;
    color: #383c21;
}
.subtitulo {
    font-family: "Roboto Condensed", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
    font-size: 1rem;
    color: #444;
    text-transform: uppercase;
}

/* COLORES */

.fondo-rojo {
    background: #D51834;
    color: #fff;
}
.fondo-rojo a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
.fondo-amarillo {
    background: #D7C000;
    color: #383c21;
}
.fondo-amarillo--claro {
    background: #FBFAF1;
}
.fondo-verde--oscuro {
    background: #383c21;
    color: #fff;
}
.fondo-verde--oscuro a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
.fondo-gris--claro {
    background: #F2F2F2;
}
.fondo-gris--medio {
    background: #333;
    color: #fff;
}
.fondo-gris--medio a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
.fondo-gris--oscuro {
    background: #111;
    color: #fff;
}
.fondo-gris--oscuro a {
    color: #fff;
    border-bottom: 1px solid #fff;
}
[class*="--oscuro"] h1, 
[class*="--oscuro"] h2, 
[class*="--oscuro"] h3, 
[class*="--oscuro"] h4, 
[class*="--oscuro"] h5, 
[class*="--oscuro"] h6, 
[class*="--oscuro"] p,
[class*="--oscuro"] label,
[class*="--oscuro"] li,
[class*="--medio"] h1, 
[class*="--medio"] h2, 
[class*="--medio"] h3, 
[class*="--medio"] h4, 
[class*="--medio"] h5, 
[class*="--medio"] h6,
[class*="--medio"] p,
[class*="--medio"] label,
[class*="--medio"] li {
    color: #fff;
}

/* FILTROS DE COLOR */

[class^="blend"] img {
    mix-blend-mode: luminosity;
}
[class^="blend"]:before {
    position: absolute;
    z-index: 3;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    padding: 0.2em;
    font-size: 14px;
}
[class^="blend"]:after {
    display: block;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-filter: contrast(1.3);
    filter: contrast(1.3);
    mix-blend-mode: hue;
}
[class^="blend"][class*="-dark"] img {
    mix-blend-mode: darken;
}
[class^="blend"][class*="-dark"]:after {
    mix-blend-mode: lighten !important;
}
[class^="blend"][class*="-light"] img {
    mix-blend-mode: lighten;
}
[class^="blend"][class*="-light"]:after {
    mix-blend-mode: darken !important;
}
[class^="blend"][class*="-red"] {
    background: #E50914;
}
[class^="blend"][class*="-red"]:after {
    mix-blend-mode: hard-light;
    -webkit-filter: contrast(0.6) saturate(120%) brightness(1.2);
    filter: contrast(0.6) saturate(120%) brightness(1.2);
}
[class^="blend"][class*="-red"][class*="-dark"]:after {
    mix-blend-mode: lighten !important;
    -webkit-filter: contrast(1.1) !important;
    filter: contrast(1.1) !important;
}
[class^="blend"][class*="-red"][class*="-light"]:after {
    mix-blend-mode: color-dodge !important;
    -webkit-filter: saturate(400%) contrast(1.5);
    filter: saturate(400%) contrast(1.5);
}
[class^="blend"][class*="-red"]:after {
    background: #E50914;
}
[class^="blend"][class*="-red"]:after {
    background: #282581;
}
[class^="blend"][class*="-orange"] {
    background: #FCA300;
}
[class^="blend"][class*="-orange"][class*="-dark"]:after {
    mix-blend-mode: darken !important;
}
[class^="blend"][class*="-orange"][class*="-light"]:after {
    mix-blend-mode: hue !important;
    -webkit-filter: saturate(400%) contrast(1.5);
    filter: saturate(400%) contrast(1.5);
}
[class^="blend"][class*="-orange"]:after {
    background: #FCA300;
}
[class^="blend"][class*="-blue"] {
    background: #0066BF;
}
[class^="blend"][class*="-blue"]:not([class*="-dark"]):not([class*="-light"]):after {
    mix-blend-mode: hard-light;
    -webkit-filter: brightness(0.6);
    filter: brightness(0.6);
}
[class^="blend"][class*="-blue"][class*="-dark"]:after {
    mix-blend-mode: darken !important;
}
[class^="blend"][class*="-blue"]:after {
    background: #0066BF;
}
[class^="blend"][class*="-blue"]:after {
    background: #93EF90;
}
[class^="blend"][class*="-yellow"] {
    background: #FEDD31;
}
[class^="blend"][class*="-yellow"]:not([class*="-dark"]):not([class*="-light"]):after {
    -webkit-filter: brightness(3.5);
    filter: brightness(3.5);
    mix-blend-mode: soft-light;
}
[class^="blend"][class*="-yellow"][class*="-dark"]:after {
    mix-blend-mode: color-dodge !important;
    -webkit-filter: hue-rotate(70deg);
    filter: hue-rotate(70deg);
}
[class^="blend"][class*="-yellow"][class*="-light"] {
    background: #000000;
}
[class^="blend"][class*="-yellow"][class*="-light"]:after {
    mix-blend-mode: color !important;
    -webkit-filter: brightness(3) hue-rotate(93deg) contrast(2) saturate(150);
    filter: brightness(3) hue-rotate(93deg) contrast(2) saturate(150);
}
[class^="blend"][class*="-yellow"]:after {
    background: #FEDD31;
}
[class^="blend"][class*="-yellow"]:after {
    background: #EF3CB4;
}
[class^="blend"][class*="-purple"] {
    background: #BC6D14;
}
[class^="blend"][class*="-purple"]:not([class*="-dark"]):not([class*="-light"]) {
    background: rebeccapurple;
}
[class^="blend"][class*="-purple"]:not([class*="-dark"]):not([class*="-light"]):after {
    mix-blend-mode: darken !important;
}
[class^="blend"][class*="-purple"][class*="-dark"] {
    background: #B10AFF;
}
[class^="blend"][class*="-purple"][class*="-dark"]:after {
    mix-blend-mode: soft-light !important;
    -webkit-filter: saturate(100);
    filter: saturate(100);
}
[class^="blend"][class*="-purple"][class*="-light"]:after {
    background: #A37FC7;
    -webkit-filter: saturate(520%) brightness(10.5) contrast(350) !important;
    filter: saturate(520%) brightness(10.5) contrast(350) !important;
}
[class^="blend"][class*="-purple"]:after {
    background: #BC6D14;
}
[class^="blend"][class*="-purple"]:after {
    background: #ACFCEE;
}
[class^="blend"][class*="-green"] {
    background: #11C966;
}
[class^="blend"][class*="-green"]:not([class*="-dark"]):not([class*="-light"]):after {
    mix-blend-mode: soft-light;
}
[class^="blend"][class*="-green"][class*="-light"]:after {
    mix-blend-mode: color-dodge !important;
    -webkit-filter: saturate(100%) brightness(0.8) contrast(160%);
    filter: saturate(100%) brightness(0.8) contrast(160%);
}
[class^="blend"][class*="-green"]:after {
    background: #11C966;
}
[class^="blend"][class*="-green"]:after {
    background: #2D3181;
}
[class^="blend"][class*="-pink"] {
    background: #EA4C89;
}
[class^="blend"][class*="-pink"][class*="-dark"]:after {
    background: #1D0E14;
}
[class^="blend"][class*="-pink"][class*="-light"]:after {
    background: #FF468D;
    mix-blend-mode: lighten !important;
    -webkit-filter: contrast(1) saturate(250%) !important;
    filter: contrast(1) saturate(250%) !important;
}
[class^="blend"][class*="-pink"]:after {
    background: #EA4C89;
}
[class^="blend"][class*="-pink"]:after {
    background: #EA4C89;
}
[class^="blend"][class*="-blue-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
    background: linear-gradient(to top left, #55ACEE, #FEDD31);
}
[class^="blend"][class*="-blue-yellow"][class*="-dark"]:after {
    mix-blend-mode: hard-light !important;
}
[class^="blend"][class*="-blue-yellow"][class*="-light"]:after {
    mix-blend-mode: hard-light !important;
    -webkit-filter: none;
    filter: none;
}
[class^="blend"][class*="-blue-yellow"]:after {
    background: linear-gradient(to top left, #55ACEE, #FEDD31) !important;
}
[class^="blend"][class*="-pink-yellow"]:not([class*="-dark"]):not([class*="-light"]) {
    background: linear-gradient(to bottom right, #FAA6FB, #FBBC05) !important;
}
[class^="blend"][class*="-pink-yellow"][class*="-dark"]:after {
    mix-blend-mode: hue !important;
    -webkit-filter: none !important;
    filter: none !important;
}
[class^="blend"][class*="-pink-yellow"][class*="-light"]:after {
    mix-blend-mode: hard-light !important;
    -webkit-filter: none !important;
    filter: none !important;
}
[class^="blend"][class*="-pink-yellow"]:after {
    background: linear-gradient(to top left, #FAA6FB, #FBBC05) !important;
}
[class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]) {
    background: linear-gradient(to bottom right, #3993E2, #E2544B);
}
[class^="blend"][class*="-red-blue"]:not([class*="-dark"]):not([class*="-light"]):after {
    -webkit-filter: none;
    filter: none;
    mix-blend-mode: hard-light;
}
[class^="blend"][class*="-red-blue"][class*="-dark"]:after {
    mix-blend-mode: hard-light !important;
    -webkit-filter: none !important;
    filter: none !important;
}
[class^="blend"][class*="-red-blue"][class*="-light"]:after {
    mix-blend-mode: screen !important;
    -webkit-filter: saturate(300%) brightness(1.2) !important;
    filter: saturate(300%) brightness(1.2) !important;
}
[class^="blend"][class*="-red-blue"]:after {
    background: linear-gradient(to bottom right, #3993E2, #E2544B);
}

/* DECORACIÓN PARA LISTAS */

.lista--entre-lineas li {
    width: 80%;
    border-bottom: 1px solid #ccc;
    padding: .5rem 0;
}
.lista--entre-lineas li:last-child {
    border-bottom: none;
}
.lista--simple, .lista--simple ul {
    list-style: none;
    margin-left: 0;
}

/* BORDES */

.tiene-borde--arriba {
    border: none;
    border-top: 1px solid rgba(10, 10, 10, 0.25);
}
.tiene-borde--abajo {
    border: none;
    border-bottom: 1px solid rgba(10, 10, 10, 0.25);
}
.tiene-borde--izquierda {
    border: none;
    border-left: 1px solid rgba(10, 10, 10, 0.25);
}
.tiene-borde--derecha {
    border: none;
    border-right: 1px solid rgba(10, 10, 10, 0.25);
}
.sin-borde {
    border: none;
}

/* RESEST DE MÁRGENES */

.sin-margen {
    margin: 0;
}
.sin-margen--arriba {
    margin-top: 0;
}
.sin-margen--abajo {
    margin-bottom: 0;
}
.sin-margen--izquierdo {
    margin-left: 0;
}
.sin-margen--derecho {
    margin-right: 0;
}

/* RESET DE RELLENOS */

.sin-relleno {
    padding: 0;
}
.sin-relleno--arriba {
    padding-top: 0;
}
.sin-relleno--abajo {
    padding-bottom: 0;
}
.sin-relleno--izquierdo {
    padding-left: 0;
}
.sin-relleno--derecho {
    padding-right: 0;
}