Фреймворки значительно сокращают время разработки проектов. Некоторые из них, такие как Bootstrap , довольно популярны и предлагают множество функций, но вам может не понадобиться все это для вашего проекта. Сегодня мы сосредоточимся на новой платформе под названием Spectre . Это легкий, современный, отзывчивый и мобильный телефон. Он весит около 6.8kb, когда подается в миниатюрном и сжатом виде. Помимо базовой системы сетки, она также имеет много других полезных различных компонентов, таких как вкладки, модалы и карты и т. Д.
В этом руководстве будет представлен краткий обзор этой структуры, а также некоторые рекомендации, которые помогут вам быстро начать работу.
Установка
Вы можете либо загрузить минимизированный файл Spectre.css напрямую, либо использовать npm и Bower для его установки. Как только вы закончите, вы можете включить файл в свой проект как обычные таблицы стилей.
<link rel="stylesheet" href="link/spectre.min.css" /> Вы также можете создать свою собственную версию фреймворка, отредактировав файлы Less в каталоге /src или удалив ненужные компоненты из файла spectre.less . Затем вы можете создать свой CSS-файл из командной строки, используя Gulp.
Сетка
Spectre имеет адаптивную сеточную систему на основе flexbox с 12 столбцами. Ширина каждого столбца определяется его именем класса. Каждый класс начинается с col- а затем следует число, представляющее, сколько столбцов должно быть в ширину у этого конкретного элемента. Например, col-12 имеет ширину 12 столбцов, что дает ему ширину 100%, а col-3 имеет ширину 3 колонки или четверть col-12 , что дает ему 25%. По умолчанию разные столбцы будут иметь некоторый промежуток между ними. Вы можете сократить этот пробел, добавив класс col-gapless в их контейнер. Как и Bootstrap, он также предлагает классы, такие как col-md-[1-12] , col-sm-[1-12] и col-xs-[1-12] чтобы помочь вам контролировать ширину элементов, когда размер окно просмотра изменится.
Он также предоставляет классы, такие как hide-xs , hide-sm и hide-md чтобы скрыть элементы в окнах определенного размера.
Все столбцы будут отображаться в виде одной строки, если ширина области просмотра меньше 480 пикселей. col-xs-* будут применяться ко всем элементам с шириной более 480 пикселей. Аналогично, col-sm-* будет применяться к ширине области просмотра более 600 пикселей, а col-md-* будет применяться к ширине области просмотра более 800 col-md-* .
Следующий фрагмент кода создает один столбец с шириной 33,333% (столбец col-4 ), два столбца с шириной 25% (столбец col-3 ) и один столбец с шириной 16,66% (столбец col-2 ).
<div class="container"> <div class="columns"> <div class="column col-4"> <div class="col-content">col-4</div> </div> <div class="column col-3"> <div class="col-content">col-3</div> </div> <div class="column col-3"> <div class="col-content">col-3</div> </div> <div class="column col-2"> <div class="col-content">col-2</div> </div> </div> </div>
В демонстрации ниже я создал как базовую, так и вложенную систему. Как видно из демо, не сложно создать сложные макеты.
Основные элементы
Spectre включает в себя некоторые стили по умолчанию для типографских элементов, таких как заголовки, абзацы и цитаты. Каркас также оптимизирован для азиатских шрифтов. Он имеет несколько классов, таких как highlight или lead чтобы выделить некоторые разделы вашего текста. Следующая демонстрация показывает все эти функции сразу:
Вы также можете добавить table классов к любому элементу <table> . Затем фреймворк применит к вашей таблице базовые стили, такие как отступы и стили границ, чтобы придать вашей таблице более чистый вид по умолчанию. Он также соответствующим образом оформит строку заголовка вашей таблицы. Вы можете использовать класс table-striped чтобы сделать таблицу полосатой и включить стили наведения, добавив класс table-hover .
Эта демонстрация демонстрирует, как легко создавать необычные адаптивные таблицы, используя Spectre:
Также есть несколько классов для кнопок. Чтобы использовать стили кнопок по умолчанию, вам нужно добавить класс btn . Вы можете контролировать размер кнопок, используя классы btn-sm , btn-lg и btn-block . Класс btn-block будет создавать кнопки полной ширины. Чтобы сгруппировать несколько кнопок вместе, вы можете использовать btn-group в их контейнере.
В Spectre также есть правила стиля для общих элементов формы, таких как метки, поля ввода и текстовые области, что придает им чистый и стильный вид. Чтобы создать горизонтальную форму, вам нужно добавить класс form-horizontal к элементу <form> . Затем вы можете контролировать ширину дочерних элементов, используя один из классов из col-[1-12] . Обратите внимание, что форма будет горизонтальной, только если область просмотра имеет ширину не менее 840 пикселей. Чтобы увеличить или уменьшить элементы формы, достаточно добавить классы input-sm/input-lg или select-sm/select-lg .
Вы также можете прикрепить некоторый текст или кнопку к элементу ввода, добавив группу input-group класса в контейнер ввода. Вам нужно будет добавить класс input-group-addon к сопутствующему текстовому элементу и input-group-btn к элементу button.
Основная форма показана в этой демонстрации:
навигация
Навигация является неотъемлемой частью даже самых простых веб-сайтов. Помня об этом, Spectre предлагает три навигационных компонента — панель навигации, вертикальное меню и хлебные крошки. Панель навигации может содержать такие элементы, как логотип, навигационные ссылки, кнопки и другие элементы, например поле поиска. По умолчанию навигационная панель имеет очень минимальный стиль, поэтому вам не нужно прилагать много усилий для ее настройки. Вот разметка для создания базовой панели навигации:
<header class="navbar"> <section class="navbar-section"> <a href="#" class="navbar-brand">SitePoint</a> </section> <section class="navbar-section"> <a href="#" class="btn btn-link">HTML5</a> <a href="#" class="btn btn-link">CSS3</a> <a href="#" class="btn btn-link">JavaScript</a> <a href="#" class="btn btn-primary">Sign Up</a> </section> </header>
Помимо панели навигации, вы также можете создавать вертикальные меню. Для этого необходимо добавить menu класса в соответствующий элемент контейнера. Вы можете добавить menu-item класса ко всем дочерним элементам в вашем меню. Фреймворк использует этот класс для добавления своего собственного стиля в соответствии с остальными компонентами. Различные пункты меню могут быть разделены с помощью divider или menu-header .
Вы также можете реализовать меню хлебных крошек, используя класс breadcrumb . Все дочерние элементы должны иметь имя класса breadcrumb-item .
Все три меню, которые мы обсуждали в этом разделе, показаны в демонстрации ниже:
Модалы и открытки
Два важных компонента, которые мы не обсуждали до этого момента, — это модалы и карты. Они похожи на своих аналогов Bootstrap.
модальности
Вы можете добавить modal класс к элементам контейнера, чтобы создать модалы. Внутри этого контейнера вы можете добавить один фактический элемент модального контейнера с классом modal-container и элемент модального наложения с классом modal-overlay . Внутри вашего контейнера вы можете добавить фактические элементы с помощью классов modal-header , modal-content и modal-footer . Вы можете контролировать размер ваших модалов, используя класс modal-sm . Код ниже создаст для вас основной модал:
<div class="modal modal-sm active"> <div class="modal-overlay"></div> <div class="modal-container"> <div class="modal-header"> <button class="btn btn-clear float-right" type="button"></button> <div class="modal-title">Modal title</div> </div> <div class="modal-body"> <div class="content"> <p>This is some text inside the Modal.</p> </div> </div> <div class="modal-footer"> <button class="btn btn-primary" type="button">Close</button> </div> </div> </div>
В демонстрации ниже я добавил функциональность, чтобы модал появлялся и исчезал. Это просто вопрос добавления и удаления active класса.
Карты
Карты — это гибкие контейнеры общего назначения. Вы можете использовать их для хранения самых разных вещей. Они могут быть созданы с помощью card класса. Сама карта может иметь детей с классами card-header card-content card-footer card-image или card-image зависимости от их назначения. Вот основной фрагмент, чтобы показать разметку типичной карты:
<div class="card"> <div class="card-image"> <img class="img-responsive" src="img-path/bp.jpg"> </div> <div class="card-header"> <h2 class="card-title">Heading</h2> <p class="card-meta">Some Meta Data</p> </div> <div class="card-body"> <p>Something related to the image or the heading goes here!</p> </div> </div>
Вы можете обернуть карты в классы, такие как col-6 col-md-8 и т. Д., Чтобы контролировать их ширину. Вы также можете поместить элементы, такие как кнопки или метки внутри карты, если это необходимо. Демонстрация CodePen ниже показывает две карты с изображениями в разных положениях:
Больше компонентов
Другие компоненты, такие как «тосты», похожи на предупреждения в Bootstrap. Компонент Toast может содержать текст и другие значки. Вы также можете по желанию добавить кнопку закрытия к ним. Тосты могут быть использованы для разных целей. Есть классы, доступные для обслуживания каждой из этих целей. Для тоста успеха вы можете использовать toast-success класса. Это сделает тост зеленым. Аналогично, существуют классы для сообщений об ошибках ( toast-danger ) и общей информации ( toast-primary ).
Spectre также имеет другие общие компоненты, такие как значки, ярлыки, нумерация страниц и всплывающие подсказки. Вы можете посетить официальный сайт, чтобы прочитать обо всех этих компонентах.
Кроме того, в фреймворке также есть служебные классы, такие как text-left , text-lowercase , float-left , centered чтобы помочь вам с небольшими изменениями макета. Служебный класс float-right можно увидеть в действии в модальной демонстрации выше, где он применяется к маленькой кнопке x в модальном заголовке.
Еще один полезный класс — это loading , которую можно добавлять к кнопкам или элементам div для отображения анимации загрузки.
Последние мысли
Хорошая особенность Specter — вам не нужно переопределять множество стилей по умолчанию. Фреймворк просто обеспечивает минимальное оформление элементов, что само по себе довольно прилично. Учитывая количество компонентов, которые он предлагает, размер также очень разумный. Единственным недостатком Spectre является то, что он не обеспечивает JavaScript для добавления взаимодействия ко всем его компонентам. Это означает, что вам придется написать собственный код, чтобы показать или скрыть модальные окна и другие подобные взаимодействия, но это не так сложно достичь.
Фреймворк определенно стоит попробовать. Каковы ваши взгляды на Призрак? Планируете ли вы использовать его в любом из ваших проектов? Дайте нам знать об этом в комментариях.