Рубрика «less» - 4

Доброго времени суток уважаемые читатели. Недавно в одном проекте мне потребовалось сделать ленточку для блоков. Для примера: очень часто сверху делают ленту с надписью «Fork me on GitHub» или же над каждым элементом в портфолио присутствует лента с датой публикации работы. Лучше покажу пример с официального сайта LESS, так как речь идет о такой маленькой детальке, на которую некоторые могли вообще не обратить внимание.

image

Данный Ribbon — это изображение внутри ссылки с абсолютным позиционированием. Чем меня не устраивает данный вариант? Во-первых: я очень люблю современные стандарты CSS, с помощью которых можно создать приятный дизайн, используя минимум изображений, а в данном случае лентой может быть обычный блок с transform rotate. Во-вторых: с недавнего времени я смотрю на веб сквозь Retina дисплей и неоптимизированные img сразу же бросаются в глаза, но и разработчикам обращать внимание на какую то ленточку, оптимизировать ее отображение с media queries, мне кажеться, даже немного смешно.

Создадим блок длинной 500px, высотой 50px, с абсолютным позиционированием, сверху, слева. Получится то, что мы видим на изображении ниже в левой части. Далее, повернем блок на -45 градусов, чтобы у нас получилось что-то похожее на Ribbon с LESS. Результат показан в правой части изображения. Наш элемент вращается от своего центра, вследствие чего получается отступ слева, а часть будущей ленты выезжает за рабочую область.

image

С помощью инспектора мы можем подобрать нужные нам значения для top и -left. Чем меня не устраивает данный вариант? Во-первых — перфекционизм: я хочу, чтобы максимальное количество указанных пикселей (в данном случае 500) отображалось в рабочей области и не выезжало за нее. Во-вторых — лень: я не хочу при изменении позиции (top, right, bottom, left) и градуса наклона вручную подбирать значения, чтобы спрятать все углы.

Читать полностью »

Простой компонент на TypeScript для отображения дереваВ процессе работы над небольшим web-проектом мне потребовался компонент для отображения дерева элементов на странице. Компонент должен позволять развернуть/свернуть узлы дерева, обработать клик по элементу, добавить к дереву новые узлы, в общем предоставлять самые основные функции «treeview».

Условия использования компонента при этом несколько отличаются от «общепринятых» в лучшую сторону — в качестве среды исполнения будут применяться современные (IE9+) браузеры (web-проект предполагается использовать в рамках полностью контролируемой внутренней сети). Еще одним моментом является платформа, на базе которой разрабатывается серверная часть. Это ASP.NET MVC, а значит желательно, чтобы компонент поставлялся в том числе в виде NuGet-пакета, дружественного к типовой структуре каталогов ASP.NET MVC-приложения.

В процессе работы над вопросом я изучил существующие варианты и, как водится, изобрел очередной велосипед, но при этом свой собственный, с блэкджеком и шлюзами.
Читать полностью »

Решил я однажды реализовать гибкий способ стилизации подчеркивания ссылок — чтобы просто делать полупрозрачные подчеркивания, регулировать паттерн в dashed/dotted-border, делать волнистые подчеркивания и вообще иметь настройки CSS3 text-decoration, которые еще ни один браузер не умеет.

Реализация стилей подчеркивания в LESS через генерацию png в data URI

В результате получился генератор PNG в data-URI на LESS.

Демо.

Читать полностью »

Замечательный фреймворк LESS позволяет сильно упростить роботу со стилями. Одной из замечательных его возможностей есть примешания (mixins). Примешания позволяют включать все свойства класса в другой класс путем простого включения имени класса как значение одного из свойств. Это напоминает использование переменных, но в отношении целых классов. Примешивания могут вести себя как функции, и принимать аргументы. Именно возможность примешаний принимать аргументы и манипулировать ими лежит в основе библеотек примешаний, таких как LESS Elements, LESS Hat, LESS Mix и компонента mixins.less в Bootstrap.

