Getting Started Spectre 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.
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.
<link rel="stylesheet" href="link/spectre.min.css" />
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.
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-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-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% (
<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>
In the demo below, I have created a basic grid system as well as a nested one. As evident from the demo, it is not hard to create complex layouts.
Spectre includes some default styles for typographical elements like headings, paragraphs and blockquotes. The framework is also optimized for Asian fonts. It has a few classes like
lead to make some sections of your text stand out. The following demo shows all these features at once:
You can also add the class
table to any
<table> element. The framework will then apply basic styling to your table such as padding and border styles to give your table a cleaner default look. It will also style your table’s header row appropriately. You can use the class
table-striped to make the table striped and enable hover styles by adding the class
This demo illustrates how easy it is to create fancy responsive tables using Spectre:
There are a few classes available for buttons as well. To use the default button styles you need to add the
btn class. You can control the size of buttons using the classes
btn-block. The class
btn-block will create full width buttons. To group multiple buttons together, you can use the
btn-group class on their container.
Spectre also has style rules for common form elements like labels, input fields and textareas giving them a clean and stylish look. To create a horizontal form, you need to add the
form-horizontal class to the
<form> element. You can then control the width of child elements using one of the classes from
col-[1-12]. Please note that the form will be horizontal only if the viewport is at least 840px wide. Making the form elements bigger or smaller is just a matter of adding the classes
You can also attach some text or a button to an input element by adding the class
input-group to the input container. You will have to add the class
input-group-addon to the accompanying text element and
input-group-btn to the button element.
A basic form is shown in this demo:
Navigation is an integral part of even the most basic websites. Keeping this in mind, Spectre offers three navigation components — the navigation bar, vertical menu and breadcrumbs. The navigation bar can contain elements like a logo, navigation links, buttons and other elements like a search box. By default, the navbar will have a very minimal styling so you don’t have to put in a lot of effort to customize it. Here is the markup to create a basic navigation bar:
Besides the navigation bar, you can create vertical menus as well. This requires you to add the class
menu to the respective container element. You can add the class
menu-item to all the child elements in your menu. The framework uses this class to add its own styling consistent with the rest of the components. Different menu items can be separated using a
You can also implement a breadcrumb menu using the
breadcrumb class. All the child elements need to have the classname
All three menus that we discussed in this section are shown in the demo below:
Modals and Cards
Two important components that we have not discussed up to this point are modals and cards. They are similar to their Bootstrap counterparts.
You can add a
modal class to container elements to create modals. Inside that container, you can add one actual modal container element with the class
modal-container and a modal overlay element with the class
modal-overlay. Inside your container, you can add actual elements with the
modal-footer classes. You can control the size of your modals using the
modal-sm class. The code below will create a basic modal for you:
<div class="modal modal-sm active"> <div class="modal-overlay"></div> <div class="modal-container"> <div class="modal-header"> <button class="btn btn-clear float-right" type="button"></button> <div class="modal-title">Modal title</div> </div> <div class="modal-body"> <div class="content"> <p>This is some text inside the Modal.</p> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button">Close</button> </div> </div> </div>
In the demo below, I have added the functionality to make the Modal appear and disappear. It is just a matter of adding and removing the
Cards are flexible general purpose content containers. You can use them to store all kinds of things. They can be created by using the class
card. The card itself can have children with classes
card-image based on their purpose. Here is a basic snippet to show markup of a typical card:
<div class="card"> <div class="card-image"> <img class="img-responsive" src="img-path/bp.jpg"> </div> <div class="card-header"> <h2 class="card-title">Heading</h2> <p class="card-meta">Some Meta Data</p> </div> <div class="card-body"> <p>Something related to the image or the heading goes here!</p> </div> </div>
You can wrap the cards up in classes like
col-md-8 etc. to control their width. You can also put elements like buttons or labels inside the cards if needed. The CodePen demo below shows two cards with images at different positions:
Other components like “toasts” are similar to the alerts in Bootstrap. A toast component can contain text and other icons. You can also optionally add a close button to them. Toasts may be used for different purposes. There are classes available to serve each of these purposes. For a success toast, you can use the class
toast-success. This will make the toast green. Similarly, there are classes for error messages (
toast-danger) and general information (
toast-primary) as well.
Spectre also has other common components like badges, labels, pagination and tooltips as well. You can visit the official website to read about all these components.
Additionally, the framework also has utility classes like
centered to help you with minor layout adjustments. The utility class
float-right can be seen in action in the modal demo above where it is applied on the little
x button in the modal header.
One more useful class is
loading, which can be added to buttons or divs to show a loading animation.
The framework is definitely worth giving a try. What are your views on Spectre? Are you planning on using it in any of your projects? Let us know in the comments.