Вступление
Некоторые из наиболее регулярных и частых читателей сети могут вспомнить мою предыдущую серию под названием « Создайте адаптивный мобильный сайт с нуля» . Это началось с создания макетов и каркасов до адаптации макета в соответствии с используемыми устройствами.
Я решил заняться этим небольшим проектом, чтобы показать вам, как воссоздать те же веб-страницы, стиль и макеты за меньшее время, используя простую среду CSS под названием « Pure ».
В этом коротком уроке я сосредоточусь только на некоторых элементах, которые вы можете найти на веб-сайте, в частности, показав, как воссоздать классическое горизонтальное меню, минимальную структуру сетки с двумя столбцами и простую форму для контактов.
Прежде чем идти дальше, позвольте мне кратко рассказать об этой современной и современной структуре, выделив основные ее модули и объяснив некоторые ее основные особенности.
Чисто: что это?
Pure — это фреймворк, который помогает вам управлять всеми элементами веб-сайта, чтобы они отлично выглядели на экранах любого размера, независимо от того, какое устройство вы выбрали. Он работает в IE 7+, Firefox, Chrome, Safari, iOS 6.x и Android 4.x.
Одна из его главных особенностей — это вес. На самом деле, это легкая и полная библиотека, вес которой составляет всего 4,4 КБ, она минимизирована и сжата и состоит из шести основных модулей:
- База
- Сетки
- формы
- Кнопки
- таблицы
- меню
Среди наиболее важных характеристик следует отметить, что библиотека основана на знаменитом Normalize.css , настраиваемом файле CSS, который позволяет браузерам отображать все элементы более согласованно и в соответствии с современными стандартами, а также помогает исправить кросс-браузерную совместимость. проблемы (которых всегда много!). Pure обеспечивает чрезвычайно минималистский вид, который очень легко настроить в нескольких аспектах.
Например, вы можете использовать Skin Builder, чтобы создавать свои собственные цветовые схемы и изменять другие функции, такие как радиус границы и вертикальное заполнение, а также Grid Builder, чтобы создать собственную систему сетки с настраиваемыми точками останова медиазапроса и размерами столбцов. К другим замечательным функциям Pure относятся стили для вертикальных и горизонтальных меню, формы, кнопки, различные распространенные стили таблиц, а также адаптивный по умолчанию (с опцией без ответа).
На данный момент, первое, что нужно, чтобы начать открывать интересный мир Pure, — это включить файл Pure CSS в наш проект, загрузив его из CDN Yahoo:
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css"/> После этого мы можем приступить к трем различным задачам, которые мы запланировали в самом начале этой статьи.
Обратите внимание, что я сообщу, чтобы избежать путаницы, только HTML-код, и вы найдете все спецификации, касающиеся стиля в уникальном загружаемом файле.
Не обращайте внимания на стиль, пожалуйста: моя единственная цель в этом уроке — познакомить вас с новым подходом, альтернативным способом написания кода, позволяющим разработчикам, которые не знают об этой возможности, начать с самого начала и учиться на основы. Прости меня, я надеюсь, что скоро у меня будет возможность приятно удивить тебя хорошим графическим учебником.
Задача 1: создать горизонтальное меню
Среди готовых общих элементов, которые вы можете найти на многих веб-сайтах в Интернете, есть очень хорошо известное и используемое горизонтальное меню. Как вы помните, в третьей части статьи, посвященной написанию семантического кода HTML5, я использовал элемент <nav> , который является семантическим элементом, используемым для объявления навигационного раздела веб-сайта (то есть раздел страницы, который ссылается на другие страницы или на части внутри страницы) и содержит неупорядоченный список, содержащий основные ссылки нашего веб-сайта. Сделав это, я применил необходимые правила в таблице стилей CSS, чтобы отобразить их горизонтально.
Теперь, что мы должны сделать, чтобы получить тот же результат, используя библиотеку Pure? Для достижения этой цели первым шагом является применение к .pure-menu оболочки списка ( <nav> ) трех классов: .pure-menu , .pure-menu-open и .pure-menu-horizontal . Первый применяет правила, которые являются общими для всех меню в Pure; второй ( .pure-menu-open ) используется для отображения элементов списка, а третий и последний отвечает за отображение элементов списка в одной строке.
Будьте осторожны, что по умолчанию меню не центрировано. Кроме того, чтобы улучшить пользовательский интерфейс, мы должны выделить элемент списка, который ссылается на текущую страницу. Это делается путем применения .pure-menu-selected к элементу <li> вы хотите выделить. При этом цвет текста изменится с серого на черный.
После этого это должен быть ваш окончательный код:
<nav id="main-menu" class="pure-menu pure-menu-open pure-menu-horizontal"> <ul class="menu-list"> <li class="pure-menu-selected"><a class="menu-item-link" href="#">Homepage</a></li> <li class="pure-menu-selected"><a class="menu-item-link" href="#">News</a></li> <li class="pure-menu-selected"><a class="menu-item-link" href="#">Graphics</a></li> <li class="pure-menu-selected"><a class="menu-item-link" href="#">Mobile</a></li> <li class="pure-menu-selected"><a class="menu-item-link" href="#">Web Design</a></li> </ul> </nav>
Вот скриншот этой маленькой части кода: 
Задача 2: Сетка контента
После меню давайте посмотрим, как мы можем управлять контентной частью нашей веб-страницы. На простой домашней странице, созданной для предыдущей серии по RWD, мы находим сетку, состоящую из двух блоков: слева есть поле, посвященное разделам скринкастов, а справа — пространство, предназначенное для размещения последних твитов автор.
Левый и правый блоки занимают 50% своего пространства, если ширина экрана превышает 767 пикселей. Напротив, если ширина экрана равна или меньше ширины экрана, единицы сетки располагаются друг над другом и занимают 100% доступной ширины.
Когда я перечислил модули, доступные в Pure, был также конкретный модуль для управления сетками. Чтобы объявить .pure-gr сетку, вы должны применить к контейнеру класс .pure-gr . Единицы сетки имеют похожее имя, .pure-u-*-* , где последняя часть класса указывает, сколько места займет данный модуль.
Система сетки, разработанная Pure, действительно полезна, потому что она позволит вам сэкономить много времени, но, прежде всего, избегать управления «неприятными» элементами, такими как float, clear и другими, используемыми для создания макетов. Кроме того, они избавят вас от всех проблем и неловких ситуаций, связанных с управлением отзывчивой стороной макета.
Тем не менее, давайте посмотрим пример того, как работает система Pure Grid, реализуя ситуацию, описанную выше:
<div class="pure-gr"> <aside id="video-box" class="pure-u-1-2 small-box shadow"> <p> Screencast box </p> </aside> <aside id="twitter-box" class="pure-u-1-2 small-box shadow"> <p> Twitter box </p> </aside> </div>в<div class="pure-gr"> <aside id="video-box" class="pure-u-1-2 small-box shadow"> <p> Screencast box </p> </aside> <aside id="twitter-box" class="pure-u-1-2 small-box shadow"> <p> Twitter box </p> </aside> </div>в<div class="pure-gr"> <aside id="video-box" class="pure-u-1-2 small-box shadow"> <p> Screencast box </p> </aside> <aside id="twitter-box" class="pure-u-1-2 small-box shadow"> <p> Twitter box </p> </aside> </div>
Задача 3: Отзывчивая контактная форма
Хотя на этом образце страницы, который я создал, формы нет, я решил подробно изучить и предложить другой (безусловно, полезный) модуль библиотеки Pure, благодаря которому вы можете отображать формы в нескольких различных типах стилей. Для этого примера мы создадим сложенную форму, где элементы ввода находятся ниже меток. Чтобы пойти дальше, мы должны добавить два класса к элементу <form> : .pure-form и .pure-form-stacked .
Затем мы должны поместить метку и входные теги в оболочку, к которой мы применим .pure-control-group а затем поместить все эти оболочки в элемент <fieldset> . Кнопка отправки и сброса также будет иметь оболочку, но их оболочка будет иметь класс .pure-controls . Для кнопки отправки мы использовали .pure-button-primary чтобы выделить его, принадлежащий модулю Buttons, и использовали для изменения стиля кнопки (дополнительную информацию и примеры можно найти в соответствующем разделе).
Вот ваш окончательный результат:
<div class="pure-u-1-2"> <form id="contact" name="contact" action="#" method="post" class="pure-form pure-form-stacked"> <fieldset> <legend>A Stacked Form</legend> <label>Name:</label> <input type="text" name="name" placeholder="Name" /> <label>Email</label> <input type="email" name="email" placeholder="Email" /> <label>Subject</label> <input type="text" name="subject" placeholder="Subject" /> <label>Message:</label> <textarea name="message" placeholder="Your message here..."></textarea> <div class="pure-controls"> <input type="submit" class="pure-button pure-button-primary" value="Submit" /> <input type="reset" class="pure-button" value="Reset" /> </div> </fieldset> </form> </div>
Вот как будет выглядеть ваша простая форма: 
Выводы
Из этого простого и короткого учебного пособия вы должны были понять огромный потенциал этой новой и универсальной среды. Примите во внимание возможность использования одного или нескольких его модулей в ваших будущих проектах, чтобы не только сэкономить время, но и попрактиковаться в кодировании с использованием другого подхода.
Если вы хотите узнать больше о Pure, вы можете найти дополнительную информацию на веб-сайте или посетить его репозиторий на GitHub .
Вы можете найти весь код здесь .