Spectre.css: Framework CSS ligero y potente publicado bajo licencia Open Source

Spectre.css es un framework CSS muy ligero (pesa menos de 10kb en la versión gzip), moderno, sensible y móvil, que le permite usar la funcionalidad CSS3 de una manera simplificada para producir layout de última generación.

Entre las características de Spectre.css encontramos un sistema de realización de layout basado en el Flexbox, controles de tipografía, para la estilización y estructuración de elementos (como tablas, botones, listas, enlaces, elementos de formato, etiquetas, etc.) a través de las colecciones de clases, una enorme lista de controles avanzados de IU, como Accordions, Panels, Avatars, Tooltips y clases "utilities" para las tareas más dispares.

Todos estos elementos hacen que Spectre.css sea un framework CSS muy completo, pero al mismo tiempo fácil de usar.

Hay cinco formas diferentes de instalar Spectre.css: 

• mediante la implementación manual y local, 
• la implementación a través de CDN (Content Delivery Network), 
• o mediante un administrador de paquetes (npm etc.). 

Por ejemplo, para implementar Spectre.css a través de CDN podemos incluir el siguiente código en nuestras páginas:

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

mientras que para instalarlo a través de NPM deberá proceder de esta manera:

npm install spectre.css --save

Usando el sistema de cuadrícula de 12 columnas, probado y probado, y utilizando la tecnología Flexbox, la creación de un diseño con Spectre.css toma una forma similar a la del siguiente fragmento de código:

<div class="container">
  <div class="columns">
    <div class="column col-6">col-6</div>
    <div class="column col-3">col-3</div>
    <div class="column col-2">col-2</div>
    <div class="column col-1">col-1</div>
  </div>
</div>

donde los elementos <div> con la clase "column", hijos de un elemento contenedor "columns", suponen una cantidad relativa a su clase "col- *" donde "*" es el número de segmentos ocupados por la columna.
En este ejemplo, la primera columna ocupa 6 lugares en 12, la segunda 3 lugares en 12, la tercera 2 lugares en 12 y la cuarta ocupa el último lugar restante.

Como se anticipó, con Spectre.css podemos aprovechar muchos componentes de la interfaz de usuario, como la paginación, un tema muy común en los blogs. Para generar una lista de páginas navegables, basta con aplicar la clase de "pagination" al elemento "ul" y las clases de "page-item" a los subelementos "li", con la posibilidad de utilizar clases adicionales como "disabled" y "active":

<ul class="pagination">
  <li class="page-item disabled">
    <a href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active">
    <a href="#">1</a>
  </li>
  <li class="page-item">
    <a href="#">2</a>
  </li>
  <li class="page-item">
    <a href="#">3</a>
  </li>
  <li class="page-item">
    <span>...</span>
  </li>
  <li class="page-item">
    <a href="#">12</a>
  </li>
  <li class="page-item">
    <a href="#">Next</a>
  </li>
</ul>

La documentación oficial del framework es muy detallada y le permite utilizar Spectre.css en unos minutos.

código Spectre.css