() translation by (you can also view the original English article)
Что такое Pure.css?
В то время как Bootstrap берет на себя огромное количество веб-сайтов, это может принести небольшую нагрузку на сайты, которые могут не понадобиться для вашего следующего проекта. Pure.css - это фреймворк от Yahoo; он предлагает минималистскую, хорошо документированную и гибкую альтернативу.
В этом уроке я расскажу вам о Pure, «наборе небольших, респосив модулей CSS, которые вы можете использовать в каждом веб-проекте». Мы рассмотрим набор функций и преимущества использования Pure, а затем рассмотрим некоторые основные примеры использования.
Если у вас есть какие-либо пожелания о будущих учебниках или вопросы и комментарии на этот, пожалуйста, разместите их ниже. Вы также можете связаться со мной в Twitter @reifman.
Выбор платформы
Pure предлагает все общие функции, которые вам нужны в стандартном фреймворке веб-дизайна. Итак, либо вы создаете тему для WordPress или собственный веб-сайт, Pure может быть хорошим вариантом.
Для менеджеров проектов обычно важно, чтобы клиентские проекты строились со стандартными инструментами, которые можно легко понять и поддерживать, а главное, что легко набирать таланты, которые легко входят в вашу платформу. Bootstrap идеально подходит для этого. Pure кажется мне достаточно простым, что он также может быть хорошей отправной точкой.
Краткое резюме
Вот краткий обзор преимуществ и особенностей Pure. Он обеспечивает:
- настраиваемая, responsive сетка
- встроенные вертикальные и горизонтальные меню, включая выпадающие меню
- кнопки, которые работают с элементами
<a>и<button> - гибкие выравнивания форм
- общие стили таблиц
- чистый, минималистский вид, который можно легко расширить
Тем не менее, наиболее впечатляюще, что Pure.css является очень маленьким, всего 4.5KB minified + gzipped. Вот сколько места занимают различные компоненты Pure в вашем production окружении:
Pure также хорошо протестирован и работает в IE 8+, Firefox, Chrome, Safari, iOS 6-8 и Android 4.x.
И вы все равно можете использовать его с элементами Bootstrap, добавляя их туда, где вам нужно. Я приведу пример этого ниже.
Pure построен на Normalize.css, который стандартизирует производительность фреймворка в браузерах. Normalize обеспечивает сброс CSS по умолчанию, который:
- сохраняет полезные значения по умолчанию
- нормализует стили для широкого диапазона элементов
- исправляет ошибки и общие непоследовательности браузера
- улучшает удобство использования с незначительными улучшениями
- объясняет, какой код использует подробные комментарии
Начало работы с Pure
Сайт Pure построен на собственном фреймворке, поэтому его минималистский, хорошо разработанный код приводит к простому ориентируемому и удобному руководству. Вот пример левого меню Pure в действии:
Вы можете добавить Pure на свою страницу через бесплатный CDN Yahoo. Просто добавьте следующий элемент <link> в <head> вашей страницы, перед таблицами стилей вашего проекта:
1 |
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css"> |
Чтобы инициализировать гибкую ширину вашего веб-сайта, установите метатег для окна просмотра на ширину вашего устройства:
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
Макеты
На странице Макетов Pure предлагает выборку загрузок для разных страниц примеров для общих приложений:
Вы можете просматривать и загружать любые из них, с которыми вы хотите поэкспериментировать или добавить в приложение. Они включают:
- Блог
- Эл. адрес
- Фотогалерея
- Целевая страница
- Ценовая галерея
- Отзывчивое боковое меню
- Отзывчивое горизонтально-вертикальное меню
- Отзывчивое горизонтально-прокручиваемое меню
Pure Base
На странице Base приведен краткий справочный материал о фундаменте под фреймворком Pure, в основном это Normalize.css:
Normalize.css - это небольшой CSS-файл, который обеспечивает лучшую согласованность между браузерами при стандартном стиле HTML-элементов. Это современная, готовая HTML5, альтернатива традиционному сбросу CSS.
Вы также можете загрузить Normalize отдельно с помощью CDN Yahoo для самостоятельного использования:
1 |
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css"> |
И есть другие небольшие базовые функции, такие как классы, которые позволяют Pure загружать изображения с помощью viewport:
1 |
<img class="pure-img" src="..."> |
Но теперь давайте посмотрим на некоторые из примеров макетов Pure.
Сетки
Сетки - ключевой аспект макетов веб-сайта, который Pure делает довольно простым. Вот краткий пример сетки Pure с четырьмя столбцами на рабочем столе:
И вот, как он уменьшает размер окна просмотра в размере пополам:
И, наконец, один столбец на смартфоне:
Чистые гриды состоят из двух типов классов: сеток и единиц. Детальные элементы разделов сетки должны быть делениями блоков. Ваш контент попадает внутрь разделов. Классы единиц называются для представления их ширины. Например, pure-u-1-4 имеет ширину 25%.
Вот код для responsive четвертого выше:
1 |
<div class="grids-example"> |
2 |
<div class="pure-g"> |
3 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
4 |
<div class="l-box"> |
5 |
<h3>Lorem Ipsum</h3> |
6 |
<p>
|
7 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. |
8 |
</p>
|
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
13 |
<div class="l-box"> |
14 |
<h3>Dolor Sit Amet</h3> |
15 |
<p>
|
16 |
Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse. |
17 |
</p>
|
18 |
</div>
|
19 |
</div>
|
20 |
|
21 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
22 |
<div class="l-box"> |
23 |
<h3>Proident laborum</h3> |
24 |
<p>
|
25 |
In culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. |
26 |
</p>
|
27 |
</div>
|
28 |
</div>
|
29 |
|
30 |
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> |
31 |
<div class="l-box"> |
32 |
<h3>Praesent consectetur</h3> |
33 |
<p>
|
34 |
Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus. |
35 |
</p>
|
36 |
</div>
|
37 |
</div>
|
Как вы можете видеть выше, <div class = "pure-g"> представляет собой внешний класс сетки. Затем <div class = "pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"> указывает браузеру показывать один столбец для минимальных видовых экранов, половины столбцов для среды и четверть столбцов для большой ширины.
Здесь вы можете узнать больше о Pure Grids.
Формы
Pure поддерживает выравнивание полей ввода в формах и создание специализированных полей, таких как:
- Встроенные формы
- Сложенные формы
- Двухколонные формы
- Много-колонные формы (показано выше)
- Сгруппированные инпуты
- Обязательные инпуты
- Отключенные инпуты
- Инпуты только для чтения
- Закругленные инпуты
- Флажки и радио
Вы можете увидеть все описанное здесь. Давайте рассмотрим двухколоночную форму, на которую Pure ссылается как форматированная форма:
Путем использования класса pure-form-aligned вместе с pure-control-group(s), Pure обеспечивает правильное расположение каждого набора полей, как показано выше.
1 |
form class="pure-form pure-form-aligned"> |
2 |
<fieldset>
|
3 |
<div class="pure-control-group"> |
4 |
<label for="name">Username</label> |
5 |
<input id="name" type="text" placeholder="Username"> |
6 |
</div>
|
7 |
|
8 |
<div class="pure-control-group"> |
9 |
<label for="password">Password</label> |
10 |
<input id="password" type="password" placeholder="Password"> |
11 |
</div>
|
12 |
|
13 |
<div class="pure-control-group"> |
14 |
<label for="email">Email Address</label> |
15 |
<input id="email" type="email" placeholder="Email Address"> |
16 |
</div>
|
17 |
|
18 |
<div class="pure-control-group"> |
19 |
<label for="foo">Supercalifragilistic Label</label> |
20 |
<input id="foo" type="text" placeholder="Enter something here..."> |
21 |
</div>
|
22 |
|
23 |
<div class="pure-controls"> |
24 |
<label for="cb" class="pure-checkbox"> |
25 |
<input id="cb" type="checkbox"> I've read the terms and conditions |
26 |
</label>
|
27 |
|
28 |
<button type="submit" class="pure-button pure-button-primary">Submit</button> |
29 |
</div>
|
30 |
</fieldset>
|
31 |
</form>
|
Это довольно простой способ построить очень полезную, хорошо выложенную форму.
Таблицы
Pure также упрощает создание и форматирование таблиц. Вот пример горизонтально полосатой таблицы:
Вы можете увидеть таблицу выше, закодированную, просто добавив класс pure-table-odd попеременно через ваш код, чтобы изменить чередование:
1 |
<table class="pure-table"> |
2 |
<thead>
|
3 |
<tr>
|
4 |
<th>#</th> |
5 |
<th>Make</th> |
6 |
<th>Model</th> |
7 |
<th>Year</th> |
8 |
</tr>
|
9 |
</thead>
|
10 |
|
11 |
<tbody>
|
12 |
<tr class="pure-table-odd"> |
13 |
<td>1</td> |
14 |
<td>Honda</td> |
15 |
<td>Accord</td> |
16 |
<td>2009</td> |
17 |
</tr>
|
18 |
|
19 |
<tr>
|
20 |
<td>2</td> |
21 |
<td>Toyota</td> |
22 |
<td>Camry</td> |
23 |
<td>2012</td> |
24 |
</tr>
|
25 |
|
26 |
<tr class="pure-table-odd"> |
27 |
<td>3</td> |
28 |
<td>Hyundai</td> |
29 |
<td>Elantra</td> |
30 |
<td>2010</td> |
31 |
</tr>
|
32 |
|
33 |
<tr>
|
34 |
<td>4</td> |
35 |
<td>Ford</td> |
36 |
<td>Focus</td> |
37 |
<td>2008</td> |
38 |
</tr>
|
39 |
|
40 |
<tr class="pure-table-odd"> |
41 |
<td>5</td> |
42 |
<td>Nissan</td> |
43 |
<td>Sentra</td> |
44 |
<td>2011</td> |
45 |
</tr>
|
46 |
|
47 |
<tr>
|
48 |
<td>6</td> |
49 |
<td>BMW</td> |
50 |
<td>M3</td> |
51 |
<td>2009</td> |
52 |
</tr>
|
53 |
|
54 |
<tr class="pure-table-odd"> |
55 |
<td>7</td> |
56 |
<td>Honda</td> |
57 |
<td>Civic</td> |
58 |
<td>2010</td> |
59 |
</tr>
|
60 |
|
61 |
<tr>
|
62 |
<td>8</td> |
63 |
<td>Kia</td> |
64 |
<td>Soul</td> |
65 |
<td>2010</td> |
66 |
</tr>
|
67 |
</tbody>
|
68 |
</table>
|
Здесь приведено несколько других примеров таблиц.
Меню
Меню в Pure также легко создать, оно включает в себя:
- Вертикальное меню
- Горизонтальное меню
- Выбранные и отключенные элементы
- Списки
- Вертикальное меню с подменю
- Прокручиваемое горизонтальное меню
- Прокручиваемое вертикальное меню
- Отзывчивое вертикальное меню
- Отзывчивое горизонтально-прокручиваемое меню
- Отзывчивое горизонтально-вертикальное меню
Все меню показаны здесь. Вот как вы бы описали выпадающее меню:
В принципе, это просто pure-menu-horizontal с pure-menu-list и pure-menu-item pure-menu-has-children pure-menu-allow-hover и затем набор дочерних элементов:
1 |
<div class="pure-menu pure-menu-horizontal"> |
2 |
<ul class="pure-menu-list"> |
3 |
<li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li> |
4 |
<li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover"> |
5 |
<a href="#" id="menuLink1" class="pure-menu-link">Contact</a> |
6 |
<ul class="pure-menu-children"> |
7 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li> |
8 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li> |
9 |
<li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li> |
10 |
</ul>
|
11 |
</li>
|
12 |
</ul>
|
13 |
</div>
|
Pure предоставляет пример JavaScript для реализации дополнительных возможностей доступа в ваши меню.
Идем дальше
На веб-сайте Pure есть несколько отличных руководств по фреймворку:
- Использование инструментов с Pure, таких как Bower и Grunt
- Настройка Pure и использование фрагментов кодовой базы самостоятельно
- Расширение возможностей и классов Pure
И вы можете изучить комбинацию Pure с Bootstrap и JavaScript. Если вы хотите начать с небольшого размера и минималистского стиля Pure, вы все равно можете использовать различные функции Bootstrap, загружая только то, что вам нужно.
Вот пример модального диалога Bootstrap поверх Pure, который вы можете увидеть на странице расширения Pure:
В заключение
Bootstrap становится IBM веб-фреймворками. Он отзывчивый, это стандарт, и вы не можете уволиться за его выбор (по недавнему контракту нам действительно нужно было приступить к разработке темы для неправильной реализации Bootstrap). Но, если вы хотите что-то меньшее, более быстрое и простое, то обратите внимание на Pure.css.
Если вы попробуете, пожалуйста, сообщите мне о вашем опыте в комментариях ниже. Вы также можете связаться со мной в Twitter @reifman. И вы также можете просмотреть мою страницу инструктора Envato Tuts + для прочтения моих других учебных пособий.
Ссылки по теме
