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@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>
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.
<!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>
<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.
<!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>
<pre class="code" data-lang="HTML">
<h3>Learning Web Development</h3>
<code>A Computer Science portal for Geeks</code>
</pre>
</center>
</body>
</html>
Output:
