Spectre: A Lightweight CSS Framework

Frameworks reduce development time for projects considerably. A few of them like Bootstrap are quite popular and offer a lot of features, but you might not need all that for your project. Today, we will focus on a new framework called Spectre. It is lightweight, modern, responsive and mobile friendly. It weighs around 6.8kb when served minified and gzipped. Besides the basic grid system, it also has a lot of other useful various components like tabs, modals and cards etc.

This tutorial will provide a brief overview of this framework, followed by some guidance to help you get started quickly.

Installation

You can either download the minified Spectre.css file directly or use npm and Bower to install it. Once you are done, you can include the file in your project like regular stylesheets.

[code language="html"]
<link rel="stylesheet" href="link/spectre.min.css" />
[/code]

You can also create your own customized version of the framework by editing the Less files in the /src directory or by removing unneeded components from the spectre.less file. Then you can build your CSS file from the command line by using Gulp.

Grid System

Spectre has a flexbox based responsive grid system with 12 columns. The width of each column is determined by its class name. Each class begins with col- and then is followed by a number which represents how many columns wide this particular element should be. For example, col-12 is 12 columns wide which gives it a width of 100% and col-3 is 3 columns wide or a quarter of col-12, which gives it a with of 25%. By default, the different columns will have some gap between them. You can collapse that gap by adding the class col-gapless to their container. Just like Bootstrap, it also offers classes like col-md-[1-12] , col-sm-[1-12] and col-xs-[1-12] to help you control the width of elements when the size of the viewport changes.

It also provides classes such as hide-xs, hide-sm and hide-md to hide elements on specific viewport sizes.

All the columns will show up as a single row when viewport width is less than 480px. The col-xs-* classes will be applicable to all elements with a width greater than 480px. Similarly, col-sm-* will be applicable to viewport width more than 600px and col-md-* will be applicable for viewport width more than 800px.

The following code snippet creates one column with width 33.333% (col-4), two columns with width 25% (col-3) and one column with width 16.66% (col-2).

[code language="html"]
<div class="container">
<div class="columns">
<div class="column col-4">
<div class="col-content">col-4</div>
</div>
<div class="column col-3">
<div class="col-content">col-3</div>
</div>
<div class="column col-3">
<div class="col-content">col-3</div>
</div>
<div class="column col-2">
<div class="col-content">col-2</div>
</div>
</div>
</div>
[/code]

Continue reading %Spectre: A Lightweight CSS Framework%

by Baljeet Rathi via SitePoint