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 flexbox property, along with providing the basic elements & typography stylings. It solves many problems that we had once like the cross-browser compatibility issue. In the current scenario, the websites are perfect for all the browsers (IE, Firefox, and Chrome) and for all sizes of screens (Desktop, Tablets, Phablets, and Phones).
In this article, we will see how we can install Spectre in various possible ways. 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 & will implement them through the example.
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: In this example, we are using a CDN link to illustrate the Spectre Installation process through the example.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Spectre Installation</title>
<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">
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
<p class="text-success">
A Computer Science Portal for Geeks
</p>
<p class="text-primary text-left">
Spectre is a lightweight, modern and
responsive CSS framework. It solves
many problems what we had once like
the cross-browser compatibility issue.
These days the websites are perfect
for all the browsers (IE, Firefox,
and Chrome) and for all sizes of
screens (Desktop, Tablets, Phablets,
and Phones).
</p>
</center>
</body>
</html>
Output:
Spectre CSS Installation
Reference: https://picturepan2.github.io/spectre/getting-started/installation.html
Similar Reads
Spectre CSS Introduction 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
3 min read
Pure CSS Installation and Uses Pure CSS is a framework of CSS. It is a free and open-source tool collection for creating responsive websites and web applications. Pure CSS is developed by Yahoo and is used for creating faster, beautiful, and responsive websites. It can be used as an alternative to Bootstrap. Installation of Pure
2 min read
Less.js Installation LESS (Leaner Style Sheets) is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is a dynamic style sheet language that enhances the working power of CSS. LESS supports cross-browser compatibility. CSS pre-processor is a s
4 min read
Primer CSS Introduction and Installation Primer CSS is a CSS framework that is built with the GitHub design system to provide support to enhance the development of websites. It is used to create the foundation of the basic style elements such as spacing, typography, and color. The systematic Primer CSS method ensures our patterns are stead
3 min read
Primer CSS Introduction Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to 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 our patterns are ste
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