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

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.

Output:

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 Introduction
• Spectre CSS Installation
• Spectre CSS Folder Structure
• Spectre CSS Text
• Spectre CSS Button
• Spectre CSS Table
• Spectre CSS Form

Spectre CSS Complete References:

• Spectre Components Complete Reference
• Spectre Elements Complete Reference
• Spectre Utilities Complete Reference

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