Core.css

📌 Introducción

Hoja de estilos basada en flexbox para maquetar estructuras flexibles

Maquetando con flexbox las hojas de estilos se tornan extensas, el parent aquiere propiedades fle, y los child de los child también requieren propiedades flex, esto ocasiona redundancia del código, sumado al hecho de que resulta complicado de entender.

core.css define todas las propiedades flexibles necesarias en un único archivo de css o sass, todas las propiedades son hackeables, pudes modificar la hoja de estilos a tu preferencia, core.css es libre y siempre lo será.

Implementación

CSS

Localizar en el repositorio: css/core.css

<link rel="stylesheet" href="core.css" media="screen" />

SASS

Localizar en el repositorio: sass/core.scss

import "../sass/core.scss";

✔️ Básicos

Aplicar core.css es realmente sencillo el contenedor padre deberá contar con la clase .flex, a partir de ellos los siguientes clases podrán aplicarse.

Importante: No afecta al comportamiento de otras hojas de estilos.

.flex

<html>
  <head>
    <!-- Contenido -->
  </head>
  <body>
    <div class="flex">
      <!-- Listo, puedes utilizar cualquier clase de core.css -->
    </div>
  </body>
</html>

.container

El contenedor es un componente cuya función es cubrir el 90% del ancho de pantalla o un máximo de 1440px y en móviles < 576px ocupará el 92% del ancho de la pantalla.

Por lo general todas las librerías utilizan un contenedor, su función es agrupar elementos en determinado espacio con el fin de asegurar un área segura que garantize que todos los elementos dentro de un contenedor no sean desproporcionales entre las diferentes resoluciones de dispositivos.

<div class="flex">
  <div class="container"></div>
</div>

Azul = Contenedor

.full

Los elementos con la clase .full obtendrán el 100% del ancho de la pantalla o con base a su contenedor.

<div class="flex">
  <div class="full">
    <p>Soy un texto con un ancho completo</p>
  </div>
</div>

Soy un texto con un ancho completo

<div class="flex">
  <div class="container">
    <div class="full">
      <p>Soy un texto con un ancho completo respecto al contenedor</p>
    </div>
    <div></div>
  </div>
</div>

Soy un texto con un ancho completo respecto al contenedor

.auto

Establece que un elemento solo ocupe el ancho necesario, esta medición se basa en el contenido iterno del elemento.

<div class="flex">
  <div class="auto">
    <p>Soy una p con ancho automático</p>
  </div>
</div>

Soy una p con ancho automático

🔃 Dirección de los elementos

Cuando trabajamos con flexbox necesitamos pensar en términos de dos ejes, el eje principal y el eje cruzado (X, Y). Filas y columnas.

.row

Establece que todos los elementos se acoplen en fila (en dirección X)

<div class="flex">
  <div class="row">
    <div>Azul = Elemento 1</div>
    <div>Rojo = Elemento 2</div>
  </div>
</div>

Elemento 1

Elemento 2

.column

Establece que todos los elementos se acoplen en columna (en dirección Y)

<div class="flex">
  <div class="column">
    <div>Azul = Elemento 1</div>
    <div>Rojo = Elemento 2</div>
  </div>
</div>

Elemento 1

Elemento 2

.row-responsive

Establece la dirección de los elementos en escritorio, laptops y televisores en fila (x) y si la resolución sea mayor a 768px, pero cambiará la dirección a columna (Y) en tabletas y móviles cuya resolución es menor a 768px

Redimensiona el tamaño del navegador para que puedas notar el comportamiento.

<div class="flex">
  <div class="row-responsive">
    <div>Azul = Elemento 1</div>
    <div>Rojo = Elemento 2</div>
  </div>
</div>

Elemento 1

Elemento 2

🔛 Justificación

Una característica clave de flexbox es la capacidad de justificar ítems sobre el eje principal (X)

.justify-start

Justifica todos los elementos en el plano x (fila, row) al inicio. Esta es una propiedad por defecto de todos los elementos flex.

<div class="flex">
  <div class="row justify-start">
    <div>Elemento justificado a la izquierda(Inicio)</div>
  </div>
</div>

Elemento justificado a la izquierda(Inicio)

.justify-center

Justifica todos los elementos en el plano x (fila, row) al centro.

<div class="flex">
  <div class="row full justify-center">
    <div>Elemento al centro</div>
  </div>
</div>

Elemento al centro

.justify-end

Justifica todos los elementos en el plano x (fila, row) al final.

<div class="flex">
  <div class="row full justify-end">
    <div>Elemento al final</div>
  </div>
</div>

Elemento al final

.justify-between

Justifica el contenido distribuyendo todos los elementos uniformemente en el plano x (fila, row) , el primer elemento al inicio y el último al final.

<div class="flex">
  <div class="row justify-between">
    <div>Elemento 1</div>
    <div>Elemento 2</div>
    <div>Elemento 3</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

.justify-around

