Учебники

Pure.CSS — Краткое руководство

Январь 4, 2019

Pure.CSS — Обзор

Pure — это каскадная таблица стилей (CSS), разработанная YAHOO. Это помогает в создании более быстрых, красивых и отзывчивых сайтов.

Некоторые из его характерных особенностей заключаются в следующем —

  • Встроенный адаптивный дизайн
  • Стандартный CSS с минимальной занимаемой площадью
  • Набор небольших адаптивных CSS-модулей
  • Бесплатно использовать

Адаптивный дизайн

Pure имеет встроенный адаптивный дизайн, так что веб-сайт, созданный с использованием Pure, будет переделывать себя в соответствии с размером устройства. Pure имеет 12-колоночную подвижную сетку для мобильных устройств, которая поддерживает адаптивные классы для экрана малого, большого и среднего размера.

Чистые классы создаются таким образом, что сайт может соответствовать любому размеру экрана. Веб-сайты, созданные с использованием Pure, полностью совместимы с ПК, планшетами и мобильными устройствами.

Стандартный CSS

Pure использует только стандартный CSS, и его очень легко освоить. Нет никакой зависимости от какой-либо внешней библиотеки JavaScript, такой как jQuery.

растяжимый

Чистый дизайн очень минималистичный и плоский. Он разработан с учетом того факта, что добавлять новые правила CSS намного проще, чем перезаписывать существующие правила CSS. Добавив несколько строк CSS, внешний вид Pure можно настроить для работы с существующим веб-проектом.

Поддерживает тени и жирные цвета. Цвета и оттенки остаются одинаковыми на разных платформах и устройствах. И самое главное, это абсолютно бесплатно в использовании.

Pure.CSS — Настройка среды

Есть два способа использования Pure —

  • Локальная установка. Вы можете загрузить файл pure.css на свой локальный компьютер и включить его в свой HTML-код.

  • Версия на основе CDN. Вы можете включить файл pure.css в свой HTML-код непосредственно из сети доставки контента (CDN).

Локальная установка. Вы можете загрузить файл pure.css на свой локальный компьютер и включить его в свой HTML-код.

Версия на основе CDN. Вы можете включить файл pure.css в свой HTML-код непосредственно из сети доставки контента (CDN).

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

  • Перейдите на https://purecss.io/start/, чтобы загрузить последнюю доступную версию.

  • Поместите загруженный файл pure-min.css в каталог вашего сайта, например, / css.

Перейдите на https://purecss.io/start/, чтобы загрузить последнюю доступную версию.

Поместите загруженный файл pure-min.css в каталог вашего сайта, например, / css.

пример

Вы можете включить файл CSS в ваш файл HTML следующим образом:

Live Demo

<html>
   <head>
      <title>The PURE.CSS 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: Consolas, '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>

Это даст следующий результат —

CDN основанная версия

Вы можете включить файл pure.css в свой HTML-код непосредственно из сети доставки контента (CDN). yui.yahooapis.com предоставляет контент для последней версии.

В этом руководстве мы используем версию библиотеки yui.yahooapis.com CDN.

пример

Теперь давайте перепишем приведенный выше пример, используя pure.css из PureCSS.io CDN.

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/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: Consolas, '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>

Это даст следующий результат —

Pure.CSS — Адаптивный Дизайн

Pure.CSS имеет несколько специальных классов для создания адаптивного дизайна.

Sr.No. Имя класса и описание
1

.pure-и- *

Устанавливает контейнер на необходимое место на любом устройстве.

2

.pure-у-SM- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 568 пикселей.

3

.pure-у-MD- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 768 пикселей.

4

.pure-у-LG- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1024 пикселей.

5

.pure-у-XL- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1280 пикселей.

.pure-и- *

Устанавливает контейнер на необходимое место на любом устройстве.

.pure-у-SM- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 568 пикселей.

.pure-у-MD- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 768 пикселей.

.pure-у-LG- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1024 пикселей.

.pure-у-XL- *

