Сообщения

CSS Bliss: основные особенности методологии

Изображение
Среди множества методологий организации стилей ( BEM , SMACSS , OOCSS , SUITECSS ) хочется отдельно выделить одну: CSS Bliss . Это квинтэссенция удобства использования и читабельности. Для начала определимся в основных понятиях: модуль, элемент и модификатор. Эти определения наиболее близки БЭМу, за исключением того, что Модулем в CSS Bliss именуется Блок. Далее будет понятно, почему Модуль - более подходящее значение. В целом сама методология очень близка к БЭМу, но имеет свои особенности, о которых стоит поговорить отдельно, потому что именно они позволяют стать CSS Bliss на ступеньку выше остальных. Основные отличия CSS Bliss: 1. Именование модуля, элементов и модификаторов: Если в БЭМе основными разделительными частицами выступают "-" и "_": .my-module__my-element_modifier то CSS Bliss улучшает читабельность путем использования заглавных букв: .MyModule-myElement--modifier Лично мне очень сложно различать дефис и нижнее подчеркивание, тем бол...

Прогноз погоды в консоли

Изображение
Замечательный погодный сервис в твоей консоли: curl http://wttr.in Можно прописать алиас: alias weather='function _weather(){ curl http://wttr.in/$1 };_weather' и после этого набирать в консоли (для текущей локации, города или помощи): weather weather London weather :help

Лучшее из 2015

Online курсы "Astronomy: Exploring Time and Space" by Chris Impey (University of Arizona) Курсы Академрисунок к а р а н д а ш е м Книга "Гарри Поттер" Джоан Роулинг, "Убить пересмешника" Харпер Ли и "Книжный вор" Маркус Зузак Игра Diablo III & World of Draenor Музыка Magic! "Rude" Танцевальный исполнитель: Koharu Sugawara & Yuki Shibuya Увлечение Квест комнаты Блюдо Паски , печеночные тортики и яблочные розочки Activity Сноуборд, водные лыжи и серфинг. Город Санкт-Петербург Страна Шри-Ланка и Словения Курорт Буковель Библиотека React.js Достижение Сказка в инстаграмме Подводя итоги года, каждый раз удивляюсь каким же долгим и разнообразным он был. Мы побывали в трех странах, были на мастер-классах по гончарству и рисованию маслом Множество вещей попробовали в первый раз: серфинг в Шри-Ланке и жареные каштаны в Словении. Начали свой проект на react.js. Кто-то впервые летал самолетом ...

Стайлгайд и компонентная разработка

Изображение
"Мы не разрабатываем страницы, мы разрабатываем системы компонентов" Стивен Хэй (дизайнер) ("We are not designing pages, we are designing systems of components" Stephen Hay) Стайлгайд (от англ. styleguide) - это паспорт корпоративных стандартов. Руководство по использованию фирменного стиля, регламентирующее корпоративные цвета, шрифты, формы и блоки, размеры и расположение элементов. Это подробное описание дизайнерских решений для каждого элемента в отдельности и в случае необходимости вместе с другими компонентами. Введение Существует огромное количество разнообразных стайлгайдов: начиная от дизайнерских и заканчивая стайлгайдами по написанию кода на различных языках программирования. У них разные названия, хотя несут в себе один и тот же посыл: создание общих корпоративных правил. Одними из самых первых появились так называемые бренд-буки. Брендбук (англ. brand book) — официальный документ компании, в котором описывается концепция бренда, атрибуты бренда...

KSS styleguide

Изображение
Что такое KSS? KSS (Knyle Style Sheets) - это документация к CSS, достаточно понятная для разработчиков и хорошо структурированная для программной обаботки. Для лучшего понимания рекомендую почитать ну очень хорошую статью о концепции KSS . Как это выглядит в коде? Пример файла buttons.css: /* A button suitable for giving stars to someone. :hover             - Subtle hover highlight. .stars-given       - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled          - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{   ... } a.button.star.stars-given{   ... } a.button.star.disabled{   ... } Как видно из примера, документация css осуществляется через комментарии следующим образом: первая строка - это оп...

Верстаем responsive emails

Основные правила для верстки писем: 1. Все стили инлайнятся , так как Gmail автоматически вырезается head, а также обертку body, оставляя только ее внутренности. Тем ни менее можно указать основные стили на случай если писем много и править их будет кто-то другой, кто забудет заинлайнить, и в большинстве почтовиках письмо будет смотреться неплохо: <style media="screen" type="text/css"> * { font-family: Arial, sans-serif; margin:0; padding:0; } p { font-size: 15px; margin: 15px 0; } a { color: #0080C6; } </style> 2. margin и padding Некоторые почтовые клиенты (Outlook 2007, 2010, 2013 - назовем их семейство Outlook серии 2007; Outlook.com) не понимают свойства margin и padding. Поэтому не рекомендуется использовать тег <p>, так как отдельные почтовики (Outlook.com) могут автоматически добавлять свои отступы, нарушая тем самым верстку. Предпочтительно использовать <div> в связке <br> для отступов. 3. font-family Указание fo...

Лучшее из 2014

Курсы Roman Architecture by Diana E.E. Kleiner Live!: A History of Art for Artists, Animators and Gamers by Jeannene Przyblyski Лучшая parallax работа Alice in Videoland: the Interactive Storybook Книга "Внутренняя сторона ветра" Милорад Павич Музыка Sia Игра 'Just Dance 2014' Танцевальный исполнитель: Мэдди Зиглер , 11 лет. Увлечение Квест комнаты Блюдо Кофе 'Копи Лувак' Творчество Акварель Начинания Роспись стены акриловыми красками и декабрьская сказка в Инстаграме Activity Современные и бальные танцы Город Днепропетровск Курорт Буковель Достижение Мобильная версия 'Agentfolio'