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 in March 2016.
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.
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.
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" >w3wiki</ h1 > < strong >SPECTRE CSS</ strong > < br >< br > < div > < span class = "h2" >Beginner for Beginner < span class = "h6" >is a great place to learn < span class = "h4" >Spectre CSS </ div > </ center > </ body > </ html > |
Output:
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 Complete References:
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.