Устанавливает, что контейнер должен занимать необходимое пространство на устройстве с шириной ≥ 1280 пикселей.

В следующем примере мы собираемся создать адаптивную сетку со строкой из четырех столбцов. Столбцы должны располагаться на маленьких экранах, занимать ширину: 50% на экранах среднего размера и ширину: 25% на больших экранах.

Это делается путем добавления класса .pure-u-1 для небольших экранов, .pure-u-md-1-2 для экранов среднего размера и .pure-u-lg-1-4 для больших экранов. Измените размер страницы, чтобы увидеть отклик сетки на размер экрана.

пример

purecss_responsive_design.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Containers</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;			
         }	 
      </style>
   </head>
   <body> 
   
      <div class = "grids-example">       	  
         <div class = "pure-g">
            <div class = "pure-u-1-1">
               <div class = "graybox">
                  <p>These four columns should stack on small screens, 
                  should take up width: 50% on medium-sized screens, and should 
                  take up width: 25% on large screens.</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>First Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Second Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class="graybox">
                  <p>Third Column</p>
               </div>
            </div>
			
            <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
               <div class = "graybox">
                  <p>Fourth Column</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1">
               <div class = "graybox">
                   <p>This column is to occupy the complete space of a row.</p>
               </div>
            </div>
         </div>
      </div>
	  
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-2-5">
               <div class = "graybox">
                  <p>This column is to occupy the two-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-3-5">
               <div class = "graybox">
                  <p>This column is to occupy the three-fifth of the space of a row.</p>
               </div>
            </div>
         </div>
      </div>   
      
      <div class = "grids-example">
         <div class = "pure-g">
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 1: This column is to occupy the one-third of the
                  space of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 2: This column is to occupy the one-third of the space 
                     of a row on all devices.</p>
               </div>
            </div>
			
            <div class = "pure-u-1-3">
               <div class = "graybox">
                  <p>Column 3: This column is to occupy the one-third of the space of a 
                     row on all devices.</p>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — Сетки

Pure.CSS предоставляет концепцию Pure Grid с двумя типами классов, pure-g , классом сетки и единичными классами, pure-u- * . Ниже приведены правила использования чистых сеток.

  • Ширина Единиц в долях. Например, pure-u-1-2 представляет ширину 1/2 или 50%, pure-u-2-5 представляет ширину 2/5 или 40% и так далее.

  • Дочерние элементы Pure Grid (элемент с классом pure-g) должны использовать имена классов pure-u или pure-u- * .

  • Весь контент должен быть частью сетки, чтобы правильно отображаться.

Ширина Единиц в долях. Например, pure-u-1-2 представляет ширину 1/2 или 50%, pure-u-2-5 представляет ширину 2/5 или 40% и так далее.

Дочерние элементы Pure Grid (элемент с классом pure-g) должны использовать имена классов pure-u или pure-u- * .

Весь контент должен быть частью сетки, чтобы правильно отображаться.

Размеры сетки

Pure Grid поставляется с 5-м и 24-м размерами. На следующих рисунках показаны примеры некоторых из доступных модулей, которые можно добавить к чисто пользовательскому интерфейсу . Например, чтобы создать ячейку шириной 50%, вы можете использовать стиль css pure-ui-1-2 .

5- е основанные единицы

purecss_5th_based.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class="grids-example">       	  
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">2-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-2-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">3-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-3-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">4-5</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-4-5"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
         
         <div class="grid-unit pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Результат

Проверьте результат.

24- е основанные единицы

