Данная заметка подойдет больше новичкам в верстке, нежели уже состоявшимся специалистам, и больше содержит некоторые личные впечатление, чем какие-то практические советы, хотя и они тоже будут.
Уж не знаю почему так повелось, но довольно долго я верстала на чистом CSS и, в целом, меня все устраивало. Необходимости перехода на новый динамический язык стилей не было. Справедливости ради, стоит отметить, что идея перехода на LESS или SASS зародилась уже давно. Просто не находила своей практической реализации, к тому же я долго думала, какое из расширений мне больше пойдет.
Но одним прекрасным днем, что-то резко изменилось и я твердо решила уже перейти хоть на что-нибудь. Так получилось, что выбор пал на SASS.
Переход случился быстрым и безболезненным, сразу на боевом проекте. Были опасения, что придется мучительно привыкать к новому синтаксису, однако, я перестроилась довольно успешно и в кратчайшие сроки.
Порадовало, что есть очень подробная документация на русском на официальном сайте https://sass-scss.ru, так что даже новичок быстро освоится. Для меня, как для человека, который давно практикует чистый CSS, никаких проблем не было. SASS поддерживает все то же, но при этом гораздо удобнее, за счет вложенности, переменных, импорта, большого количества удобных директив и так далее, и, даже, немного умеет в программирование, что удивило и порадовало.
Немного из личного опыта работы с SASS. Вещь может быть очевидной, но не совсем видимой на первых порах работы со стилями: все переменные, используемые в проекте, стоит хранить в отдельное SASS файле и импортировать уже в общие стили. Я рекомендую это делать для удобства, чтобы не скакать каждый раз по коду в поисках того, как же вы назвали переменную, отвечающую за белый цвет, к примеру.
Стоит обратить внимание, что SASS все же требует предварительной установки в ваш IDE, но с этим тоже нет трудностей. Опять же, обо всем этом можно почитать на официальном сайте, там все объяснено доступным языком.
Так же стоит помнить, что браузеры не понимают других стилей кроме как с расширением css, поэтому при работе с SASS ваша среда разработки должна уметь компилировать все sass-стили в одни большие общие стили CSS. Либо стоит обзавестись любым удобным для вас препроцессором.
В целом SASS оставляет приятное ощущение, он прост, удобен и имеет гораздо больше возможностей чем CSS. Он попросту шире. Тем не менее, если вы только встали на путь Frontend-разработчика, стоит какое-то время поработать с чистым CSS. Понять, как работает наследование, псевдоэлементы и стили в целом. Отточить навык. И только потом переходить на расширения.
Однажды, нам поступило задание изменить цвет кнопки. Ну кнопка и кнопка. Обычное, рядовое задание. Самое любопытное, что перекрасить надо было в деревянный цвет.
Кстати, вот код rgb на тот самый деревянный цвет: #b3a28f. Теперь мы знаем, как он выглядит :)
Каждый фронтенд-разработчик в своей практике сталкивался с элементами дизайна, которые ни в верстке, ни в стилях, ни в js не предусматривались. Откуда они взялись? Отладчик – верный помощник любого фронтендера, как на зло, так же ничем помочь не может, он просто ничего не показывает.
Все просто – это стандартные псевдоклассы, встроенные по умолчанию во внутренние стили браузера. Например, как в случаи со стилем outline, который необходимо отменять в самом начале работы, если конечно дизайн вашего сайта не подразумевает голубую подсветку форм.
Часто появляющимися псевдоэлементами может похвалиться Google Chrome, впрочем, другим движкам на webkit так же ничего не мешает отличиться.
Надо методично стилизовать все внутренние стили браузера.
Например, довольно часто встречается баг фича с input, когда на input с типом search появляется «синий крестик». На самом деле это кнопка, которая чистит ввод поиска пользователя. Кнопка может и полезная, но практика показывает, что с точки зрения дизайна сайта она совершенно не приемлема и не вписывается в общую концепцию. Убирается эта кнопка по средствам следующей конструкции:
input[type=search]{ -webkit-appearance: none;}
Еще одним интересным примером является настройка placeholder все в том же input. Помимо стандартного: цвета шрифта и бекграунда формы, выявилась интересная особенность ее отображения внешнего вида все в том же Google Chrome. Суть проблемы заключалась в том, что слово, заложенное в placeholder на темном бекграунде так же оставалось темным. Несмотря на значение color: #fff для input, ничего не менялось. Решение представлено ниже. Обратите внимание на двойное двоеточие. Если оно будет одинарным, то правило не сработает:
Поэтому, если в процессе верстки вдруг появляется что-то, что разработчиком не предусматривалось, не стоит паниковать! В первую очередь стоит проверить, а не портят ли картину встроенные псевдоклассы браузера.
Несмотря на относительно давний релиз Font Awesome 5, руки его хоть сколько-нибудь обозреть дошли только сейчас.
Итак, что же такое Font Awesome и чем версия 4.7.0 отличается от 5?
Ну, начнем с того, что Font Awesome это уникальная библиотека всевозможных иконок, так необходимых в веб-дизайне, представленная в виде простого шрифта, с которым, при подключении, можно делать все, что душе угодно: изменять размер, цвет, положение и многое другое. Очень универсальная штука, легкая в обращении, а главное, бесплатная.
Данный шрифт базируется на возможностях CSS и LESS.
Впервые Font Awesome показал себя миру 21 августа 2012 года и с тех пор прочно вошел в набор инструментов многих фронтенд разработчиков.
Шло время, шрифт набирал популярность, обновлялся, и, совсем недавно вышел релиз Font Awesome 5. Для того, чтобы его создать, команда разработчиков создала страницу на кикстартере и уже через месяц собрала сумму в 3 раза превышающую запрошенный бюджет.
Итак, 7 декабря 2017 года мир увидел обновленный Font Awesome. В чем же отличия от старой версии? Ну, во-первых, само количество иконок 946 бесплатных иконок (и +1 535 в Про-версии. Итого 2481 новых иконок) против 675 в версии 4.7.0. Кстати, введение Font Awesome 5 Pro-версии тоже стало нововведением. Отличием от бесплатной версии является более разнообразный дизайн уже имеющихся иконок. Появилось разделение на «толстые», «обычные» и «тонкие» символы. Во-вторых больше функций и возможностей. Но, обо всем поподробнее ниже.
Не смотря на релиз в декабре 2017 года, на момент написания статьи вышло уже несколько обновлений (Font Awesome 5.0.8). Шрифт до сих пор дорабатывается. Например, до сих пор налаживается поддержка для Android и iOS.
Подключается Font Awesome 5 так же, как и его младший собрат, то есть 2-мя способами: как сторонний подключаемый из вне компонент и как скачиваемый и внедряемый шрифт. Если вы имели дело с более ранними версиями, то с подключением нового Font Awesome у вас не будет проблем. Сохранилась функция изменения размера иконки непосредственно в ее теге. Например, при добавлении класса fa-sm вы получите иконку равную .875em. так же остались анимированные символы. А вот в отличие от предыдущих версий появились интересные функции Power Transforms, Masking и Layering, Text, & Counters.
Так что же в них интересного? Power Transforms позволяет как бы увеличивать и выносить иконку за пределы ее бэкграунда. Благодаря этому, создается эффект цельности фона и иконки. С помощью Masking можно одни иконки накладывать на другие. Layering, Text, & Counters в целом, выполняет те же функции, что и Masking, но с гораздо большим количеством иконок и их вариативностью расположения.
Поддержка осуществляется всеми браузерами начиная от IE 10 и IE 11 и заканчивая Яндексом в последних двух версиях.
Но, пожалуй, наиболее важным является возможность подключения Font Awesome как SVG и через JavaScript.
Обо всем этом, можно подробнее ознакомиться непосредственно на сайте Font Awesome 5
В целом, новая версия Font Awesome оставила приятное впечатление: как и прежде, простота в подключении, основной контент и набор самых распространенных иконок по-прежнему бесплатен, понятная документация в открытом доступе, приятный дизайн новых и редизайн старых иконок, больше возможностей для реализации всех творческих замыслов, удобный конструктор создания своих уникальных символов за счет функций Masking и Layering, Text, & Counters. Ну и конечно, совместимость с SVG и JavaScript.
Как уже говорилось выше, новая версия Font Awesome все еще находится в стадии доработки, и мы с предвкушением ждем новых обновлений от команды разработчиков.
Если нужно разместить на странице несколько кнопок, которые будут заполнять значения одной CRM-Формы, которые будут приходить по ajax - нужно сделать так:
Добавляем на страницу скрытую кнопку с классом, b24-web-form-popup-btn-X, где X = ID Битрикс формы
Используем функцию reinitB24Dvsform(), в данном случае на вход идёт значение поля формы LEAD_TITLE, можно вызывать в скрипте, или по событию onclick
<?php
// JS код
/**
* Инициализируем настройки формы, ОБЯЗАТЕЛЬНО указываем ref
*/
function initB24CrmDvsForm(b24val) {
return {"id":"8","lang":"ru","sec":"y8awav","type":"button","click":"", "ref":'https://ACCOUNT.bitrix24.ru/bitrix/js/crm/form_loader.js', "fields": {
'values': b24val
}};
}
var b24paramsload = initB24CrmDvsForm({});
/**
* Стандартное добавление скрипта и переменных для скрипта Б24
*/
(function(w,d,u,b){w['Bitrix24FormObject']=b;
w[b] = w[b] || function(){arguments[0].ref=u;
(w[b].forms=w[b].forms||[]).push(arguments[0])};
if(w[b]['forms']) return;
s=d.createElement('script');
r=1*new Date();
s.async=1;
s.src=u+'?'+r;
h=d.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s,h);
})(window,document,b24paramsload.ref,'b24form');
b24form(b24paramsload);
/**
* Реинициализируем форму, частично повторяем функцию init у Bitrix24FormLoader
*/
function reinitB24Dvsform(nVal) {
if(!window.Bitrix24FormObject || !window[window.Bitrix24FormObject])
return;
if(!window[window.Bitrix24FormObject].forms)
return;
// Уничтожаем форму
Bitrix24FormLoader.unload(b24paramsload);
// Пересоздаём параметры формы
b24paramsload = initB24CrmDvsForm({'LEAD_TITLE': nVal});
// Инициируем форму с новыми данными
Bitrix24FormLoader.params = b24paramsload;
Bitrix24FormLoader.init();
// Открываем попап
Bitrix24FormLoader.showPopup(b24paramsload);
}
?>
Вирусный код на страницах сайта может привести к полной блокировке доступа к сайту со стороны антивирусов или хостинга, а также бану в поисковых системах. Вирусы на сайте вредят посетителям, заражая их компьютеры вредоносным кодом и троянскими программами. Заполняют ваш сайт ссылками на другие сайты, что понижает ваши позиции в поисковых системах. Постоянно рассылают через ваш сайт вредоносные рекламные электронные письма.
Необходимо понимать, что вирусы являются следствием взлома, поэтому в первую очередь нужно найти источник появления вируса на сайте (скорее всего это будет взлом сайта через уязвимости в скриптах или кража пароля от FTP).
Макет должен быть представлен в форматах PSD, цветовое пространство RGB
Имя файла должно состоять только из латинских букв, цифр и _ (underscore)
Если макет дополняет/изменяет уже существующий, то в его имени должен быть суффикс, указывающий версию (например landing_v2.psd)
В рамках макета должна быть соблюдена сетка
Направляющие должны быть выровнены точностью до одного пикселя. Полпикселя не допустимо
В случае фиксированного шаблона должно быть четкое соответствие ширины макета утвержденной минимальной ширине сайта. Ширина макета всегда должна быть меньше подразумеваемой ширины устройства отображения на 20-24 пикселей
При разработке дизайна «под разрешение» обязательно отрисовывать в разрешение окна браузера, а не монитора (при 1024 пкс ширина браузера 1000 пкс)
Желательно в виде отдельных файлов прикладывать все паттерны, используемые в макете
Обязательно наличие отдельного макета, в котором представлено оформления стандартных элементов типографики веб-страницы (заголовки, параграфы, таблицы, списки, блоки цитаты)
Слои (layers)
Каждый элемент должен находиться в одном слое, названным человечески-понятным именем, а не «slice 1,2».
Все слои одного логического элемента должны быть в одной папке (например, модуль авторизации)
Если применяется градиент к слою, использовать обычный режим наложения (blend Mode: normal) и его реальные цвета
Не должно быть никаких полупрозрачных градиентов и сложных режимов наложения типа «multiply, screen, overlay, и т.д.»
Нельзя использовать сложные режимы наложения (blend mode) на любых свойствах слоя (типа inner shadow, drop shadow и т.д.)
Нельзя использовать режим «Наложение цвета»
Нежелательно использовать «слой на слое» для создание различных эффектов (например градиента)
Нежелательно использовать градиентные границы (border, stroke)
Нежелательно сводить простые стили слоёв (например отбрасывание тени легко реализуется средствами CSS)
Текст
Для текстовых элементов обязательно указывать шрифт и его размер
Размеры (кегль) шрифтов должны быть целыми числами. Использование 14.22 в качестве размера шрифта недопустимо
Запрещено изменять высоту/ширину шрифта способом, отличным от обычного изменения размера кегля
Обязательно прикладывать к макету шрифты, которые были использованы в макете, в формате TTF, OTF
Шрифт должен быть бесплатным или должна быть приобретена лицензия на его использование
Недопустимо использовать прозрачность для элементов содержащих текст
Недопустимо использовать градиент для текста
Для каждого отдельного блока текста - отдельный text box
Отличный от дефолта (100%) межбуквенный/межсловный интервал должен быть отмечен комментарием
Из текстовых эффектов допустима лишь тень, и всё что с её возможностью можно эмулировать
Желательно не использовать в макете больше 2-х не стандартных шрифтов, их количество сильно влияет на рендеринг страницы в браузере
Рыба
Для повторяющихся элементов (списки и т.д.), рыба должна быть разной
Интерактивные элементы
Кнопки, текстовые поля, ссылки и прочие интерактивные элементы должны иметь несколько представленных в макете состояний:
Как и всякая хорошая вещь, блог «Дивасофт» начинался с идеи. Чужой. Где-то на просторах интернета мы подсмотрели дизайн с широкими картинками и узким текстом. Отталкиваясь от него, приступили к созданию своего варианта. Долго, очень долго мы вымеряли шаблоны. Придумывали, где разметить дату и подпись, использовать ли теги, как обойтись с картинками, что делать с разделением по страницам. И вот, спустя чуть ли не полгода, блог «Дивасофт» запущен и работает.
И он красивый. Да, вот так вот нескромно с нашей стороны это заявлять, но посудите сами. Чего только стоит исходный код страницы, залюбоваться можно. Разметка всех и вся сделана по стандартам HTML5. Вы только посмотрите на структуру каждого поста!
<article>
<header>
<h2><a href="">Открытие блога</a></h2>
<span><time datetime="2014-05-16T12:00:00+04:00">16 Мая 2014</time>,
<em>Ashe Gentle</em></span>
</header>
<p>Как и всякая хорошая вещь, блог «Дивасофт» начинался с идеи. Чужой. Где-то на просторах интернета мы подсмотрели дизайн с широкими картинками и узким текстом. Отталкиваясь от него, приступили к созданию своего варианта. Долго, очень долго мы вымеряли шаблоны. Придумывали, где разметить дату и подпись, использовать ли теги, как обойтись с картинками, что делать с разделением по страницам. И вот, спустя чуть ли не полгода, блог «Дивасофт» запущен и работает.</p>
<h3>Подзаголовок</h3>
<p>И он красивый. Да, вот так вот нескромно с нашей стороны это заявлять, но посудите сами. Чего только стоит исходный код страницы, залюбоваться можно. Разметка всех и вся сделана по стандартам HTML5. Вы только посмотрите на структуру каждого поста!</p>
<footer>
<em><a href="#">Бекэнд</a>, <a href="#">Bitrix</a></em>
</footer>
</article>
Тут тебе и <article>, и <header>, и <footer>, и <time> и всё-всё-всё на свете. А как замечательно оформлены у нас цитаты:
<blockquote cite="http://divasoft.ru/blog/">
<p>А как замечательно оформлены у нас цитаты</p>
</blockquote>
Отдельно стоит упомянуть типографику. Вы обратили внимание, что мы используем верные кавычки, принятые в русском языке — «ёлочки»? И, конечно, длинные тире вместо дефисов и минусов, которые, между прочим, не так просто поставить. Приходится использовать либо цифровые коды, либо специальные символы html.
А ещё мы точно продумали расположение изображений. Их может быть четыре рядом, три, два или одно на весь блок записи. И при всём этом отступы между ними будут равными. Пришлось повозиться с полпикселями, появляющимися в разных браузерах. Но и эту проблему мы решили, использовав float: right; для крайнего правого изображения.
Кстати, о полпикселях. Это происходит потому, что мы используем собственную процентную сетку. Которая тоже была разработана путём долгих и кровавых споров. У нас вообще никогда без них не обходится. Сейчас, например, воюем за или против переносов слов.
Всё вышесказанное относилось к вёрстке, но и с натягом вышло не так просто. Изначально планировалось использовать стандартный компонент битрикс — блог. Но когда уже всё было готово и мы приступили к тестированию, возникли непредвиденные проблемы. Оказалось, что начиная с 12 версии, разработчики битрикса запретили использование HTML-редактора в блогах. Наверное, это связано с безопасностью. И наверное, важно. Но нам абсолютно не подходит. Так реализация проекта застопорилась на неопределённое время, пока мы искали пути обхода. Как вариант рассматривали использование другой площадки — wordpress, например. Заточенный именно для блогов, он мог бы стать решением всех проблем. Но оказалось нецелесообразным разбивать единую систему. Поэтому мы сделали блог на инфоблоках.
И увидел Бог всё, что Он создал, и вот, хорошо весьма. И был вечер, и было утро...
Возможно, потом у нас будут комментарии и подписка, и конечно «новое видение» основного сайта. Пока это всё в проекте и в необозримом будущем. Но уже сейчас вы можете читать о жизни компании, её проблемах, решениях, разработках, проектах и о многом другом. Присоединяйтесь!
