Сегодня я хочу поделиться с достопочтенной аудиторией Хабра своим подходом к организации автоматической сборки проекта на WordPress, который значительно экономит время при создании новых сайтов.Читать полностью »
Рубрика «scss» - 2
Волшебная сборка проекта на WordPress при помощи пакетных менеджеров и напильника
2016-09-05 в 14:11, admin, рубрики: browserify, composer, gulp, npm, scss, wordpressЕщё больше комфорта в разработке фронтенда с TARS
2016-06-02 в 7:33, admin, рубрики: css, gulp, handlebars, html, jade, javascript, less, open source, postcss, scss, stylus, tars, автоматизация frontend, Блог компании 2ГИС, Разработка веб-сайтов
Прошли очередные полгода с последних новостей о TARS (раз и два), а значит настало время поделиться новинками. Как всегда напомню, что TARS — это основанный на Gulp сборщик фронтенда, который помогает фронтенд-разработчику или даже целой команде создавать проекты любой сложности. Мы продолжаем уверенное шествие по России и не только. TARS уже используют в Нидерландах, Японии, Китае, Украине, Польше и других странах. Это можно заметить и по количеству звёзд на github, и по числу участников чата в gitter, и по количеству установок TARS-CLI за последний месяц (больше тысячи, а в пике больше 3 тысяч). Мы закрыли почти две сотни issue, выпустили два крупных обновления. Пользователи сборщика активно репортят, участвуют в разработке. Можно сказать, что у нас родилось маленькое сообщество.
Читать полностью »
По мотивам недавней статьи «Расстановка полей и отступов в CSS». Предлагаю дополнения по данному вопросу. Предполагается, что читатель в курсе что есть margin, и что такое Margin collapsing.
Как сделать многослойную Parallax иллюстрацию на CSS & JavaScript
2016-04-02 в 14:14, admin, рубрики: coffeescript, css, haml, html, javascript, parallax, sass, scss, Разработка веб-сайтов 
Рисунок используемый для parallax эффекта. Автор Patryk Zabielski
Привет друзья, я покажу вам как создать простою многослойную иллюстрацию с глубиной, которая переходит к контенту. Мы будем использовать метод, в котором необходим только css и чистый JS(coffeescript) (Никаких jQuery!).
Этот урок для начинающих, с начальным знанием JS и CSS, так что я буду объяснять большинство вещей и ссылаться на внешние источники.
Финальное демо
Читать полностью »
REM vs EM – Великий спор
2016-03-25 в 4:30, admin, рубрики: css, em, html, rem, scss, адаптивная вёрстка, перевод 
Представляю вашему вниманию перевод достаточно большой и объемной статьи по поводу вечного спора, какие же единицы измерения использовать при верстке: em'ы или rem'ы. В каких случаях стоит использовать одни единицы, а в каких другие. Вас ожидает много кода, примеров и их объяснений.
Добро пожаловать в мир типографики и относительных единиц измерения =)
Читать полностью »
TARS, сделай уровень frontend-рутины 0%
2015-03-26 в 12:15, admin, рубрики: css, gulp, handlebars, html, jade, javascript, less, open source, scss, stylus, автоматизация frontend, Блог компании 2ГИС, Веб-разработка, метки: автоматизация frontend 
Frontend с каждым днём становится сложнее. Задачи — объёмнее, пользовательский интерфейс — насыщеннее, HTML, CSS и Javascript — огромнее, а сон фронтендера — короче и беспокойнее. Необходимо грамотно структурировать код, выполнять множество рутинных задач (компиляция css- и js-препроцессоров, сборка спрайтов, подготовка и оптимизация изображений, минификация файлов и др). Если вы работаете в команде — это автоматически увеличивает сложность разработки. Чтобы решить эти проблемы, я создал TARS — сборщик html-вёрстки, основанный на gulpjs.
Читать полностью »
[Прим. перев.]: предлагаю вашему вниманию перевод статьи Марка Отто, разработчика GitHub, бывшего разработчика Twitter, создателя самого известного CSS фреймворка Bootstrap. В этой статье он рассказывает о внутреннем устройстве CSS проектов GitHub.
Меня всегда интересовали подробности процесса разработки других продуктов, особенно их гайдлайны и подход к использованию CSS. Учитывая мою склонность к деталям чужого CSS кода, я решил написать о подходе к CSS в GitHub.
Несколько фактов
Обзор нашего текущего состояния CSS:
- В качестве препроцессора мы используем SCSS.
- У нас есть более 100 отдельных исходных файлов стилей, которые мы компилируем перед выкаткой в продашн.
- Исходники компилируются в 2 отдельных CSS файла (чтобы избежать проблемы с максимальным количеством селекторов для IE<10).
- Эти 2 файла весят в сумме около 90 kb.
- Мы не используюм какую-нибудь особенную «CSS архитектуру».
- Для определения размера мы выбрали пиксели, но все же у нас есть немного «em-ов».
- Мы используем Normalize.css, смешанный с несколькими нашими собственными стилями для сброса свойств.
Бандл… Пара-пара-па хэй! или Bundle Transformer шагает по планете 2
2014-01-30 в 16:13, admin, рубрики: .net, ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, javascript, less, Optimus, Pluralsight, sass, scss, TypeScript, umbraco, Веб-разработка, Клиентская оптимизация, метки: ASP.NET, asp.net mvc, Bundle Transformer, Bundling and Minification, coffeescript, css, javascript, less, Optimus, Pluralsight, sass, scss, TypeScript, umbraco, клиентская оптимизация 
Я немного отойду от формата предыдущей статьи и прежде чем привести подборку интересных упоминаний о Bundle Transformer, я расскажу об изменениях, которые произошли в проекте за последние полгода.
До августа прошлого года библиотека dotless была основным средством для работы с LESS в сообществе .NET-разработчиком, и входила в состав практически всех инструментов клиентской оптимизации для ASP.NET: Cassette, SquishIt, Combres и RequestReduce. Bundle Transformer также не являлся исключением: библиотеки dotless и DotlessClientOnly (облегченная версия) использовались в модулях BundleTransformer.Less и BundleTransformer.LessLite.
Ситуация в корне изменилась, когда вышел Twitter Bootstrap 3.0. Исходники таблиц стилей Bootstrap 3.0 были написаны на LESS 1.4.X, а библиотека dotless на тот момент поддерживала более старую версию LESS (поддержка LESS 1.4.X появилась в dotless только в декабре 2013 года). Фактически все перечисленные инструменты для работы с LESS в одночасье стали морально устаревшими.
Читать полностью »
SassyStudio – поддержка SCSS/SASS/Compass в Visual Studio
2013-11-11 в 9:08, admin, рубрики: addons, css, sass, scss, Visual Studio, visual studio 2012, visual studio 2013, Веб-разработка, метки: addons, sass, scss, Visual Studio, visual studio 2012, visual studio 2013 Начну с того что SassyStudio распространяется под лицензией MIT и код проекта размещён на GitHub. Практически каждую неделю расширение обновляется и пополняется новыми функциями. Расширение можно найти в галерее инструментов Visual Studio.
Читать полностью »
Shortest Common Superstring Problem
2013-11-11 в 8:46, admin, рубрики: java, scss, Алгоритмы, биоинформатика, сжатие данных, строки, метки: java, scss, Алгоритмы, биоинформатика, сжатие данных, строкиПроблема кратчайшей общей надстроки формулируется следующим образом: найти кратчайшую строку, такую, что каждая строка из заданного набора являлась бы её подстрокой. Эта проблема имеет место как в биоинформатике (задача сборки генома в общем случае) так и в сжатии данных (вместо данных хранить их надстроку и последовательность пар, вида (индекс вхождения, длина)).
Когда я искал в сети информацию по этой проблеме и её решению на русском языке — находилась лишь пара постов про биоинформатике, где вскользь упоминаются эти слова. Кода (кроме жадного алгоритма), конечно же, тоже не было. Разобравшись в проблеме, этот факт сподвиг на статью здесь.
Осторожно, 4 мегабайта!
Читать полностью »