Spectre is a lightweight, responsive, and modern CSS framework, which provides extensible with faster development. There are various utilities available in the Spectre framework.
Example: Below example illustrate the Spectre Display utilities. We will use first five classes similarly, you can use other classes as per your requirement.
<!DOCTYPE html>
<html>
<head>
<title>SPECTRE Display Class</title>
<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">
</head>
<body>
<center>
<h1 class="text-success">GeeksforGeeks</h1>
<strong>SPECTRE Display Class</strong>
<br><br>
</center>
<div class="container">
<strong>Display d-block Class:</strong>
<br>
<div class="columns d-block">
<div class="column bg-success col-4">col-4</div>
<div class="column bg-primary col-4">col-4</div>
<div class="column bg-warning col-4">col-4</div>
</div>
</div>
</body>
</html>
Output:
Spectre Utilities: In below table, all the utilities are listed and briefly described to give you a basic idea of that particular utility.
| Utilities | Description |
|---|---|
| Spectre Colors | Spectre colours are one of the most useful utilities, there are two types of things where we can use colours. |
| Spectre Cursors | Spectre Cursor utilities are spectre classes that specify the mouse cursor. |
| Spectre Display | This class accepts more than one value in Spectre Display utilities. |
| Spectre Divider | Spectre Divider is used to create a divider between similar kinds of components. |
| Spectre Loading | Spectre Loading Component is used to create a loading indicator which is used for loading or updating. |
| Spectre Position | Spectre Position classes are used for useful layout and position things, including clearfix, float, position, margin, and padding. |
| Spectre Shape | This is one of the most useful utilities in Spectre. |
| Spectre Text | The Spectre text is one of the most useful features of Spectre that needs to use on text for decoration and style. |