Spectre CSS

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

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@0.5.9/dist/spectre.min.css%E2%80%9D>
<link rel=”stylesheet” href=”https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css%E2%80%9D>
<link rel=”stylesheet” href=”https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css%E2%80%9D>

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=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-exp.min.css">
    <link rel="stylesheet" 
          href=
"https://unpkg.com/spectre.css@0.5.9/dist/spectre-icons.min.css">
    <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:

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

Explore