purecss_24th_based.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Grid</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
         }	
         .grid-unit {
            margin: 0.25em 0;
            padding-left: 4.5em;
         }
         .grid-unit .grid-unit-width {
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
         }
         .grid-unit-bar {
            height: 2em;
            background: #eee;
         }
      </style>
   </head>
	
   <body> 
	
      <div class = "grids-example">       	  
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-24</div>
            <div class = "grid-unit-details pure-u-1">
			      <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-12</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-12"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">2-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-2-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">3-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-3-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-8</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-8"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">4-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-4-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-6</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-6"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">5-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-5-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-4</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-4"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">6-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-6-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">7-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-7-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1-3</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-1-3"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">22-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-22-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">23-24</div>
            <div class = "grid-unit-details pure-u-1">
               <div class = "pure-g">
                  <div class = "grid-unit-bar pure-u-23-24"></div>
               </div>
            </div>
         </div>
		 
         <div class = "grid-unit  pure-g">
            <div class = "grid-unit-width pure-u">1</div>
            <div class ="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">1-1</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-1-1"></div>
               </div>
            </div>
         </div>
		 
         <div class="grid-unit  pure-g">
            <div class="grid-unit-width pure-u">24-24</div>
            <div class="grid-unit-details pure-u-1">
               <div class="pure-g">
                  <div class="grid-unit-bar pure-u-24-24"></div>
               </div>
            </div>
         </div>
      </div>	
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — Формы

Pure.CSS имеет очень красивый и отзывчивый CSS для дизайна форм. Используются следующие CSS —

Sr.No. Имя класса и описание
1

чисто-формы

Представляет компактную встроенную форму.

2

чисто-формы стеками

Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде.

3

чисто-форма выровнены

Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде.

4

чистый ввод-закругленный

Отображает элемент управления формы с закругленными углами

5

чисто кнопки

Украшает пуговицу.

6

чисто-флажок

Украшает флажок.

7

чисто-радио

Украшает радио.

чисто-формы

Представляет компактную встроенную форму.

чисто-формы стеками

Представляет сложенную форму с элементами ввода под метками. Для использования в чистом виде.

чисто-форма выровнены

Представляет выровненную форму с элементами ввода под метками. Для использования в чистом виде.

чистый ввод-закругленный

Отображает элемент управления формы с закругленными углами

чисто кнопки

Украшает пуговицу.

чисто-флажок

Украшает флажок.

чисто-радио

Украшает радио.

пример

purecss_forms.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <form class = "pure-form pure-form-aligned">
         <fieldset>
            <div class = "pure-control-group">      
               <label for = "name">Username</label>
               <input id = "name" type = "text" placeholder = "Username" required>
            </div>
			
            <div class = "pure-control-group"> 
               <label for = "email">Email</label>
               <input id = "email" type = "text" placeholder = "Email Address" required>       
            </div>
			
            <div class = "pure-control-group">   
               <label for = "comments">Comments</label>
               <input id = "comments" type="text" placeholder = "Comments">       
            </div>
			
            <div class = "pure-controls">
               <label  for = "married" class = "pure-checkbox">
                  <input id = "married" type = "checkbox" checked = "checked">
                  Married
               </label>
               <br>
			   
               <label  for = "single" class = "pure-checkbox">
                  <input id = "single" type = "checkbox">
                  Single
               </label>
               <br>
			   
               <label for = "dontknow" class = "pure-checkbox">
                  <input id = "dontknow" type = "checkbox" disabled>
                  Don't know (Disabled)
               </label>               
               <br>
               <br>
            </div>
			
            <div class = "pure-controls">
               <label for = "male" class = "pure-radio">
                  <input id = "male" type = "radio" name = "gender" value = "male" checked>
                  Male
               </label>
               <br>
			   
               <label for = "female" class= "pure-radio">
                  <input id = "female" type = "radio" name = "gender" value = "female">
                  Female
               </label>
               <br>
			   
               <label for = "dontknow1" class = "pure-radio">
                  <input id = "dontknow1" type = "radio" name = "gender" value = "female" disabled>
                  Don't know (Disabled)
               </label>
               <button type = "submit" class = "pure-button pure-button-primary">Submit</button>
			   
            </div>
         </fieldset>
      </form>       
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — кнопки

Pure.CSS имеет очень красивый и отзывчивый CSS для настройки внешнего вида кнопки. Используются следующие CSS —

Sr.No. Имя класса и описание
1

чисто кнопки

