Подборка полезных утилит SCSS
2016-02-04 14:07:58
... />
/*
* @include triangle within ...
+ развернуть текст сохранённая копия
Для успешной реализации проекта разработчикам фронтенда не обойтись без проверенного арсенала расширения SCSS. Ниже представлены утилиты, которые могут пригодиться в работе.
Triangle
Примесь triangle (которую дизайнеры Sagi предпочитают называть «chupchick»), добавляет к всплывающей подсказке треугольник. И tooltips становится похожим на диалоговое окно. Но triangle также может использоваться в качестве автономного элемента.
/*
* @include triangle within a pseudo element and add positioning properties (ie. top, left)
* $direction: up, down, left, right
*/
@mixin triangle($direction, $size: 6px, $color: #222){
content: '';
display: block;
position: absolute;
height: 0; width: 0;
@if ($direction == 'up'){
border-bottom: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'down'){
border-top: $size solid $color;
border-left: 1/2*$size solid transparent;
border-right: 1/2*$size solid transparent;
}
@else if ($direction == 'left'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-right: $size solid $color;
}
@else if ($direction == 'right'){
border-top: 1/2*$size solid transparent;
border-bottom: 1/2*$size solid transparent;
border-left: $size solid $color;
}
}
Читать дальше →
Тэги: css, ua-hosting.company, блог, веб, веб-дизайн, веб-разработка, дизайн, компании, примесь, разработка, утилиты, функции
[Из песочницы] Конец эры глобального CSS
2016-02-02 13:15:56
... дело с CSS, приходилось ... раз модифицируя css-файл, необходимо ... закрытого CSS.
Читать ...
+ развернуть текст сохранённая копия
Все CSS-селекторы живут в глобальной области видимости.
Каждому, кто когда-либо имел дело с CSS, приходилось мириться с этой глобальной особенностью. Модель, некогда созданную для стилизации академических документов, сейчас едва ли можно назвать удобным инструментом для создания современных веб-приложений.
Абсолютно каждый селектор потенциально может вступить в борьбу с другим селектором или стилизовать «посторонний» элемент. В этой «глобальной» борьбе селектор может даже полностью проиграть, в итоге не применив к странице ни одного из своих правил.
Каждый раз модифицируя css-файл, необходимо хорошо подумать о глобальной среде, в которой будут существовать наши стили. Ни одна другая технология веб-разработки не требует столько усилий только для того, чтобы обеспечить коду минимальный уровень поддерживаемости.
Так не должно быть. Пора оставить позади эру глобальных стилей. Наступило время закрытого CSS.
Читать дальше →
Тэги: css, javascript, webpack, бэм, веб-разработка, изоляция, модульность, перевод, ресурсов, сборки, системы
Записи с конференции Web Standards Days — Москва 2015
2016-02-02 12:09:41
+ развернуть текст сохранённая копия
ИконкиИконка кремля — Kremlin by parkjisun from the Noun Project
Логотипы WSD — github.com/web-standards-ru
В декабре мы помогали нашим друзьям из сообщества Веб-стандарты организовывать московскую конференцию серии Web Standards Days. Сегодня мы рады предложить вашему вниманию записи конференции и результаты опроса участников конференции об их предпочтениях в выборе технологий и инструментов разработки.
Открытие — Вадим Макеев (Opera)
Видео и статистика
Тэги: css, csso, days, edge, html, javascript, microsoft, shower, standards, svg, vorlon.js, wcag, web, блог, веб-приложения, веб-разработка, веб-стандарты, доступность, компании, статистика, фронтэнд
Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №196 (25 — 31 января 2016)
2016-01-31 23:20:04
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT- ...
+ развернуть текст сохранённая копия
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости
Читать дальше →
Тэги: angular, css, es6, group, html5, javascript, react, svg, zfort, анимация, блог, браузеры, веб-дизайн, веб-разработка, дайджест, компании, новости, ссылки
Лучшие бесплатные коллекции векторных иконок
2016-01-31 06:05:03
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных ...
+ развернуть текст сохранённая копия
Привет, Хабр! Сегодня я хочу представить вам огромную коллекцию из 51 набора бесплатных векторных иконок. Да, есть потрясающие ресурсы Flaticon или Iconfinder, но бывают случаи, когда необходима именно группа иконок в едином стилистическом оформлении. Определиться с выбором, вам поможет эта подборка. Я старался собрать не как можно больше, а действительно самое лучшее.
Среди веб-разработчиков существует много споров о том, что лучше: иконочный шрифт или SVG спратй? Четкого ответа на этот вопрос нет. Каждый выбирает свое. Данные наборы иконок вас неограничиывают в выборе, поскольку представлены в различных форматах:
@font-face
, SVG, EPS, AI, PSD, Sketch.
В целом данная подборка содержит более 10 000 иконок, охватывающих множество категорий: интерфейсы, технологии, наука, спорт, маркетинг, среда, транспорт и тд. Полые, заполненные, цветные, во Flat, Material, Elegant, Cartoon, Hand drawing стилях.
Responsive Icons (100 иконок, PSD, AI, EPS, SVG)
Читать дальше →
Тэги: css, html, веб-дизайн, веб-разработка, векторная, графика, иконки, иконочный, интересности&полезности, шрифт