Все преимущества шаблонов дизайна и каркасов веб-компонентов без потери контроля над исходным кодом.
Бурбон Заправки Философия
Если вы устали жертвовать своими стандартами для шаблонов, разработанных людьми, которые могут не согласиться с вашей заботой о чистом и непротиворечивом исходном коде, или сред, которые хотят захватить весь ваш сайт, вы можете попробовать Bourbon Refills .
Библиотека Refills состоит из полезного набора независимых и настраиваемых компонентов веб-страниц, таких как аккордеоны, навигация по вкладкам, нижние колонтитулы, стеки шрифтов и другие удобства. Пополнения Bourbon доступны в виде наборов скоординированного кода HTML, SCSS и jQuery, готовых к использованию на вашем сайте для предоставления макета, функциональности и дизайна в быстрых фрагментах.
В отличие от веб-фреймворков типа «все или ничего», которые работают лучше всего, только если вы адаптируете весь сайт к их соглашениям, заправки могут быть хирургически применены на любом сайте, который может поддерживать базовую облегченную структуру Бурбона с аккуратным и биттерным , независимо от того, являются ли остальные Сайт основан на Бурбоне. Пополнения поддерживаются сообществом, но основная часть работы по компиляции и курированию библиотеки была сделана разработчиками из Thoughtbot , которые также являются движущей силой Bourbon.
Одним из самых приятных аспектов библиотеки Refills является то, что каждый шаблон или компонент полностью независим от других. Все элементы Refills являются отзывчивыми благодаря Neat и следуют соглашениям, которые делают их ненавязчивыми и переносимыми, например, избегая вложенности CSS глубиной более двух уровней, сводя стиль к минимуму и работая с переменными внутренней области видимости.
Вы даже можете добавлять новые шаблоны и компоненты, которые вы разработали, чтобы помочь расширить библиотеку, если вы будете следовать рекомендациям .
Начало работы с заправками
Чтобы успешно использовать библиотеку Refills, на вашем сайте должно быть несколько основных требований:
- Бурбон (4.0+)
- неразбавленный
- Биттер (10,1+)
- JQuery (для элементов, которые требуют JavaScript)
Нетрудно настроить все эти инструменты для бесперебойной работы во время разработки и простого развертывания в рабочей среде. Я написал несколько других статей на Sitepoint о Bourbon , Neat и Bitters и о том, как быстро начать работу с ними.
Может показаться, что вы добавляете большой вес на свою страницу, если все, что вам нужно, это быстрый заголовок, нижний колонтитул и несколько виджетов. Но имейте в виду, как работает Бурбон. Когда вы компилируете Sass для своей страницы, Bourbon и Neat практически исчезают, если вы явно не используете что-то. Bitters — это очень легкий набор настроек стиля, который по размеру сопоставим с базовым сбросом CSS (что также рекомендуется для согласованности между браузерами). И jQuery почти повсеместно распространен, и добавляет столько преимуществ с точки зрения удобного кросс-браузерно-совместимого JavaScript, что, скорее всего, вы уже используете его. И если вы загружаете jQuery из сети распространения контента (CDN), он может уже кэшироваться в браузере вашего посетителя к тому времени, когда он попадет на вашу страницу.
После настройки все, что вам нужно сделать, это просмотреть страницы Refills, чтобы найти элементы, которые вы хотите добавить на свой сайт, а также скопировать и вставить предоставленный код в файлы HTML, Sass и JavaScript.
Да, я сказал, скопируйте и вставьте. Успокаивать. Есть метод к безумию.
В отличие от других библиотек, которые живут изолированно и динамически вызываются при необходимости, Refills предназначены для включения и изменения в вашем коде. Многие элементы Refills включают в себя пример HTML, который вы хотите изменить с помощью своего собственного контента, и большая часть Sass и JavaScript подвержена другим изменениям, которые вы, вероятно, захотите внести, чтобы адаптировать его к стилю вашего собственного сайта. Заправки просто предоставляют вам отправную точку, а не конечный пункт назначения.
Добавление модифицированного Refill на ваш сайт похоже на использование созданного пользователем виджета, за исключением того, что вы имеете полный контроль над тем, что изменяется во время внесения изменений. Часто предоставляемый HTML-код можно рассматривать скорее как пример использования, чем как необходимый фрагмент кода. Например, HTML-код для шаблона «Таблицы» просто показывает стандартную таблицу с пользовательским классом, который запускает стиль Refills.
Этот подход означает, что библиотека Refills не заботится о том, как вы решите организовать свои файлы, если каждый кусок вставлен в место, где ваш стек сможет найти и интерпретировать его. Например, если вы используете модульный подход к компиляции Sass, вы можете создать отдельный файл module-name.scss для кода SCSS каждого пополнения, которое вы решите использовать, а затем @import этих файлов в файле main.scss с любыми другими модульными компонентами, которые вы, возможно, уже определили. Заправки поддержат этот подход так же легко, как и любой другой.
Узоры
Библиотека Refills содержит привлекательный набор знакомых компонентов презентации, которые они называют шаблонами. Если вы знакомы с типичным внешним видом многих сайтов, созданных на основе Twitter Bootstrap или Zurb Foundation , большинство этих элементов будут выглядеть довольно знакомо. Разница в том, что вы можете выбрать те, которые вы хотите иметь в своем коде, и оставить остальной сайт так, как вы хотите, чтобы он отображался.
Среди шаблонов: навигация с вкладками, элементы представления в карточном стиле (с дополнительными наложениями лент), гибкие сетки для представления изображений или информации, стандартные заголовки с раскрывающимся меню, поля героев, различные стили нижнего колонтитула, стилизованные таблицы, виджет Google Maps. наряду с несколькими другими. Вы можете поместить любой из них прямо в нестандартный сайт, чтобы он выглядел чистым и упорядоченным с минимальным или отсутствующим визуальным дизайном заранее, и получить приемлемый минималистский результат, который можно использовать.
Элементы очень простые, но это оставляет вам много места для их настройки и изменения в соответствии с потребностями дизайна. Благодаря интеграции с Bitters, вы можете легко изменять визуальные аспекты, такие как универсальный стиль границ или цветовая палитра, и получать эти изменения каскадно по всему дизайну. Шаблоны заправок также получают свою адаптивную природу благодаря бесшовной интеграции с сетками Neat для Bourbon.
Типичным примером шаблона является прокрутка навигации на странице. Это позволяет создать оглавление в верхней части страницы и перейти к любому разделу страницы с помощью плавной анимированной прокрутки, вернувшись к оглавлению с кнопками «В начало» по умолчанию.
Этот шаблон начинается с некоторого простого стандартного HTML, помеченного парой классов и идентификаторов, которые CSS и JavaScript будут использовать для назначения действий:
<div class="scroll-on-page"> <aside id="scroll-on-page-top"> <a class="scroll-on-page-link" href="#scroll-link-1">First Scroll Link</a> <a class="scroll-on-page-link" href="#scroll-link-2">Second Link</a> <a class="scroll-on-page-link" href="#scroll-link-3">Last Link</a> </aside> <article> <section> <h4 id="scroll-link-1">First Target</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> </section> <section> <h4 id="scroll-link-2">Second Target</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> </section> <section> <h4 id="scroll-link-3">Last Target</h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> <a class="scroll-on-page-link" href="#scroll-on-page-top">Back to top</a> </section> </article> </div>в<div class="scroll-on-page"> <aside id="scroll-on-page-top"> <a class="scroll-on-page-link" href="#scroll-link-1">First Scroll Link</a> <a class="scroll-on-page-link" href="#scroll-link-2">Second Link</a> <a class="scroll-on-page-link" href="#scroll-link-3">Last Link</a> </aside> <article> <section> <h4 id="scroll-link-1">First Target</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> </section> <section> <h4 id="scroll-link-2">Second Target</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> </section> <section> <h4 id="scroll-link-3">Last Target</h4> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum aliquid necessitatibus, repudiandae veniam labore, consequatur maiores dolore unde non deleniti, aliquam minima ex nulla error eveniet vel tempore, in incidunt?</p> <a class="scroll-on-page-link" href="#scroll-on-page-top">Back to top</a> </section> </article> </div>
Как вы можете видеть, это, очевидно, просто контент-заполнитель, и вы, скорее всего, будете использовать его в качестве модели для разработки и маркировки содержимого своей страницы, а не для его точного копирования. Макетная копия длинная, поэтому вы можете видеть, как работает вертикальная прокрутка, без смехотворно короткой страницы.
Следующий раздел кода предоставляет SCSS для образца стилей, который ответственно хранит элементы навигации отдельно от статьи, содержащей навигационные разделы:
.scroll-on-page aside { @include media($large-screen) { @include span-columns(4); } } .scroll-on-page-link { border-bottom: 1px solid transparentize($base-link-color, .8); padding: $base-spacing / 2 0; margin-right: $base-spacing; display: block; &:last-child { margin-bottom: $base-spacing; } } .scroll-on-page article { h4 { margin-bottom: .5em; } section p:last-of-type { margin-bottom: 2em; } @include media($large-screen) { @include span-columns(8); } } // Based on code by http://codepen.io/xmark/
Наконец, есть раздел с некоторым JavaScript для облегчения навигации:
(function (jQuery) { jQuery.mark = { jump: function (options) { var defaults = { selector: 'a.scroll-on-page-link' }; if (typeof options == 'string') defaults.selector = options; var options = jQuery.extend(defaults, options); return jQuery(options.selector).click(function (e) { var jumpobj = jQuery(this); var target = jumpobj.attr('href'); var thespeed = 1000; var offset = jQuery(target).offset().top; jQuery('html,body').animate({ scrollTop: offset }, thespeed, 'swing') e.preventDefault(); }) } } })(jQuery); jQuery(function(){ jQuery.mark.jump(); });
В этом случае полная реализация jQuery включается так, как вы бы поместили ее в элемент <script> , причем переменная jQuery используется в области видимости, а не в более знакомой переменной $ . Изучая библиотеку Refills, вы можете заметить, что некоторые элементы показывают только код jQuery, который вы бы использовали внутри вашего (function (jQuery) { ... })(jQuery); блок. Вы также можете использовать $ внутри области видимости вашей функции, поскольку она уже защищена. Но эти варианты оставлены на ваше усмотрение, и вам нужно обращать на них внимание при переходе от одного элемента Refills к другому, поскольку они не согласованы.
Компоненты
В отличие от шаблонов Refills, компоненты Refills, как правило, представляют собой меньшие виджеты, которые могут жить в более широком контексте на странице. Тем не менее, многие из них все еще будут казаться довольно знакомыми людям, которые работали с другими CSS-фреймворками в прошлом или видели, как соглашения появляются на разных сайтах. Некоторые из меньших, кажется, являются чуть более чем логическими расширениями библиотеки Bourbon Bitters, в то время как другие предоставляют гораздо больше функциональности.
Среди компонентов, которые вы можете выбрать: аккордеонные меню, цепочки, значки, группы кнопок, элементы постепенного появления, флеш-сообщения, анимация при наведении курсора, реализация прокрутки параллакса, индикаторы выполнения, скользящее меню, набор общих текстур, всплывающая подсказка и несколько других.
Опять же, основное внимание уделяется тому, чтобы сделать эти компоненты как можно более независимыми и общими и позволить им наследовать от стиля, перенесенного из Bitters.
Один из моих любимых инструментов использует изящный трюк HTML для предоставления интерактивного модального элемента, который не полагается на какой-либо JavaScript, но вместо этого использует возможность стилизовать элементы на основе состояния скрытого флажка HTML и селектора одноуровневых элементов CSS.
Для этого HTML-код снова очень прост:
<div class="modal"> <label for="modal-1"> <div class="btn js-btn">Click for Modal</div> </label> <input class="modal-state" id="modal-1" type="checkbox" /> <div class="modal-window"> <div class="modal-inner"> <label class="modal-close" for="modal-1"></label> <h1>Modal Title</h1> <p class="intro">Intro text lorem ipsum dolor sit ametm, quas, eaque facilis aliquid cupiditate tempora cumque ipsum accusantium illo modi commodi minima.</p> <p class="body">Body text lorem ipsum dolor ipsum dolor sit sit possimus amet, consectetur adipisicing elit. Itaque, placeat, explicabo, veniam quos aperiam molestias eriam molestias molestiae suscipit ipsum enim quasi sit possimus quod atque nobis voluptas earum odit accusamus quibusdam.</p> </div> </div> </div>
Возможно, вы захотите изменить некоторые классы, такие как «тело» и «вступление», в соответствии с тем, как вы обрабатываете свою классификацию контента. SCSS — это место, где происходит волшебство. И в этом случае он написан таким образом, что он очень аккуратно обрабатывает ряд кросс-браузерных проблем, следуя ряду полезных практик и оставаясь отзывчивым:
.modal { $modal-padding: 3em; $modal-background: $base-background-color; $modal-close-color: $light-gray; $modal-image-height: 135px; $modal-image-width: $modal-image-height; label { cursor: pointer; margin-bottom: 0; } label img { $img-width: 300px; border-radius: $img-width/2; display: block; max-width: $img-width; } input[type="checkbox"] { display: none; } .btn { @extend button; } .modal-open { overflow: hidden; } .modal-window { // overlay @include transition(opacity .25s ease); @include position(fixed, 0px 0px 0px 0px); background: rgba(0,0,0, .85); opacity: 0; text-align: left; visibility: hidden; z-index: 99999999999; .modal-bg { @include position(absolute, 0px 0px 0px 0px); cursor: pointer; } } .modal-close { @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null); @include size(1.5em); cursor: pointer; background: $modal-background; &:after, &:before { @include position(absolute, 3px 3px 0 50%); @include transform(rotate(45deg)); @include size(.15em 1.5em); background: $modal-close-color; content: '; display: block; margin: -3px 0 0 -1px; } &:hover:after, &:hover:before { background: darken($modal-close-color, 10); } &:before { @include transform(rotate(-45deg)); } } .modal-inner { @include transition(opacity .25s ease); border-radius: $base-border-radius; background: $modal-background; margin: auto; max-height: 95%; position: relative; overflow: auto; width: 95%; padding: $modal-padding /2; margin-top: .6em; @include media($medium-screen) { padding: $modal-padding; width: 60%; max-height: 60%; margin-top: 10em; } @include media($large-screen) { width: 50%; margin-top: 10em; } h1 { color: $base-font-color; margin-bottom: .6em; text-align: left; text-transform: capitalize; } p.body, p.intro { font-size: $base-font-size; max-width: 100% !important; text-align: left; &.intro { color: $blue; line-height: 1.6em; } &.body { color: $base-font-color; line-height: 1.45em; @include media($medium-screen) { @include columns(2 8em); } } } a.cta { color: white; display: inline-block; margin-right: .5em; margin-top: 1em; &:last-child { padding: 0 2em; } } } .modal-state:checked + .modal-window { opacity: 1; visibility: visible; } .modal-state:checked + .modal-window .modal-inner { top: 0; } } // Based on code by Kasper Mikiewiczтого, как.modal { $modal-padding: 3em; $modal-background: $base-background-color; $modal-close-color: $light-gray; $modal-image-height: 135px; $modal-image-width: $modal-image-height; label { cursor: pointer; margin-bottom: 0; } label img { $img-width: 300px; border-radius: $img-width/2; display: block; max-width: $img-width; } input[type="checkbox"] { display: none; } .btn { @extend button; } .modal-open { overflow: hidden; } .modal-window { // overlay @include transition(opacity .25s ease); @include position(fixed, 0px 0px 0px 0px); background: rgba(0,0,0, .85); opacity: 0; text-align: left; visibility: hidden; z-index: 99999999999; .modal-bg { @include position(absolute, 0px 0px 0px 0px); cursor: pointer; } } .modal-close { @include position(absolute, ($modal-padding /2) ($modal-padding /2) null null); @include size(1.5em); cursor: pointer; background: $modal-background; &:after, &:before { @include position(absolute, 3px 3px 0 50%); @include transform(rotate(45deg)); @include size(.15em 1.5em); background: $modal-close-color; content: '; display: block; margin: -3px 0 0 -1px; } &:hover:after, &:hover:before { background: darken($modal-close-color, 10); } &:before { @include transform(rotate(-45deg)); } } .modal-inner { @include transition(opacity .25s ease); border-radius: $base-border-radius; background: $modal-background; margin: auto; max-height: 95%; position: relative; overflow: auto; width: 95%; padding: $modal-padding /2; margin-top: .6em; @include media($medium-screen) { padding: $modal-padding; width: 60%; max-height: 60%; margin-top: 10em; } @include media($large-screen) { width: 50%; margin-top: 10em; } h1 { color: $base-font-color; margin-bottom: .6em; text-align: left; text-transform: capitalize; } p.body, p.intro { font-size: $base-font-size; max-width: 100% !important; text-align: left; &.intro { color: $blue; line-height: 1.6em; } &.body { color: $base-font-color; line-height: 1.45em; @include media($medium-screen) { @include columns(2 8em); } } } a.cta { color: white; display: inline-block; margin-right: .5em; margin-top: 1em; &:last-child { padding: 0 2em; } } } .modal-state:checked + .modal-window { opacity: 1; visibility: visible; } .modal-state:checked + .modal-window .modal-inner { top: 0; } } // Based on code by Kasper Mikiewicz
Как вы можете видеть, реагирующий код запекается в SCSS по умолчанию, и это зависит от того, как вы предпочитаете обрабатывать отзывчивость. Эти элементы легко скопировать и вставить, но очень важно прочитать код и понять, как он работает, когда вы попадете на свою страницу.
Обратите внимание, что исходный код, на котором основывался этот трюк, был получен от Каспера Микиевича , и кураторы Bourbon Refills стараются указывать источник любого кода, который они используют.
Тип Системы
Третье удобство, предоставляемое Bourbon Refills, представляет собой набор элегантных и тщательно настроенных систем типов, предназначенных для определения того, где заканчивается Bitters, и обеспечения настраиваемого сопоставления шрифтов, которое может придать сайту особую особенность. Они также настроены на последовательный вертикальный ритм для приятного и читаемого эффекта с блоками текста. Это очень важно, если вы ведете блог и ожидаете, что ваши читатели пройдут через несколько абзацев текста.
Типовые системы включают в себя засечек, без засечек, традиционные, плиты и другие. Эти имена должны быть знакомы всем, кто использует шрифты в современную эру Интернета, но сайт Refills дает наглядные примеры с каждым из них, чтобы вы могли быть уверены, что получаете то, что хотите. И как только вы примените систему типов, вы увидите ее стиль, отраженный в любом элементе Refills, который попадает в определенную вами область.
Еще одним преимуществом использования Refills является то, что шрифты настроены таким образом, чтобы преобразовывать изящные шрифты в собственные шрифты, которые соответствуют тем же целям дизайна, что и пользовательские шрифты, если загружаемые шрифты не поддерживаются. Это делается таким образом, чтобы он хорошо работал в разных операционных системах, которые могут не иметь одинаковые шрифты.
Типичным пополнением системы типов является закругленный без засечек. Это пополнение начинается снова с образца HTML, который вы, скорее всего, будете использовать в качестве руководства, чем для копирования и вставки непосредственно на свой сайт. Главное, на что следует обратить внимание, это то, что элемент <head> включает в себя элементы link которые извлекают фактические файлы шрифтов из CDN Google для быстрого и согласованного доступа:
<head> <link href='http://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'> </head> <article class="type-system-rounded"> <p class="type">Article Type</p> <h1>Article Heading</h1> <h2>These override some of the styles specified in the <code>_variables.scss</code> and <code>_typography.scss</code> partials in <a href="//bitters.bourbon.io">Bitters</a>. You can replace the typography variables and the header font specifications in Bitters with these styles. Then you won’t need the wrapping class <code>.type-system-name</code>.</h2> <p class="date">30 Mar 2014</p> <p><span>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit. Consequatur a, ullam, voluptatum incidunt neque doloremque vel inventore distinctio laudantium harum</a> illo quam nulla dolor alias iure impedit! Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. <a href="javascript:void(0)" class="read-more">Read More <span>›</span></a> </p> <h3>Subheading lorem</h3> <p><span>Consequatur ullam, voluptatum</span> incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit. Accusamus. Consequatur, a, ullam, voluptatum incidunt neque porro numquam doloremque vel inventore distinctio laudantium harum illo quam nulla dolor alias iure impedit! Accusamus.</p> <hr> <p class="author">Author Name</p> </article>
Предоставленный SCSS использует преимущества шрифтов, связанных с HTML, и применяет их таким образом, чтобы показать их наилучшее преимущество с использованием стандартных элементов HTML.
article.type-system-rounded { $sans-serif: 'Nunito', sans-serif; $sans-serif-2: 'Varela Round', sans-serif; @include clearfix; text-align: left; .type { border-bottom: 1px solid; display: inline-block; font-family: $sans-serif; font-size: .7em; font-weight: 800; margin-bottom: 2em; padding: .3em 0; text-align: left; text-transform: uppercase; } h1 { font-family: $sans-serif-2; font-size: 1.8em; margin-bottom: .5em; @include media($medium-screen) { font-size: 2.4em; } } h2 { font-family: $sans-serif-2; font-size: 1.2em; font-weight: 400; line-height: 1.4em; margin-bottom: .9em; @include media($medium-screen) { font-size: 1.4em; } } code { white-space: nowrap; font-family: monaco; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: $base-border-radius * 1.5; padding: .1em .4em; font-size: .7em; font-style: normal; } h3 { font-family: $sans-serif-2; font-size: 1.2em; font-weight: 400; line-height: 1.3em; margin-bottom: .4em; } p.date { color: transparentize($base-font-color, .6); font-family: $sans-serif; font-size: .9em; margin-bottom: .3em; } p { font-family: $sans-serif; line-height: 1.4em; font-size: 1.05em; font-weight: 300; margin-bottom: 1.5em; span { font-family: $sans-serif-2; text-transform: uppercase; font-size: 0.8em; } } a.read-more { display: inline-block; font-family: $sans-serif-2; font-weight: 700; font-size: .8em; text-transform: uppercase; margin-left: .2em; position: relative; span { position: absolute; font-size: 1.5em; top: -1px; right: -12px; } } hr { width: 3em; } p.author { font-family: $sans-serif; } }
SCSS координирует вес шрифта и высоту строки, чтобы обеспечить наиболее приятное чтение. И, конечно, если вы решите внести какие-либо изменения, код будет для вас, чтобы вы могли поиграть и настроить его на свой вкус.
Вещи, чтобы помнить
Несмотря на то, что Refills является отличным ресурсом для людей, которые не хотят использовать предопределенный фреймворк или шаблон, при его использовании необходимо помнить о некоторых вещах. Одна из неприятностей, которые я обнаружил на сайте Refills, заключалась в том, что при нажатии на кнопки «копировать», чтобы скопировать текст примера в буфер обмена, обратной связи не поступало. Как только вы поймете это, вам нужно просто обратить внимание и убедиться, что вы скопировали и вставили то, что ожидали.
Другой недостаток заключается в том, что библиотека Refills представляет собой набор статических примеров, готовых для включения в ваши страницы, но они не представлены в широком диапазоне форматов. Например, я часто предпочитаю использовать HAML, когда пишу свою разметку, но предоставленный код всегда является стандартным HTML. Это личный выбор, хотите ли вы использовать HTML, переписать HTML в HAML, Jade или по своему собственному предпочтительному синтаксису, выполнить некоторые действия из командной строки или использовать инструмент автоматического преобразования .
Аналогично, все примеры Sass представлены в популярном формате SCSS. Если вы используете традиционный формат Sass с отступом, вам может потребоваться изменить рабочий процесс, чтобы обеспечить правильную интерпретацию кода SCSS. У каждого синтаксиса есть ряд преимуществ, и в конечном итоге речь идет о том, как вы предпочитаете заниматься разработкой , поэтому имейте это в виду при рассмотрении Refills.
Вы также можете заметить некоторое несоответствие в JavaScript для Refills. Многие из компонентов созданы сообществом, поэтому они могут не следовать тем же соглашениям о кодировании. Например, я заметил некоторые компоненты, которые используют более старый синтаксис .bind() jQuery для обработки событий, в то время как другие приняли более современный синтаксис .on() .
Если у вас есть соглашения, которые вам нравятся, обновлять элементы Refills не составит труда, чтобы они соответствовали стилю, который вы предпочитаете.
Заправки для всех
Самое замечательное в Refills — то, как хорошо они играют с библиотеками Бурбонов, и насколько они маленькие и независимые. Гибкость дизайна вашего сайта не помешает, если вы добавите Refills на свою страницу, и вы сможете быстро перейти от простого дизайна к чему-то достаточно привлекательному и готовому к стилю.
Для разработчика, который знает, что она делает, и ищет стиль безобидного дизайна для проекта, обеспечивая при этом хорошую основу для передачи настоящему дизайнеру, Bourbon Refills может быть просто самым удобным вариантом там.