Pure.css пропонує інтригуючу альтернативу для Bootstrap

15 квітня 2017

Що таке Pure.css?

У той час як Bootstrap перейняв величезну кількість веб-сторінок, він може дещо знизити навантаження на сайти, які можуть не знадобитися для вашого наступного проекту. Pure.css - реактивна система Yahoo; він пропонує мінімалістську, добре документовану та гнучку альтернативу.

У цьому підручнику я збираюся познайомити вас із чистим "набором малих, чуйних модулів CSS, які ви можете використовувати в кожному веб-проекті". Ми розглянемо набір функцій та переваги використання Pure, а потім пройдемо основні приклади використання.

Якщо у вас є будь-які запити на майбутні навчальні посібники або питання та коментарі на сьогоднішній день, будь-ласка, опублікуйте їх нижче. Ви також можете доставити мене прямо до Twitter @reifman.

Вибір платформи

Pure пропонує всі загальні функції, які вам потрібні в стандартній структурі веб-дизайну. Отже, чи ви створюєте тему для WordPress або власного веб-сайту, це може бути хорошим варіантом.

Для керівників проектів критично важливо, щоб клієнтські проекти були побудовані за допомогою стандартних інструментів, які можна легко зрозуміти та підтримувати, і найголовніше, що легко набирати талант, який має досвід роботи на вашій платформі. Bootstrap ідеально підходить для цього. Чистий здається мені досить простим, що це також може бути гарною відправною точкою.

Оцінка чистих функцій

Ось короткий огляд переваг та функцій Pure. Він забезпечує:

На налаштовуваних, адаптованих gridnbuilt в вертикальному та горизонтальному меню, включаючи спадні меню, які працюють з елементамиі

Однак найбільш вражаюче, чистий.css є надзвичайно малим, лише 4.5KB minified + gzip. Ось скільки місця в різних виробничих середовищах містять різні компоненти Pure:

Pure також добре перевірено та працює в IE 8+, Firefox, Chrome, Safari, iOS 6-8 та Android 4.x.

І, ви все ще можете використовувати його з елементами Bootstrap, додаючи їх там, де вам потрібно. Я покажу приклад цього нижче.

Pure побудовано на Normalize.css, який стандартизує ефективність роботи платформи в браузерах. Нормалізація забезпечує скидання за замовчуванням CSS, яке:

зберігає корисні значення дефолту, нормалізує стилі для широкого коду елементів, виправляє помилки та загальні невідповідності браузера, підвищує юзабілітість з тонким поліпшенням, виявляє, який код використовує докладні коментарі

Початок роботи з чистим

Веб-сайт Pure будується з його основою, тому його мінімалістичний, добре розроблений код призводить до простого навігації, простим у використанні посібником. Ось приклад меню лівого меню Pure в дії:

Ви можете додати чистий до своєї сторінки через безкоштовний CDN Yahoo. Просто додайте наступнийелемент до вашої сторінкиперед таблицями стилю вашого проекту:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Щоб ініціалізувати адаптивну ширину вашого веб-сайту, встановіть метатег для перегляду на ширину пристрою:

<meta name="viewport" content="width=device-width, initial-scale=1">

Макети

На сторінці Макети Pure пропонує вибірку завантажень для різних прикладних сторінок для загальних потреб програми:

. Ви можете переглядати та завантажувати будь-яку з них, яку ви хочете експериментувати чи додавати до своєї програми. До них відносяться:

BlognEmailnPhoto gallerynLanding pagenRating galleryNextPersonal Side MenunResponsive Horizontal-to-Vertical MenunResponsive Horizontal-to-Scrollable Menu

Pure Base

Базова сторінка містить короткий фон на фундамент під чистою структурою, в першу чергу, Normalize.css:

.ormalize.css - це невеликий CSS-файл, який забезпечує кращу взаємозв'язок між різними браузерами за стандартним стилем елементів HTML. Це сучасна HTML5-версія, альтернатива традиційному скидання CSS.

Ви також можете завантажити Нормалізацію окремо за допомогою CDN Yahoo для самостійного використання:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/base-min.css">

І є інші невеликі фундаментальні функції, такі як класи, щоб розповісти чистим, щоб завантажувати образи в режимі перегляду:

<img class="pure-img" src="...">

Але тепер давайте поглянемо на деякі з прикладів макетів, які забезпечує Pure.

Сітки

Сітки є ключовим аспектом макетів веб-сайтів, які робить Pure досить простим. Ось короткий приклад чотирьох стовпчиків Pure grid на настільному дисплеї:

. І ось як це зменшується в половинному вікні перегляду зображень для планшета:

І, нарешті, один стовпчик на смартфоні:

Чисті сітки складаються з двох типів класів: сітки та вузли. Дитячі елементи grid divs повинні бути елементами divs. Ваш вміст потрапляє всередині пристрою divs. Класи класів називаються для позначення їх ширини. Наприклад, pure-u-1-4 має ширину 25%.

Нижче наведено код для відповідного четвертого:

<div class="grids-example">
    <div class="pure-g">
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Lorem Ipsum</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
            </p>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Dolor Sit Amet</h3>
            <p>
                Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
            </p>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Proident laborum</h3>
            <p>
                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.
            </p>
        </div>
    </div>
    <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">
        <div class="l-box">
            <h3>Praesent consectetur</h3>
            <p>
               Integer vitae lectus accumsan, egestas dui eget, ullamcorper urn. In feugiat tortor at turpis rhoncus tincidunt. Duis sed porttitor ante, eget venenatis lectus.
            </p>
        </div>
    </div>

Як видно вище,

