Продолжение обзора фреймворка Foundation, в котором приступим к практической части и научимся создавать кнопки на этом фреймворке.
Почему сразу такой быстрый переход к практике? Я сам всегда так учился всему и считаю, что это наилучший способ научиться что-либо делать. Нежели долго и нудно жевать сопли теории, чтобы когда-нибудь перейти к практике. Остальные основы Foundation я буду изучать с вами в дальнейшем, шаг за шагом.
Итак, в [первой части знакомства с Foundation][1] я с вами установил фреймворк Foundation c поддержкой Sass/Compass под операционной системой Linux Mint 17 и подготовил его к работе. Давайте откроем созданный утилитой foundation индексный файл index.html и рассмотрим его содержимое. “Шапка” 1
head
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>В первой строке производится подключение файла CSS-стилей 1
app.css
1
app.css
Вторая строка - это подключение библиотеки Modernizr и больше тут сказать нечего.
Если заглянуть в самый конец HTML-документа, то увидим три строки подключения js-скриптов перед закрывающим тегом 1
</body>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script src="js/app.js"></script>Ситуация здесь почти такая же, как и с “шапкой” head документа. Подключается библиотека jQuery (куда же без нее?), коллекция готовых js-скриптов от Foundation 1
foundation.min.js
1
app.js
1
app.css
Между тегами 1
<body></body>
Кнопки на Foundation
Создание кнопок на фреймворке Foundation занятие малоутомительное. Для этой цели используется тег 1
a
1
.button
Кнопки, созданные на Foundation c помощью предопределенных классов, имеют полностью готовый вид, вплоть до CSS-свойства transition.
Обычная кнопка на Foundation
Как я уже упоминал выше, для создания кнопки под Foundation достаточно присвоить тегу 1
a
1
.button
<a href="#" class="button">read more</a>
Все очень просто. Готовый результат можно посмотреть в браузере. Я же перейду к более интересному вопросу создания различных модификаций (вариантов) стандартной кнопки 1
.button
Кнопки разных размеров
Начнем с группы классов, служащих для создания кнопок различных размеров. В этой группе имеются четыре класса для создания четырех размеров кнопок:
1
.tiny
1
.small
1
.medium
1
.large
В качестве примера приведу ниже HTML-код создания таких кнопок:
<a href="#" class="button tiny">tiny</a>
<a href="#" class="button small">small</a>
<a href="#" class="button medium">medium</a>
<a href="#" class="button large">large</a>
Как видно из приведенного выше кода, используется мультиклассовость - добавление к классу 1
.button
1
.tiny
1
.small
1
.medium
1
.large
Скругленные кнопки на Foundation
В фреймворке имеются два готовых класса для создания скругленной формы у кнопки. Первый класс - 1
.radius
1
.round
1
.radius
1
.round
HTML-код создания таких кнопок показан ниже:
<a href="#" class="button radius">radius</a>
<a href="#" class="button round">round</a>
Информационные кнопки на Foundation
Не знаю, точно ли такое название отражает предназначение подобных кнопок, но на другом фреймворке - Twitter Bootstrap как имеется такое название для этих кнопок, поэтому решил и в Foundation назвать их также.
1
.secondary
1
.success
1
.alert
HTML-код для создания информационных кнопок:
<a href="#" class="button secondary">secondary</a>
<a href="#" class="button success">success</a>
<a href="#" class="button alert">alert</a>
Другие варианты кнопок
Есть еще два класса для создания двух состояний кнопки. Первый класс 1
.disabled
1
cursor: default;
1
.expand
1
.disabled
1
.expand
HTML-код двух описанных выше кнопок:
<a href="#" class="button disabled">disabled</a>
<a href="#" class="button expand">expand</a>
Тонкая настройка кнопок в Foundation
Помимо возможности использования готовых классов с предустановленными CSS-значениями, в фреймворке Foundation можно изменять значения по умолчанию из готового файла настроек. Данный файл называется 1
_settings.scss
В этом файле собраны настройки в виде переменных Sass для всех компонентов фреймворка Foundation, но в данном случае нам необходимы переменные, отвечающие за настройку кнопок. Данные переменные находятся в секции файла, начинающейся со строки 1
BUTTONS
$include-html-button-classes: $include-html-classes;
// Настройка величины padding кнопок
// $button-tny: rem-calc(10);
// $button-sml: rem-calc(14);
// $button-med: rem-calc(16);
// $button-lrg: rem-calc(18);
// Настройка блочной модели и нижнего margin кнопки
// $button-display: inline-block;
// $button-margin-bottom: rem-calc(20);
// Настройка шрифта надписей кнопок
// $button-font-family: $body-font-family;
// $button-font-color: #fff;
// $button-font-color-alt: #333;
// $button-font-tny: rem-calc(11);
// $button-font-sml: rem-calc(13);
// $button-font-med: rem-calc(16);
// $button-font-lrg: rem-calc(20);
// $button-font-weight: $font-weight-normal;
// $button-font-align: center;
// Настройка эффекта hover
// $button-function-factor: -20%;
// Настройка границ кнопок
// $button-border-width: 0px;
// $button-border-style: solid;
// $button-bg: $primary-color;
// $button-border-color: scale-color($bg, $lightness: $button-function-factor);
// Настройка радиуса скругления кнопок
// $button-radius: $global-radius;
// $button-round: $global-rounded;
// Настройка прозрачности кнопки с классом disabled
// $button-disabled-opacity: 0.7;В принципе, элементарных знаний CSS должно быть достаточно, чтобы понять предназначение всех этих переменных. Поэтому давайте ради примера выполним пару изменений, чтобы увидеть результат. Для этого находим в файле 1
_settings.scss
1
BUTTONS
Пусть это будут строки:
$button-tny: rem-calc(10);
$button-font-color: #fff;… в которых изменим значение переменных по умолчанию на:
$button-tny: rem-calc(12);
$button-font-color: #ddd;Если теперь заглянуть в инспектор свойств Firebug, то увидим, что padding для кнопки с классом 1
.tiny
1
#fff
1
#ddd
Создание кнопок с помощью Sass
Рассмотренный выше способ редактирования значений переменных для тонкой настройки кнопок хорош. Но все-таки он утомителен и времязатратен - это нужно открыть файл 1
_settings.scss
Фреймворк Foundation имеет в своем арсенале еще один способ использования готовых CSS-классов и тонкой настройки Sass-переменных. Преимущество этого способа еще в том, что он по настоящему семантичен и позволяет не загромождать HTML-разметку чрезмерным количеством CSS-классов. Короче - этот способ использует Sass-миксины для подключения CSS-классов и изменения значений Sass-переменных.
Допустим, в нашей HTML-разметке имеется ссылка:
<a class="readmore">Read More</a>Чтобы превратить ее в кнопку на Foundation, нужно в файле 1
app.css
.readmore{
@include button;
}В результате получим готовую кнопку! Чтобы иметь более тонкую настройку при создании кнопки, нужно передать миксину button переменные в качестве аргументов:
.readmore{
@include button($padding, $bg, $radius, $full-width, $disabled, $is-input);
}Например, таким образом:
.readmore{
@include button($bg: #778899, $radius: true);
}
На этом все.