Pure CSS - Как использовать - Краткое руководство - httpdoc.ru

Как использовать Pure CSS

Pure очень легко реализовать и выполнить на веб-странице, как и любой другой фреймворк. Есть два способа использовать чистый CSS:

  • Локальная установка: загрузите Pure.css файл на вашем ПК и включите его в свой HTML код с помощью <link> тега.
  • Использование пути к CDN: включите путь Pure.css непосредственно из источника в свой HTML-код с помощью CDN (Сеть доставки контента. Всегда рекомендуется использовать CDN, потому что вам не нужно беспокоиться о включении обновленной версии Pure.CSS библиотека, она сделает это сама.

Локальная установка

Вы должны загрузить последнюю версию файла pure.css в свою систему отсюда: Pure.CSS . Скачав файл, распакуйте его.

Следующим шагом является размещение загруженного 'pure-min.css' (вы найдете его в извлеченной папке) файла в каталог вашего веб-сайта. После этого просто используйте <link> ярлык чтобы добавить этот файл на свою веб-страницу и начать использовать преимущества Pure. Взгляните на приведенный ниже пример, чтобы понять реализацию.

Пример
<html>
   <head>
      <title> PURE.CSS Local Instalation Example </title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="pure-min.css">
    
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;      
            font-family: Roboto, 'Liberation Mono', Courier, monospace;
            text-align: center;         
         }
      </style>
   </head>
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Выход

The PURE.CSS Example

Первая колонка

Вторая колонка

Третья колонна


Использование CDN

Путь CDN также реализуется <link> только с помощью тега. Используя путь CDN, библиотека Pure, включенная на веб-страницу, всегда будет самой последней.

Пример
<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.1/build/pure-min.css">    
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;      
            font-family: Roboto, 'Liberation Mono', Courier, monospace;
            text-align: center;         
         }
      </style>
   </head>
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>

Выход

The PURE.CSS Example

Первая колонка

Вторая колонка

Третья колонна