Spectre — это легкая, отзывчивая и современная среда CSS, которая обеспечивает более быструю разработку и расширяемость. Он предоставляет основные элементы и типографские стили, а также адаптивную систему макетов, основанную на функции flexbox. Он устраняет многочисленные проблемы, с которыми мы сталкивались ранее, такие как совместимость с разными браузерами. В настоящее время веб-страницы оптимизированы для всех браузеров (Internet Explorer, Firefox и Chrome) и размеров экрана (настольные компьютеры, планшеты, смартфоны и телефоны).
Spectre — это побочный проект, рожденный в результате многолетней разработки CSS для огромного веб-сервиса. В Spectre включены только современные базовые стили, адаптивные системы компоновки, компоненты CSS и утилиты, которые можно настроить для вашего проекта с помощью компилятора Sass/Scss. Использование Spectre.css абсолютно бесплатно.
Установка Spectre CSS?
Всего существует 5 способов установки Spectre, которые приведены ниже:
- Установить вручную
- Установить с CDN
- Установить с помощью NPM
- Установить с помощью пряжи
- Установить из Бауэра
Разберемся во всех этих видах монтажа последовательно.
Установка вручную: мы можем легко загрузить скомпилированный и минимизированный CSS-файл Spectre по данной ссылке. Размер файла будет около 10Кб.
https://github.com/picturepan2/spectre/releases
После загрузки файлов поместите их в текущую рабочую папку и перейдите к полезным файлам, таким как spectre.min.css, spectre-exp.min.css и spectre-icons.min.css. Это активирует Spectre в вашей рабочей папке. Затем укажите эти ссылки пути к файлу на ваш код.
<link rel=”stylesheet” href=”spectre.min.css”> <link rel=”stylesheet” href=”spectre-exp.min.css”> <link rel=”stylesheet” href=”spectre-icons.min.css”>
Установка из CDN: мы можем просто использовать приведенные ниже ссылки в разделе заголовка нашего HTML-файла, которые активируют 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”>
Установка с помощью NPM: чтобы установить Spectre, нам просто нужно запустить приведенную ниже команду, после чего нам нужно перейти к нужному файлу в нашем HTML-файле.
npm install spectre.css –save
Установка с помощью Yarn: Чтобы установить Spectre, нам просто нужно запустить приведенную ниже команду, после чего нам нужно перейти к нужному файлу в нашем HTML-файле.
yarn add spectre.css
Установка из Bower: Мы можем установить Spectre из Bower. Этот метод установки Spectre не рекомендуется и его следует избегать.
bower install spectre.css –save
Пример 1. В этом примере мы создадим встроенный код Spectre.
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"
>GeeksforGeeks</
h1
>
<
strong
>SPECTRE CSS</
strong
>
<
br
><
br
>
<
div
>
<
code
>A Computer Science portal for Geeks</
code
>
</
div
>
</
center
>
</
body
>
</
html
>
Пример 2. В этом примере мы создадим фрагмент кода Spectre.
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"
>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
>