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
|
|
Output:
Example 2: We’ll make a Spectre Code snippet in this example.
HTML
|
|
Output:
.png)