представляє зовнішній клас сітки. Потім
вказує браузеру показати один стовпець для мінімальних видів перегляду, половини стовпців для середнього та чверть стовпців для великої ширини.

Тут можна дізнатись більше про чисті сітки.

Форми

Pure має підтримку для вирівнювання вхідних полів у формах і для стилізації спеціалізованих полів, таких як:

Inline formsN Заряжені формиN Двообіг формиn Велика колонка форми (показано вище) Grouped inputsnRequired inputsnDisabled inputsnRead тільки inputsnRounded inputsnCheckboxes і Radios

Ви можете побачити все це описане тут. Давайте розглянемо форму з двома колонками, яку Pure називає "вирівняною" формою:

. Використовуючи клас з чистою формою з pure-control-group (s), Pure гарантує, що кожен набір полів правильно розміщений як показано вище.

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">
        </div>
        <div class="pure-control-group">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
        </div>
        <div class="pure-control-group">
            <label for="email">Email Address</label>
            <input id="email" type="email" placeholder="Email Address">
        </div>
        <div class="pure-control-group">
            <label for="foo">Supercalifragilistic Label</label>
            <input id="foo" type="text" placeholder="Enter something here...">
        </div>
        <div class="pure-controls">
            <label for="cb" class="pure-checkbox">
                <input id="cb" type="checkbox"> I've read the terms and conditions
            </label>
            <button type="submit" class="pure-button pure-button-primary">Submit</button>
        </div>
    </fieldset>
</form>

Це досить простий спосіб створити дуже зручну, добре викладену форму.

Таблиці

Pure робить таблиці складання та форматування досить простими. Ось приклад горизонтального стриптизного столу:

Ви можете побачити таблицю вище, кодовану, просто додаючи рядки класу чистих таблиць, по черзі, через свій код, щоб змінити смужку:

<table class="pure-table">
    <thead>
        <tr>
            <th>#</th>
            <th>Make</th>
            <th>Model</th>
            <th>Year</th>
        </tr>
    </thead>
    <tbody>
        <tr class="pure-table-odd">
            <td>1</td>
            <td>Honda</td>
            <td>Accord</td>
            <td>2009</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Toyota</td>
            <td>Camry</td>
            <td>2012</td>
        </tr>
        <tr class="pure-table-odd">
            <td>3</td>
            <td>Hyundai</td>
            <td>Elantra</td>
            <td>2010</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Ford</td>
            <td>Focus</td>
            <td>2008</td>
        </tr>
        <tr class="pure-table-odd">
            <td>5</td>
            <td>Nissan</td>
            <td>Sentra</td>
            <td>2011</td>
        </tr>
        <tr>
            <td>6</td>
            <td>BMW</td>
            <td>M3</td>
            <td>2009</td>
        </tr>
        <tr class="pure-table-odd">
            <td>7</td>
            <td>Honda</td>
            <td>Civic</td>
            <td>2010</td>
        </tr>
        <tr>
            <td>8</td>
            <td>Kia</td>
            <td>Soul</td>
            <td>2010</td>
        </tr>
    </tbody>
</table>

Тут є кілька інших прикладів таблиці.

Меню

Меню в Pure також легко полегшено, в тому числі:

Вертичний MenunHorizontal MenunВибраний та відключений ItemsnDropdownsnВертичне меню з підменю прокруткою Горизонтальний MenunScrollable Вертикальний MenunResponsive Вертикальний MenunResponsive Горизонтально-прокручуваний MenunResponsive Горизонтально-вертикальний Menu

Переглянути всі меню, показані тут. Ось як ви мали б кодувати меню випадаючого меню:

. В основному це просто чисте меню-горизонтальне меню чистих меню і чистого пункту меню pure-menu-has-children pure-menu-allow-hover і то список дочірніх пунктів меню:

<div class="pure-menu pure-menu-horizontal">
    <ul class="pure-menu-list">
        <li class="pure-menu-item pure-menu-selected"><a href="#" class="pure-menu-link">Home</a></li>
        <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
            <a href="#" id="menuLink1" class="pure-menu-link">Contact</a>
            <ul class="pure-menu-children">
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Email</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Tumblr Blog</a></li>
            </ul>
        </li>
    </ul>
</div>

Pure надає зразок JavaScript для реалізації додаткових функцій доступності у вашому меню.

Їхати далі

Веб-сайт Pure пропонує кілька чудових посібників для побудови структури:

Використовуючи Інструменти з чистими, такі як Bower та GruntCustomizing Pure, і використовуючи скибочки кодів на їх власному розширенні чистих функціях і classes

І ви можете вивчити об'єднання шматки чистого з Bootstrap і JavaScript. Якщо ви хочете почати з невеликого розміру та мінімалістського стилю Pure, ви все ще можете використовувати різні функції Bootstrap, завантажуючи лише те, що вам потрібно.

Ось приклад діалогового вікна модного меню Bootstrap над версією Pure, який ви можете побачити на сторінці розширення Pure:

При закритті

Бутстрап стає IBM веб-рамок. Це чуйний, це стандарт, і ви не можете звільнити його, щоб вибрати його (за нещодавнім контрактом, нам дійсно доводилося запускати розробника теми, оскільки не правильно реалізовано Bootstrap). Але якщо ви хочете щось менше, швидше і простіше, то перевірте Pure.css.

Якщо ви спробуєте це зробити, будь ласка, дайте мені знати про ваш досвід у коментарі нижче. Ви також можете доставити мене прямо до Twitter @reifman. Також ви можете переглянути мою сторінку інструктора Envato Tuts +, щоб прочитати інші навчальні посібники.

Схожі посилання

Чистий BlognPure на GitHubPure: що, чому, і як? (Envato Tuts +) порівняти з Bootstrap