Justifica el contenido distribuyendo todos los elementos uniformemente en el plano x (fila, row) , los elementos tienen el mismo espacio a su alrededor.

<div class="flex">
  <div class="row justify-around">
    <div>Elemento 1</div>
    <div>Elemento 2</div>
    <div>Elemento 3</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

🔝 Alineación

Una característica clave de flexbox es la capacidad de alinear ítems sobre el eje secundario (Y)

.align-start

Alinea todos los elementos en el plano y (columna, column) al inicio, cuando se encuentran en fila. Esta es una propiedad por defecto de todos los elementos.

<div class="flex">
  <div class="row align-start">
    <div>Elemento alineado al inicio</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

.align-center

Alinea todos los elementos en el plano y (column) al centro, cuando se encuentran en fila.

<div class="flex">
  <div class="row align-center">
    <div>Elemento alineado al centro</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

.align-end

Alinea todos los elementos en el plano y (column) al final, cuando se encuentran en fila.

<div class="flex">
    <div class="row align-end">
        <div> Elemento alineado al final</div>
    </div>
</div

Elemento 1

Elemento 2

Elemento 3

🔣 Agrupación

Define si los elementos flexibles se fuerzan en una sola línea o pueden fluir en varias líneas.

.wrap

Fuerza a los elementos a distribuirse en multiples líneas.

<div class="flex">
  <div class="full wrap">
    <div>Elemento1</div>
    <div>Elemento2</div>
    <div>Elemento3</div>
    <div>Elemento4</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

.nowrap

Fuerza a los elementos a distribuirse en una única línea.

<div class="flex">
  <div class="full nowrap">
    <div>Elemento1</div>
    <div>Elemento2</div>
    <div>Elemento3</div>
    <div>Elemento4</div>
  </div>
</div>

Elemento 1

Elemento 2

Elemento 3

⏸️ Espacios en blanco

Los espacios en blanco aplican unicamente a las columnas. No deben existir código dentro una etiqueta de con .white-space-*

<div class="flex">
  <div class="column full">
    <div class="white-space-4"></div>
    <div class="white-space-8"></div>
    <div class="white-space-16"></div>
    <div class="white-space-24"></div>
    <div class="white-space-32"></div>
    <div class="white-space-48"></div>
    <div class="white-space-64"></div>
  </div>
</div>

🖼️ Imágenes

La etiqueta de imagen img por defecto ocupará el 100% de anchura(max-width:100%) de su contenedor, la altura es proporcional al tamaño de la imagen(height:auto)

<div class="flex">
  <img src="https://goo.gl/SWuhMU" alt="Alternative text" />
</div>

.responsive-img

Habilita la capacidad de adaptar la imagen de manera proporcional automáticamente, solo aplicable al contendedor de la imagen. Redimensiona la ventana para notar el comportamiento.

<div class="flex">
  <div class="responsive-img">
    <img src="https://goo.gl/SWuhMU" alt="Texto alternativo" />
  </div>
</div>

.cover-img

La imagen mantiene su relación de aspecto mientras llena todo el cuadro de contenido del elemento. El objeto será recortado. Solo aplicable a la etiqueta de imagen sin .responsive-img como contenedor . Redimensiona la ventana para notar el comportamiento.

<div class="flex">
  <img class="cover-img" src="https://goo.gl/SWuhMU" alt="Texto alternativo" />
</div>

.contain-img

La imagen se escala para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elemento Solo aplicable a la etiqueta de imagen sin .responsive-img como contenedor. Redimensiona la ventana para notar el comportamiento.

<div class="flex">
  <img
    class="contain-img"
    src="https://goo.gl/SWuhMU"
    alt="Texto alternativo"
  />
</div>

📝 Decoradores de texto

Los siguientes elementos no son obligatorios, son una colección de utilidades para textos.

.text-left

Alinea el texto a la izquierda, esta es una propieda por defecto.

<div>
  <p class="text-left">Texto largo en idioma desconocido</p>
</div>

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Beatae aspernatur aut autem at cumque facilis. Animi veritatis maiores, officia eius ratione praesentium eum? Amet consectetur eveniet quibusdam expedita dignissimos unde! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Mollitia expedita provident enim ea recusandae, ducimus perferendis beatae assumenda sequi explicabo aliquid facilis itaque molestiae? Sit incidunt harum error facilis et! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Inventore laudantium dolorem a nesciunt? Nulla velit nisi deserunt quaerat soluta ipsa dolor minus non cum, reiciendis sapiente excepturi unde ipsam ullam.

.text-center

Alinea el texto al centro.

<div>
  <p class="text-center">Texto largo en idioma desconocido</p>
</div>

.text-right

Alinea el texto a la derecha.

<div>
  <p class="text-right">Texto largo en idioma desconocido</p>
</div>

.text-justify

Justifica el texto.

<div>
  <p class="text-justify">Texto largo en idioma desconocido</p>
</div>

🏷️ Referencias

Lista de sitios Web quienes utilizan core.css