Обзор
Alignment.css — это небольшой CSS-файл, который обеспечивает для HTML-элементов лучшую кроссбраузерность в стилях и выравнивает мелкие недочеты в традиционном style2.css?79 на chatovod.ru. Alignment.css создан на основе предложенной проектом ChaTemplate версии style3.css и будет работать до вступления предложенных изменений в силу (style2.css?80+ or style3.css).
Проект является продуктом нескольких дней исследования недочетов в коде классических шаблонов чатовода. Это исследование провели участники Chatovod’а: Madeas,
Цели alignment.css:
- корректировать ошибки и основные несоответствия стилей;
- сохранять полезные настройки стилей чата, а не стирать их;
- нормализовать стили для широкого круга HTML-элементов;
- усовершенствовать юзабилити незаметными улучшениями;
alignment.css — код для вставки в чат
@import не разрешается вставлять после любых объявлений кроме @charset или другого @import.
alignment.css — исходный код на GitHub
Исправляет популярные ошибки
alignment.css исправляет практически не заметные недочеты в коде,
такие как:
и приводит чат к более совершенному виду. А так же, добавляет обозначение кликабельным html элементам, приводит к единообразию скроллбары, убирает подчеркивания и многое другое.
Типографика в alignment.css
Типогра́фика — искусство оформления при помощи наборного (не рисованного) текста, базирующееся на определённых, присущих конкретному языку правилах, посредством набора и вёрстки. Типографика, с одной стороны, представляет собой одну из отраслей графического дизайна, с другой — свод строгих правил, определяющих использование шрифтов в целях создания наиболее понятного для восприятия читателя текста.
alignment.css имеет встроенный набор шрифтов, который поддерживается FontAwesome и Google Fonts.
- Inconsolata — с засечками — без засечек
- Exo 2 — с засечками — без засечек
- Comfortaa — с засечками — без засечек
- Roboto — с засечками — без засечек
- Work Sans — с засечками — без засечек
- Raleway — с засечками — без засечек
- Barlow — с засечками — без засечек
- Montserrat — с засечками — без засечек
- Playfair Display — с засечками — без засечек
- Source Sans Pro — с засечками — без засечек
- Nunito — с засечками — без засечек
- FontAwesome
Как использовать Google Fonts
Чтобы использовать один из предложенных шрифтов, вам нужно:
- 1. выбрать класс, которому вы хотите подключить шрифт. Это может быть как кнопка или конкретная ссылка, так и весь шрифт в чате.
- 2. установить выбранному классу код такого вида:
.chatMessage { font-family:'Inconsolata'; }
Найти некоторые другие классы Вы можете в нашем разделе FAQ по CSS для Chatovod.
Пример шрифта с засечками:
.chatMessage {
font-family:'Inconsolata';
}
Засе́чки — короткий штрих на конце буквы, с которого начинается и которым заканчивается основной штрих знака. Это один из основных признаков шрифтовой формы.
Пример шрифта без засечек:
.chatMessage {
font-family:'Inconsolata', sans-serif;
}
Шрифт без засечек называется «sans serif» или «sans-serif» (от фр. sans — «без»). В некоторых типографских источниках шрифт без засечек называют гротесковым (рубленым) или готическим, а шрифт с засечками — романским.
Как использовать FontAwesome
Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн.
Как работает FontAwesome?
Пример:
В чатоводе, к сожалению, мы не можем редактировать структуру html и добавлять нужные нам элементы, однако, мы можем добавить иконки при помощи юникода шрифта и псевдоэлементов css.
.chatMessage::before {
font-family:'FontAwesome';
content:'\f2c0';
}
Что нужно знать?
Чтобы установить иконку в чат, вам необходимо знать два условия:
1. Класс, которому хотите присвоить иконку
2. Юникод иконки
Как узнать юникод?
На страничке с иконками шрифта выберите нужную вам иконку и щелкните по ней. На открывшейся перед вами страничке вы можете найти Юникод, который представляет собой набор букв и цифр, например f2c0. Для каждой иконки используется свой юникод.
Сохраняет полезные настройки по умолчанию
Несмотря на то, что проект основан на принципе нормализации, он использует стандартные настройки там, где они предпочтительны. То есть, он только корректирует шероховатости кода, не изменяя основную структуру чата, таким образом, не влияет на ручные настройки пользователей.
Сделайте свой чат ярче вместе с ChaTemplate
Если Вы знаете или заметили еще какие-нибудь неисправности и недочеты в оригинальном шаблоне, напишите нам в чат https://chatemplate.chatovod.ru/ и мы обязательно это поправим.