Spectre.css: lightweight and powerful CSS framework


Spectre.css is a very light, modern, responsive and mobile-first CSS framework released under the Open Source license.

Spectre.css is a very light CSS framework (weighs less than 10kb in the gzippated version), modern, responsive and mobile-first that allows you to use CSS3 features in a simplified way to produce the latest generation layouts.

Among the features of Spectre.css we find a system of realization of layout based on the specific Flexbox , controls for typography, for the stylization and structuring of elements (such as tables, buttons, lists, links, formatting elements, labels and so on ) through class collections, a huge list of advanced UI controls, such as Accordions, Panels, Avatars, Tooltips and “utilities” classes for the most disparate tasks.

All these elements make Spectre.css a very complete CSS framework, but at the same time easy to use.

There are five different ways to install Spectre.css: using manual and local implementation, implementation via CDN ( Content Delivery Network ) or through a package manager. For example, to implement Spectre.css via CDN we can include the following code on our pages:

<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">

while to install it through NPM you will have to proceed in this way:

npm install spectre.css --save

Using the tried-and-tested 12-column grid system and using Flexbox technology, building a layout with Spectre.css takes a form similar to the following snippet:

<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>

where the elements div with class ” column”, children of a container element ” columns”, assume a quantity relative to their class ” col-*” where ” *” is the number of segments occupied by the column. In this example the first column occupies 6 places on 12, the second 3 places on 12, the third 2 places on 12 and the fourth occupies the last remaining place.

As anticipated, with Spectre.css we can take advantage of many UI components, such as pagination, a very common theme in blogs. To produce a list of navigable pages it is sufficient to apply the class ” pagination” to the element ” ul” and the classes ” page-item” to the sub-elements ” li”, with the possibility of using additional classes such as ” disabled” and ” active”:

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

The official documentation of the framework is very detailed and allows you to use Spectre.css in a few minutes.

Via Spectre.css


Please enter your comment!
Please enter your name here