LESS Mix — немного о LESS примешаниях

Читать полностью »

LESS — это собственный язык стилевой разметки, который расширяет способности стандартного css.
Подробнее про less вы можете прочитать на официальном сайте проекта, там есть замечательные примеры его использования.

На less уже написаны множество библиотек, получивших огромную популярность. К примеру, такие, как twitter bootstrap или semantic grid system.
Читать полностью »

Команда разработчиков WebStorm постаралась в очередном выпуске IDE собрать самые востребованные возможности для самых свежих технологий. Что появилось нового?

Поддержка TypeScript, CoffeeScript, Dart, LESS и Sass

В новой версии Webstorm появилась базовая поддержка TypeScript: подсветка кода, проверка соответствия типов, навигация по коду, обнаружение ошибок по ходу редактирования и автодополнение. Поддержка TypeScript, CoffeeScript и Dart включает компиляцию в Javascript на всех платформах, поддерживаемых в WebStorm. Аналогично поддерживаются LESS и Sass.

В основном релизе IDE теперь есть полноценная отладка CoffeeScript, TypeScript и Dart с использованием source maps. Нам особенно приятно порадовать коллегу pietrovich, который поднимал этот вопрос в ветке обсуждения в одном из прошлых постов.
Читать полностью »

imageСегодня я хочу рассказать о том, почему и как мы пришли к использованию препроцессора Stylus в разработке Яндекс.Почты, а также описать используемый нами метод работы со стилями для IE. Он очень легко реализуется именно с помощью препроцессоров и делает поддержку IE простой и удобной. Мы разработали для этого специальную библиотеку, которой тоже поделимся — if-ie.styl.

Это только первая статья из серии статей об использовании препроцессора Stylus в Яндекс.Почте, которые мы готовим к публикации.

Читать полностью »

Мы рады сообщить, что вчера вышла новая версия интегрированной среды разработки для Ruby и Rails — RubyMine 5, которую можно загрузить с нашего сайта.
Состоялся релиз RubyMine 5
В новой версии мы постарались добавить новые возможности, которые позволят получить удовольствие от разработки на Ruby во всем ее многообразии. Уже хорошо зарекомендовавшие себя инструменты разработки теперь доступны для еще большего числа Ruby-приложений, в том числе и для iOS-приложений на базе технологии RubyMotion, быстро набирающей популярность. Для приложений RubyMotion стали доступны интеллектуальное автодополнение кода, тестирование и отладка с использованием графического интерфейса.

Более подробно о RubyMine 5 можно узнать на странице What’s new. Также мы рады представить демо-видео от технического евангелиста Джона Линдквиста (John Lindquist).
Читать полностью »

Расширение Web Essentials для Visual Studio: LESS, Zen Coding, CoffeeScript и многое другое

Visual Studio – поистине потрясающий инструмент для разработки приложений вообще (чувствуете всю маркетинговую мощь этой фразы?) и web-разработки в частности. Но сила Visual Studio не только в возможностях, которые в ней есть «из коробки», но и в наличии тысяч полезных расширений. Одним из моих любимых расширений, которое добавляет поддержку LESS, Zen Coding и CoffeeScript, а также содержит множество других возможностей, является расширение Web Essentials 2012 (скачать), о котором мы и поговорим в данной статье.

Не смотря на то, что цикл выпуска обновлений для Visual Studio 2012 короче, чем для предыдущих версий, а первое крупное обновление уже доступно, нам, как разработчикам, обычно, хочется получать новые полезные возможности как можно раньше. И расширение Web Essentials позволяет это делать.
Читать полностью »

Hayaku это сборник полезных скриптов, помогающих при быстрой веб-разработке.

Hayaku предоставляет способ быстрого способ написания и поддержки CSS кода в редакторе. К сожалению, он пока доступен лишь для Sublime Text 2, поддержка других редакторов ожидается позднее.
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js