Spectre Folder Structure

Last Updated : 23 Jul, 2025

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 flex-box property, along with providing the basic elements & typography styling.

To use Spectre, better to have minimum knowledge about folder structure. We are not recommending that you remember every file's destination, but there are a few files that will play the main role in the Spectre. If we can manipulate those files then we can customize the Spectre as well. Like Scss, Less files are the lead files here. We can put our self-designed images as an icon into the icon file.

The compiled and minified Spectre CSS files are available for download from the official site.

Spectre CSS Folder Structure: This structure will give you a basic idea of where to look for any particular file.

spectre/
├── dist/                           // Build folder
│   ├── spectre-exp.css
│   ├── spectre-exp.min.css
│   ├── spectre-icons.css
│   ├── spectre-icons.min.css
│   ├── spectre.css
│   └── spectre.min.css
│
├── docs/
│   ├── dist/                       // Pre-built CSS folder
│   │   ├── spectre-exp.css
│   │   ├── spectre-exp.min.css
│   │   ├── spectre-icons.css
│   │   ├── spectre-icons.min.css
│   │   ├── spectre.css
│   │   └── spectre.min.css
|   ├── css/                        // Docs CSS files
│   │   └── docs.css
|   ├── src/
│   │   ├── scss                    // Docs Sass files
│   │   │   └── docs.scss
│   │   ├── index.pug               // Docs Pug files
│   │   └── ...
│   ├── examples/                   // Example template
│   │   └── starter.html
│   ├── ../
│   ├── index.html
│   └── ...
│
├── src/                            // Source Sass files
│   ├── spectre.scss
│   ├── spectre-icons.scss
│   ├── spectre-exp.scss
│   ├── _mixins.scss
│   ├── _variables.scss
│   └── ...
│
├── gulpfile.js
├── package.json
└── ...

Folder Structure:

Folder Structure
Folder Structure

Example: This example describes the Spectre folder structure by importing the compiled and minified Spectre CSS file from a local machine.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
        href="spectre.css/dist/spectre.min.css">
    <link rel="stylesheet"
        href="spectre.css/dist/spectre-exp.min.css">
    <link rel="stylesheet"
        href="spectre.css/dist/spectre-icons.min.css">
</head>

<body>
    <center>
        <h1 class="text-success">GeeksforGeeks</h1>
        <strong>SPECTRE Folder Structure Sample</strong>
        <br><br>
        <pre class="code" data-lang="HTML">
            <h3>Learning Web Development</h3>
            <code>A Computer Science portal for Geeks</code>
        </pre>
    </center>
</body>

</html>

Output:

Spectre Folder Structure
Spectre Folder Structure

Note: This code won't run on ide, as the source file of the spectre is imported from a local machine. 

Reference: https://picturepan2.github.io/spectre/getting-started/custom.html#folders

Comment

Explore