Представляет стандартную кнопку. Может быть использован для стилизации ссылки и кнопки.

2

чисто-кнопка-инвалидов

Представляет отключенную кнопку. Для использования вместе с чистой кнопкой.

3

чисто-кнопка-активные

Представляет нажатую кнопку. Для использования вместе с чистой кнопкой.

чисто кнопки

Представляет стандартную кнопку. Может быть использован для стилизации ссылки и кнопки.

чисто-кнопка-инвалидов

Представляет отключенную кнопку. Для использования вместе с чистой кнопкой.

чисто-кнопка-активные

Представляет нажатую кнопку. Для использования вместе с чистой кнопкой.

пример

purecss_buttons.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Forms</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
      <style>
         .success,
         .error,
         .warning,
         .secondary {
            color: white;
            border-radius: 4px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
         }
         
         .success {
            background: rgb(28, 184, 65); /* green */
         }

         .error {
            background: rgb(202, 60, 60); /* maroon */
         }

         .warning {
            background: rgb(223, 117, 20); /* orange */
         }

         .secondary {
            background: rgb(66, 184, 221); /* light blue */
         }

         .xsmall {
            font-size: 70%;
         }

         .small {
            font-size: 85%;
         }

         .large {
            font-size: 110%;
         }

         .xlarge {
            font-size: 125%;
         }
      </style>	  	  
   </head>
	
   <body> 
      <h2>Standard Buttons</h2>
      <button class = "pure-button">Click Me</button>
      <button class = "pure-button pure-button-active">Click Me</button>
      <button class = "pure-button pure-button-disabled">I am disabled</button>

      <h2>Links as Buttons</h2>
      <a class = "pure-button">Link</a>
      <a class = "pure-button pure-button-active">Link</a>
      <a class = "pure-button pure-button-disabled">Disabled Link</a>

      <h2>Primary Button</h2>
      <a class = "pure-button pure-button-primary">Submit</a>    

      <h2>Customized button</h2>
      <button class = "pure-button success">Success</button>
      <button class = "pure-button error">Error</button>
      <button class = "pure-button warning">Warning</button>
      <button class = "pure-button secondary">Secondary</button>
	  
      <h2>Different Sized button</h2>
      <button class = "pure-button xsmall">Extra Small</button>
      <button class = "pure-button small">Small</button>
      <button class = "pure-button large">Large</button>
      <button class = "pure-button xlarge">Extra Large</button>
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — Столы

Pure.CSS может использоваться для отображения разных типов таблиц с использованием различных стилей поверх чистых таблиц.

Sr.No. Имя класса и описание
1

чистый стол

Представляет базовую таблицу с любым отступом по умолчанию, рамкой и выделенным заголовком.

2

чистый стол каймой

Рисует таблицу с рамкой между рядами.

3

чистый стол-горизонтальный

Рисует таблицу с горизонтальными линиями.

4

чистый стол полосатого

Отображает раздетую таблицу.

5

чистый стол-нечетный

При применении ко всем остальным tr изменяет фон строки и создает эффект в стиле зебры.

чистый стол

Представляет базовую таблицу с любым отступом по умолчанию, рамкой и выделенным заголовком.

чистый стол каймой

Рисует таблицу с рамкой между рядами.

чистый стол-горизонтальный

Рисует таблицу с горизонтальными линиями.

чистый стол полосатого

Отображает раздетую таблицу.

чистый стол-нечетный

При применении ко всем остальным tr изменяет фон строки и создает эффект в стиле зебры.

пример

purecss_tables.htm

Live Demo 

