FaceDesign - это CSS фреймворк, который помогает создавать сайты в стиле Google Material Design.
Сегодня, Material Design есть одним из самых популярных стилей визуализации сайтов. Он интересен тем, что создает дополнительное пространство тенями, которые выглядит как-будто объемным.
В FaceDesign уже описаны все классы, которые нужны для роботы с стилизацией. Подобраны лучшие цвета и собрано все самое лучшее с этой сферы. Все классы имеют префикс fc-*
Для установки фреймворка, Вам необходимо скачать файл 'face.css'. Далее, нужно подключить его в Вашем HTML файле.
<head>
<link rel='stylesheet' href='face.css' />
</head>Блок, который нужен для правильного отображения колонок.
<div class="fc-container">
<div class="fc-l-6"></div>
<div class="fc-l-6"></div>
</div>Класс, который создает колонки. Имеет ряд доступных размеров колонок : от 1 до 12.
<div class='fc-3'></div>
<div class='fc-9'></div>Класс, который создает пространство слева от блока. Взаимодействует с колонками.
<div class='fc-offset-2 fc-8'></div>Класс, который создает колонки больших размеров. Существует несколько размеров колонок. От fc-l-1 до fc-l-12.
<div class='fc-l-6'>
Welcome
</div>
<div class='fc-l-6'>
to our site
</div>Повторяет то, что делает предыдущий класс, только рассчитан для меньших экранов. (до 1240)
<div class="fc-m-4"></div>
<div class="fc-m-4"></div>
<div class="fc-m-4"></div>Продолжает действия остальных елементов-колонок, только для экранов планшетов и телефонов. (до 720)
<div class="fc-m-12"></div>Последний вид колонок. Для экранов смартфонов и старых телефонов (до 480)
<div class="fc-xs-3"></div>
<div class="fc-xs-3"></div>
<div class="fc-xs-3"></div>
<div class="fc-xs-3"></div>Для создания навигатора, блоку необходимо указать класс .fc-nav. Он уже создаст стилизированый навигатор. Далее, в блоке нужно создать список, который сразу превратиться в ячейки навигатора.
<div class='fc-nav'>
<ul>
<li><a href='#'>Main</a></li>
<li><a href='#'>FAQ</a></li>
<li><a href='#'>Face</a></li>
</ul>
</div>Также, навигатор можно менять с помощью уже созданных классов, например fc-bgc :
<div class='fc-nav fc-bgc red'>
<ul>
<li><a href='#'>Main</a></li>
<li><a href='#' class='fc-color black'>FAQ</a></li>
<li><a href='#'>Face</a></li>
</ul>
</div>Навигатор также можно фиксировать :
<div class='fc-nav fc-fixed'>/.../</div>Полноэкранный блок с фоном-картинкой, который сейчас в моде. Имеет эффект параллакса при добавлении класса 'parallax'
//Без эффектов
<div class="fc-mid">
//.....
</div>
//Эффект параллакса
<div class="fc-mid parallax">
//.....
</div>Обычно используется в блоке 'fc-mid'. Класс создает фильтр с цветом, который по стандарту является серым. Можно выбрать другой цвет с помощью классов:
- red
- purple
- green
- blue
- yellow
- cyan
<div class="fc-mid">
<div class="fc-filter red">
//......
</div>
</div>Чтобы создать заголовок страницы на фоне картинки с фильтром, можна использовать класс 'fc-header'. Он центрирует блок и стилизирует заголовок.
<div class="fc-mid">
<div class="fc-filter cyan">
<div class="fc-header">
<h1>Hello world</h1>
</div>
</div>
</div>Элемент, который создан для стилизации блоков с новостями, постами, прочем...
<div class='fc-item'>/.../</div>Класс, который задает цвет текста. Имеет список встроенных цветов :
- red
- green
- blue
- purple
- white
- black
- orange
- tr (transparent)
<p class='fc-color red'>Welcome to Face CSS Framework</p>Класс, который задает фон елемента. Имеет список встроенных цветов :
- red
- green
- blue
- white
- black
- orange
- yellow
- purple
<div class='fc-bgc orange'>Welcome to Face CSS Framework</div>Класс, который стилизирует кнопки. Имеет уже заданые тени, цвета, хотя может меняться. Список доступных цветов :
- red
- green
- blue
- yellow
- yellow-white
- purple
- underline
<button class='fc-btn green'>Green Button</button>Эффект для кнопки. При наводке появляется нижнее подчеркивание, которое плавно уходит.
<button class='fc-btn green underline'>Underline Button</button>Класс, который стилизирует текст как цитату
<div class='fc-bq'>To be or not to be...</div>Позиционирование текста с помощью text-aligin. Значения, которые принимает класс :
- fc-tr ( right )
- fc-tl ( left )
- fc-tc ( center )