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>
</div>
</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>
<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>
The official documentation of the framework is very detailed and allows you to use Spectre.css in a few minutes.
Via Spectre.css
