Введение в Spectre CSS

10 лучших проектов для начинающих по отработке навыков HTML и CSS Изучение

Spectre — это легкая, отзывчивая и современная среда CSS, которая обеспечивает более быструю разработку и расширяемость. Он предоставляет основные элементы и типографские стили, а также адаптивную систему макетов, основанную на функции flexbox. Он устраняет многочисленные проблемы, с которыми мы сталкивались ранее, такие как совместимость с разными браузерами. В настоящее время веб-страницы оптимизированы для всех браузеров (Internet Explorer, Firefox и Chrome) и размеров экрана (настольные компьютеры, планшеты, смартфоны и телефоны).

Spectre — это побочный проект, рожденный в результате многолетней разработки CSS для огромного веб-сервиса. В Spectre включены только современные базовые стили, адаптивные системы компоновки, компоненты CSS и утилиты, которые можно настроить для вашего проекта с помощью компилятора Sass/Scss. Использование Spectre.css абсолютно бесплатно.

Установка Spectre CSS?

Всего существует 5 способов установки Spectre, которые приведены ниже:

  1. Установить вручную
  2. Установить с CDN
  3. Установить с помощью NPM
  4. Установить с помощью пряжи
  5. Установить из Бауэра

Разберемся во всех этих видах монтажа последовательно.

Установка вручную: мы можем легко загрузить скомпилированный и минимизированный 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>
Читайте также:  Когда использовать развертывания, модули и сервисы Kubernetes
Оцените статью
bestprogrammer.ru
Добавить комментарий