Comments 47
Хм, а я постепенно ушёл от спрайтов в сторону base64.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.

Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.
Прям все что в спрайтах раньше размещалось теперь в base64? Интересует годный плагин под grunt с таким функционалом.
> лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл

Вы про отдельный css файл или файл, в котором весь другой css?
Я про то, когда в исходном коде просто лежит хеш и непонятно что это за картинка.
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.

У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )
Да, забыл спросить, а вы оптимизатор какой-нибудь натравливаете на спрайт после?
При выгрузке на продакшн можно поставить, при каждом обновлении спрайта нет смысла.
Имеет смысл добавить возможность генерить несколько спрайтов из подпапок ./src/assets/images/sprite/ИМЯ_СПРАЙТА/*.* и заточить автоматизацию для ретиновых спрайтов чтобы из файлов с @2x собирался отдельный спрайт
Текущие б плагины заставить нормально работать… На днях ломалась сборка из-за ошибки в одном из плагинов (в зависимостях) github.com/gulpjs/gulp/issues/561.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.
Сделать генерацию из подпапок несложно, моя цель была показать базовые возможности.
подозревал что это так, но все никак не мог это реализовать, не поделитесь примером?
Сейчас на проекте решение «в лоб». Под каждую папку создавалась отельная переменная со своими настройкаим.
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith
Вы еще используете спрайты для одноцветных иконок?
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.

Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)

Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек
К сожалению, иконки в виде шрифта — решение не очень хорошее из-за разных типов сглаживания в браузерах и ОС.
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)

Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg


Мне неприятно смотреть на размытые иконки, например.
Дизайнеры тоже плохо относятся к этому.
А как дизайнеры относятся к размытым иконкам на ретине или hidpi, коих становится все больше? Или вы генерируете по 2 спрайта на каждую расцветку иконок?
Ну я про это и говорю: 2 спрайта на каждую иконку каждого цвета.
Почему нельзя иконки разных цветов собрать в одном спрайте для 1 разрешения?
Или я не понял, что вы имел ввиду под расцветкой иконок.
gulp-sprite-generator был написан как раз из-за невозможности юзать официальный порт spritesmith в «реверс» режиме — из css в css + sprites, без миксинов и прочего лишнего кода =)
Ну, изначально, у вас есть просто картинки для использования в css. Они совсем не спрайты, и даже разные состояния, скажем, кнопочек — у вас тоже разные картинки. Это исходники, точно такие же, как любой другой код. При сборке проекта, вы эти картинки, как и любой другой код, компилируете по какой-то логике. Когда вы, например, используете uglify, вы же не пишете для этого процесса какой-то код в исходниках? Точно так же и со спрайтами — вам не нужно нигде в .less или .css файлах использовать миксины, полученные, по факту, при компиляции исходников изображений =) Т.е. разработчик css и картинок совсем не должен знать о том, что произойдет с его творением при билде =)
А, я просто привык делать сразу спрайт и стараюсь не допускать таких моментов, когда я или кто-то делает на ховеры/эктивы и другие состояния разные картинки.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.

Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.
Ну да, вопрос в идеологии разработки еще.

Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.

Поддержки ретины нет, есть только поддержка нотации (img@2x.png), на основании которой, можно правильно группировать спрайты =)
Насчет ретины.
На выходе в css мы получим background-size/2 и позиции деленные на 2?
при увеличении масштаба страницы по ctrl+ у некоторых иконок появляются вертикальные/горизонтальные полоски по бокам от соседних иконок (особенно в хроме)

этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px

делайте SVG спрайты и будет вам счастье!
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii

всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr
Как начал, так и приостановил работу, появились другие неотложные задачи.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.
Пожалуйста :)
Я бы рекомендовал переходить на иконочные шрифты или свг
Да шрифтовые иконки это круто, но часто в общий концепт они не подходят вот и приходиться рисовать самим и делать спрайты.
Немного подумав и почитав документацию stylus, было найдено решение.


Мое решение
Каждой иконке для состояния :hover, дать такое имя icon-(имя икоки):hover
Создать файл темплейт с таким содержимым ( в моем случае это sass, для less,scss допишите скобки )

{{#block "spritesheet"}}
.icon:before
  content: ''
  background-image: url('/static/png/{{{spritesheet.escaped_image}}}')
  background-size : {{spritesheet.px.width}}, {{spritesheet.px.height}}
  display: inline-block
{{/block}}

{{#each sprites}}
.icon.icon-{{name}}:before
  background-position: {{px.offset_x}} {{px.offset_y}}
  width: {{px.width}}
  height: {{px.height}}
{{/each}}
Only those users with full accounts are able to leave comments. Log in, please.