Open In App

Spectre CSS

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

Spectre CSS is a lightweight, responsive, and modern CSS framework that allows for speedier development and extensibility. It provides the essential elements and typographic stylings, as well as a responsive layout system based on the flexbox feature. It was created by Yan Zhu and first introduced in March 2016.

Spectre CSS

Spectre CSS

 

Spectre is a side project born out of years of CSS development on a huge web service. Only modern base styles, responsive layout systems, CSS components, and utilities are included in Spectre, which may be customized for your project using the Sass/Scss compiler. The use of Spectre.css is absolutely free.

 

Spectre CSS

Spectre CSS

Features of Spectre CSS:

  • Lightweight: Spectre CSS is a lightweight CSS framework. All sets of modules are packed in less than 10kb gzipped files.
  • Responsive: Spectre CSS is a completely responsive framework. It provides the essential elements and typographic stylings, as well as a responsive layout system based on the flexbox feature.
  • Modern CSS Framework: Spectre CSS is a modern CSS framework that allows for speedier development and extensibility
  • Open Source

The next step in learning Spectre CSS involves its installation: There are five ways to install Spectre CSS that are described below:

Method 1 (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">

Method 2 (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”>

Method 3 (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

Method 4 (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

Method 5 (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 will use the heading classes provided by Spectre CSS.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet" 
          href=
    <link rel="stylesheet" 
          href=
    <title>Spectre CSS</title>
</head>
  
<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE CSS</strong>
        <br><br>
        <div>
            <span class="h2">Geeks for Geeks
            <span class="h6">is a great place to learn
            <span class="h4">Spectre CSS
        </div>
    </center>
</body>
</html>


 

Output:

Spectre CSS

Spectre CSS

Benefits of Spectre CSS: Modern basic styles, a responsive layout system, CSS components, and utilities are all included in Spectre CSS, which may be customized for your project using the Sass/Scss compiler. Spectre CSS is easy to implement framework. It is easy to use the responsive design with a modern approach with flexbox.

Learn more about Spectre CSS:

Spectre CSS Complete References:

Alternatives of Spectre CSS:

  • Bootstrap 5: Bootstrap is a free and open-source collection of CSS and JavaScript/jQuery code used for creating dynamic websites layout and web applications. Bootstrap is one of the most popular front-end frameworks which has a nice set of predefined CSS codes.
  • Tailwind CSS: Tailwind CSS is basically a Utility first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need.
  • Materialize CSS: Materialize CSS is a design language that combines the classic principles of successful design along with innovation and technology. It is created and designed by Google. Google’s goal is to develop a system of design that allows for a unified user experience across all its products on any platform.

Recent articles Spectre CSS



Last Updated : 10 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads