Astraleta

Después de trabajar en varios proyectos usando Astral creo que he aprendido la lección. Ahora Astral ha pasado a tener mucho menos módulos que apenas usaba. La lista ha sufrido un recorte y los módulos disponibles que han quedado son los siguientes:

• color
• display
• fonts
• height
• letter-spacing
• margin
• overflow
• padding
• position
• weight

Astí

Todavía sigo astí.

• Incluido módulo de line-height
• Incluido módulo de listas
• Incluido nuevo margin de 0.5rem, equivale a 8px
• Incluido modulo de text-decoration
• Incluida una fuente serif del sistema, en este caso Georgia y Times
• Combinaciones de colores accesibles
• Ahora Grid Layout viene descomentado. Es hora de usarlo!
• Corrección de prefijos responsive y algún guió bajo que se había escapado

Hasta la próxima versión, o quizás no.

Crebando as mugas

La primera version de Astral estaba basada en Bislai así que estaba todo hecho para que encajara a la perfección con Bislai. Así que he reescrito la mayoría de módulos ya que no todos compartían la misma nomenclatura y en muchos de ellos faltaban medidas, ahora he incluído un amplio abanico para intentar abarcar la mayoría de los casos posibles. Las medias con decimales se diferencian a través del doble guión bajo.

.letter-0__5 {
  letter-spacing: .5rem;
}

Todos los módulos tienen su version responsive, ahora partimos desde mobile-first hasta ir subiendo a través de tres breakpoints que atraviesan el móvil, tablet y llegan al desktop.

@media only screen and (min-width: 30em) {

  //Para este breakpoint usamos la terminación --s

 .display-ib--s {
    display: inline-block;
  }

}

@media only screen and (min-width: 48em) {

    //Para este breakpoint usamos la terminación --m

  .display-ib--m {
    display: inline-block;
  }

}

@media only screen and (min-width: 64em) {

    //Para este breakpoint usamos la terminación --l

  .display-ib--l {
    display: inline-block;
  }

}

Crebando as mugas