Spectre CSS Installation

Last Updated : 07 Mar, 2022

Spectre is a lightweight, responsive, and modern CSS framework, which provides the extensible with faster development. It facilitates the responsive layout system based on the flexbox property, along with providing the basic elements & typography stylings. It solves many problems that we had once like the cross-browser compatibility issue. In the current scenario, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).

In this article, we will see how we can install Spectre in various possible ways. There is a total of 5 ways to install Spectre, which are given below:

Install Manually
Install from CDN
Install with NPM
Install with Yarn
Install from Bower

We will understand all these types of installation sequentially & will implement them through the example.

Install Manually: We can easily download the compiled and minified Spectre CSS file from the given link. The file size will be approx 10Kb.

https://github.com/picturepan2/spectre/releases

After downloading the files, put the file in your current working folder and navigate the useful files like spectre.min.css, spectre-exp.min.css & spectre-icons.min.css. This will enable spectre on your working folder. Then, specify those file path links to your code.

<link rel="stylesheet" href="spectre.min.css">
<link rel="stylesheet" href="spectre-exp.min.css">
<link rel="stylesheet" href="spectre-icons.min.css">

Install from CDN: We can simply use the below-mentioned links in the head section of our HTML file that will enable Spectre.

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

Install with NPM: To install Spectre, we just need to run the below command after that we need to navigate the required file in our HTML file.

npm install spectre.css --save

Install with Yarn: To install Spectre, we just need to run the below command after that we need to navigate the required file in our HTML file.

yarn add spectre.css

Install from Bower: We can install Spectre from the bower. This method for installing the Spectre is not preferred & avoided.

bower install spectre.css --save

Example: In this example, we are using a CDN link to illustrate the Spectre Installation process through the example.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Spectre Installation</title> 
    <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"> 
</head> 
  
<body> 
    <center> 
        <h1>GeeksforGeeks</h1> 
        <p class="text-success"> 
            A Computer Science Portal for Geeks 
        </p> 
  
        <p class="text-primary text-left"> 
            Spectre is a lightweight, modern and  
            responsive CSS framework. It solves  
            many problems what we had once like  
            the cross-browser compatibility issue.  
            These days the websites are perfect  
            for all the browsers (IE, Firefox,  
            and Chrome) and for all sizes of  
            screens (Desktop, Tablets, Phablets,  
            and Phones).  
        </p> 
    </center> 
</body> 
</html>