Spectre 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 overcomes numerous issues we had previously, such as cross-browser compatibility. The webpages are currently optimized for all browsers (Internet Explorer, Firefox, and Chrome) and screen sizes (Desktop, Tablets, Phablets, and Phones).
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.
Installation of Spectre CSS?
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.
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 1: We'll construct Spectre Inline code in this example.
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/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">
<title>Spectre CSS</title>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE CSS</strong>
<br><br>
<div>
<code>A Computer Science portal for Geeks</code>
</div>
</center>
</body>
</html>
Output:
Example 2: We'll make a Spectre Code snippet in this example.
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/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">
<title>Spectre CSS</title>
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE CSS</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:
Similar Reads
CSS Introduction
CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
5 min read
W3.CSS Introduction
What is W3.CSS?W3.CSS is a modern framework with built-in responsiveness and easy to learn and use compared to other CSS frameworks.It aims to speed up and simplify web development and support modern responsive devices like Mobile, Laptop, Tablet and Desktop.W3.CSS was designed to be a high-quality
2 min read
Introduction to Tailwind CSS
Tailwind CSS is a utility-first CSS framework that simplifies web development by providing a set of pre-designed utility classes. These utility classes enable you to build custom designs without writing any custom CSS, promoting consistency, scalability, and efficiency. Tailwind shifts the focus fro
4 min read
SASS Introduction
Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to CSS. Cascading Style Sheets (CSS) serve as the foundation of web styling, dictating the visual aesthetics and layout of websites. However, as web development projects increase in complexity, managing CSS files can becom
3 min read
Introduction to LESS
LESS is a simple CSS pre-processor that makes it possible to create manageable, customizable, and reusable style sheets for websites. LESS is a dynamic style sheet language that increases the working power of CSS. LESS is cross-browser compatible. CSS pre-processor is a scripting language that impro
4 min read
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 i
4 min read
Primer CSS Dropdown Options
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
3 min read
Primer CSS Navigation
Primer CSS is a free open-source CSS framework that is formed upon systems that establish the foundation of the basic style elements such as spacing, typography, and color. This systematic structure ensures our patterns are stable and interoperable with every other. Its approach to CSS is inspired b
6 min read
Primer CSS Markdown
Primer CSS is a free open-source CSS framework built with the GitHub design system to support the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure that our patterns are steady and intero
3 min read
Primer CSS Customization Forms
Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by
2 min read