Универсальность

Проекты любой сложности.

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

Гид по стилю

На основе SMACSS

Pure разбит на набор адаптивных модулей. С самого начала мы приняли SMACSS как соглашение для написания нашего CSS. Для тех, кто плохо знаком с SMACSS, вы должны быстро прочитать его, особенно раздел о правилах модуля.

Соглашения об именах классов

Одно из соглашений в Pure заключается в том, что каждый модуль должен иметь стандартное имя класса для общих правил в модуле, а затем иметь дополнительные имена классов для определенных правил представления для конкретного подмодуля. Все классы начинаются с pure-префикса, чтобы предотвратить коллизии. Кроме того, мы стараемся не использовать презентационные имена классов. Вместо того, чтобы что-то называть pure-form-horizontal, мы предпочитаем называть это pure-form-aligned. Это предотвращает тесную связь между именами классов и стилями, что улучшает ремонтопригодность.

Например, давайте рассмотрим HTML и CSS для составной формы :

Сложенная форма: HTML

Сложенная форма создается путем добавления двух имен классов pure-formи pure-form-stacked.

<form class="pure-form pure-form-stacked"></form>

Сложенная форма: CSS

The two class names serve different purposes. One is used as a general selector to group common rules for all forms, while the other defines specific rules for a stacked form.

/*
    Standard rules that all Pure Forms have. This includes rules for
    styling .pure-form &lt;inputs&gt;, &lt;fieldsets&gt;, and &lt;legends&gt;, as well as layout
    rules such as vertical alignments.
*/
.pure-form { ... }

/*
    Specific rules that apply to stacked forms. This includes rules
    such as taking child &lt;input&gt; elements and making them display: block
    for the stacked effect.
*/
.pure-form-stacked  { ... }

Extending Pure

When you're extending Pure, we recommend that you follow this convention. For instance, if you wanted to create a new type of form, your HTML and CSS should look something like this:

<form class="form-custom pure-form"></form>
/* add your custom styles in this selector */
.form-custom { ... }

One common task that you may wish to do is to style buttons so they look different. The Pure Button Documentation has some examples on how you can create buttons with custom sizes and styles by adopting this modular architecture.

Pure + Bootstrap + JavaScript

Pure хорошо работает с другими библиотеками, включая Bootstrap и jQuery. Как разработчик, вы можете использовать Pure как базовую структуру CSS, а затем включить определенные модули Bootstrap или jQuery, которые могут потребоваться вашему приложению. У этого есть несколько преимуществ:

  • CSS вашего веб-сайта или веб-приложения будет намного меньше - в некоторых случаях до 5 раз меньше !

  • Вы получаете минималистский вид Pure, который легко надстраивать. Не нужно перезаписывать стили!

  • Вы можете воспользоваться преимуществами экосистемы Bootstrap, не загружая монолитный файл CSS Bootstrap.

Например, вот модальный файл Bootstrap. Он создается путем включения Pure CSS Rollup и простого добавления Bootstrap modal.cssвместе с плагином jQuery.

<!-- Button to trigger modal -->
<p>
    <a href="#myModal" role="button" className="pure-button-primary pure-button" data-toggle="modal">
    Launch Pure + Bootstrap Modal
    </a>
</p>

<!-- Modal -->
<!--
    * Bootstrap v2.3.2
    *
    * Copyright 2012 Twitter, Inc
    * Licensed under the Apache License v2.0
    * http://www.apache.org/licenses/LICENSE-2.0
    *
    * Designed and built with all the love in the world @twitter by @mdo and @fat.
    -->
<div id="myModal" className="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div className="modal-header">
        <h1 id="myModalLabel">A Bootstrap Modal with Pure</h1>
    </div>
    <div className="modal-body">
        <p>
            This modal is launched by including <em>just</em> the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap, and including Pure to drive all low-level styles. The result is a fully-functional Modal using just a fraction of the CSS.
        </p>
        <form className="pure-form pure-form-stacked">
            <legend>A Stacked Form</legend>
            <label for="email">Email</label>
            <input id="email" type="text" placeholder="Email">
            <label for="password">Password</label>
            <input id="password" type="password" placeholder="Password">
            <label for="state">State</label>
            <select id="state">
                <option>AL</option>
                <option>CA</option>
                <option>IL</option>
            </select>
            <label className="pure-checkbox">
            <input type="checkbox"> Remember me
            </label>
        </form>
    </div>
    <div className="modal-footer">
        <button className="pure-button" data-dismiss="modal" aria-hidden="true">Close</button>
        <button className="pure-button pure-button-primary">Submit</button>
    </div>
</div>
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>