<html>
   <head>
      <title>The PURE.CSS Tables</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Tables Demo</h2>
      <hr/>
      <h3>Simple Table</h3>
	  
      <table class = "pure-table">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Bordered Table</h3>
      <table class="pure-table pure-table-bordered">
         <thead>
            <tr><
               th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Table with Horizontal Borders</h3>
      <table class="pure-table pure-table-horizontal">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
	  
      <h3>Stripped Table</h3>
      <table class = "pure-table pure-table-striped">
         <thead>
            <tr>
               <th>Student</th>
               <th>Class</th>
               <th>Grade</th>
            </tr>
         </thead>
         <tbody>
            <tr>
               <td>Mahesh Parashar</td>
               <td>VI</td>
               <td>A</td>
            </tr>
            <tr>
               <td>Rahul Sharma</td>
               <td>VI</td>
               <td>B</td>
            </tr>
            <tr>
               <td>Mohan Sood</td>
               <td>VI</td>
               <td>A</td>
            </tr>
         </tbody>
      </table>
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — Изображения

Pure.CSS предоставляет опции для отображения изображений адаптивным способом с использованием чистого изображения в качестве основного класса.

Sr.No. Имя класса и описание
1

чисто IMG

Представляет базовое стилизованное изображение без каких-либо границ. Изображение увеличивается и уменьшается с содержанием, сохраняя правильное соотношение.

чисто IMG

Представляет базовое стилизованное изображение без каких-либо границ. Изображение увеличивается и уменьшается с содержанием, сохраняя правильное соотношение.

пример

purecss_images.htm

Live Demo 

<html>
   <head>
      <title>The W3.CSS Images</title>
      <meta name = "viewport" content = "width=device-width, initial-scale=1">
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
   </head>
   
   <body> 
      <h2>Images Demo</h2>
      <hr/> 
      <div class = "pure-g">	
	  
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt="html5">
         </div>
		 
         <div class = "pure-u-1-4 pure-u-lg-1-8">
            <img class = "pure-img" src = "html5-mini-logo.jpg" alt = "html5">
         </div>
		 
      </div>
   </body>
</html>

Результат

Проверьте результат.

Pure.CSS — Иконки

Pure.CSS поддерживает следующие популярные библиотеки значков —

  • Font Awesome Icons
  • Google Material Icons
  • Bootstrap Иконки

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

Чтобы использовать значок, поместите его имя в класс HTML-элемента <i>.

пример

purecss_icons.htm

Live Demo 

<html>
   <head>
   
      <title>The PURE.CSS Icons</title>
	  
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
	  
      <link rel = "stylesheet" href = "https://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
	  
      <link rel = "stylesheet" href="https://fonts.googleapis.com/icon?family = Material+Icons">
	  
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
	  
      <style>  
         .xsmall {
            font-size: 70%;
         }
         .small {
            font-size: 85%;
         }
         .large {
            font-size: 110%;
         }
         .xlarge {
            font-size: 125%;
         }
      </style>
	  
   </head>
   
   <body> 
      <h2>Icons Demo</h2>
      <hr/>
      <h3>Font Awesome Icon Demo</h3>
      <i class = "fa fa-cloud xsmall"></i>
      <i class = "fa fa-cloud small"></i>
      <i class = "fa fa-cloud"></i>
      <i class = "fa fa-cloud large"></i>
      <i class = "fa fa-cloud xlarge"></i>
	  
      <h3>Google Material Design Icon Demo</h3>      
      <i class = "material-icons xsmall">cloud</i>	
      <i class = "material-icons small">cloud</i>
      <i class = "material-icons large">cloud</i>
      <i class = "material-icons xlarge">cloud</i>
      <i class = "material-icons">cloud</i>
	  
      <h3>Bootstrap Icon Demo</h3>
      <i class = "glyphicon glyphicon-cloud xsmall"></i>
      <i class = "glyphicon glyphicon-cloud small"></i>
      <i class = "glyphicon glyphicon-cloud"></i>
      <i class = "glyphicon glyphicon-cloud large"></i>
      <i class = "glyphicon glyphicon-cloud xlarge"></i>
	  
      <h3>Button with Icon Demo</h3>
      <button class = "pure-button"><i class = "fa fa-cog"></i> Settings</button>
      <a class = "pure-button" href = "#"><i class = "fa fa-shopping-cart fa-lg"></i> Checkout</a>
   </body>
</html>

Результат

Проверьте результат.

72
Share: