Comments 47
Хм, а я постепенно ушёл от спрайтов в сторону base64.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.
Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.
Для grunt / gulp также есть плагины с генерацией кода в синтаксисе препроцессоров. Чистота исходников поддерживается.
Пользуясь случаем шлю лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл.
Прям все что в спрайтах раньше размещалось теперь в base64? Интересует годный плагин под grunt с таким функционалом.
Такой, как этот?
> лучи ненависти тем front-end'щикам, которые просто кидают base64 в файл
Вы про отдельный css файл или файл, в котором весь другой css?
Вы про отдельный css файл или файл, в котором весь другой css?
Я про то, когда в исходном коде просто лежит хеш и непонятно что это за картинка.
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.
У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )
Так просто её заменить, например, не быстро: надо сохранить её из браузера, отмодифить, получить заново хеш и скопировать в файл.
У нормальных пацанов в исходнике должен быть путь до картинки, а сама она в репозитории. Преборазование в base64 должно происходить при компиляции ( grunt, rails etc. )
Да, забыл спросить, а вы оптимизатор какой-нибудь натравливаете на спрайт после?
Имеет смысл добавить возможность генерить несколько спрайтов из подпапок ./src/assets/images/sprite/ИМЯ_СПРАЙТА/*.* и заточить автоматизацию для ретиновых спрайтов чтобы из файлов с @2x собирался отдельный спрайт
Текущие б плагины заставить нормально работать… На днях ломалась сборка из-за ошибки в одном из плагинов (в зависимостях) github.com/gulpjs/gulp/issues/561.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.
И на Ubuntu есть некоторые проблемы с imagemin (зависимости) и кэшированием изображений. У Grunt'а в свое время таких проблем не заметил.
Ну такие решения есть, правда не в grunt / gulp модулях
1. https://github.com/jorgebastida/glue
2. https://github.com/jakesgordon/sprite-factory
1. https://github.com/jorgebastida/glue
2. https://github.com/jakesgordon/sprite-factory
Сделать генерацию из подпапок несложно, моя цель была показать базовые возможности.
подозревал что это так, но все никак не мог это реализовать, не поделитесь примером?
Сейчас на проекте решение «в лоб». Под каждую папку создавалась отельная переменная со своими настройкаим.
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith
Автоматический подхват вложенных папок я встретил у www.npmjs.org/package/gulp-sprite-generator.
У меня в планах подробнее рассмотреть эту обертку над spritesmith
Вы еще используете спрайты для одноцветных иконок?
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.
Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)
Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек
Тогда для вас одна из альтернатив, да, у этой есть небольшие баги (неправильно работает с translate в svg), но использовать можно.
Pros:
* Занимает меньше места
* не нужна спец версия для ретин
* это текст, поэтому на него распространяются все css свойства текста
* отлично анимируется (т.к. текст же)
Cons:
* 3rd-party сервис, хотя есть сорсы, так что не факт что минус
* вид будет немного меняться в зависимости от системы и её настроек
К сожалению, иконки в виде шрифта — решение не очень хорошее из-за разных типов сглаживания в браузерах и ОС.
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)
Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg
Так иконки в хроме выглядят хорошо, а в фф уже плохо. (Пример: github)
Если можно закрыть на это глаза, то шрифты — хорошее решение. Также заслуживает внимания и svg
Разница просто ужасная!!!
кликабельно
кликабельно
gulp-sprite-generator был написан как раз из-за невозможности юзать официальный порт spritesmith в «реверс» режиме — из css в css + sprites, без миксинов и прочего лишнего кода =)
Я немного не понимаю, зачем нужен «реверс» режим?
Ну, изначально, у вас есть просто картинки для использования в css. Они совсем не спрайты, и даже разные состояния, скажем, кнопочек — у вас тоже разные картинки. Это исходники, точно такие же, как любой другой код. При сборке проекта, вы эти картинки, как и любой другой код, компилируете по какой-то логике. Когда вы, например, используете uglify, вы же не пишете для этого процесса какой-то код в исходниках? Точно так же и со спрайтами — вам не нужно нигде в .less или .css файлах использовать миксины, полученные, по факту, при компиляции исходников изображений =) Т.е. разработчик css и картинок совсем не должен знать о том, что произойдет с его творением при билде =)
А, я просто привык делать сразу спрайт и стараюсь не допускать таких моментов, когда я или кто-то делает на ховеры/эктивы и другие состояния разные картинки.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.
Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.
Я должен видеть сайт таким, как он будет в итоге и тестировать его работу.
Ваш плагин поддерживает .styl/.less и другие препроцессоры?
Можно ли отключить реверс режим?
Хочу пощупать его потому, что есть поддержка ретины.
Ну да, вопрос в идеологии разработки еще.
Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.
Поддержки ретины нет, есть только поддержка нотации (img@2x.png), на основании которой, можно правильно группировать спрайты =)
Плагину по сути без разницы, какой файл ему скормить. Все, что он делает — это склеивает картинки в спрайты через spritesmith и меняет ссылки на них с правильным позиционированием.
Поддержки ретины нет, есть только поддержка нотации (img@2x.png), на основании которой, можно правильно группировать спрайты =)
при увеличении масштаба страницы по ctrl+ у некоторых иконок появляются вертикальные/горизонтальные полоски по бокам от соседних иконок (особенно в хроме)
этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px
этого можно избежать сделав отступ между иконками в спрайте хотя бы в 1px
делайте SVG спрайты и будет вам счастье!
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii
всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr
* меншье весит
* ретина ready
* font-icons почти то же, но глючат на мобильных (в частности windows phone) и вообще не айс
* кодировать в base64 плохо для мобилок, долго декодируются, используйте acsii
всё вышеописанное + grunt + дополнительные приятные плюшки (4 CSS на выходе для старых браузеров, JS-loader для них с определением поддержки SVG, генерация preview, сжатие png, etc) = Iconizr github.com/jkphl/grunt-iconizr
Раз такая пьянка, надо написать обертку для галпа :)
зачем?
у автора есть в планах, но не понятно когда, уже спрашивал ))
github.com/jkphl/grunt-iconizr/issues/9
можно попробовать через «прокси», всё руки не доходят — github.com/gratimax/gulp-grunt
у автора есть в планах, но не понятно когда, уже спрашивал ))
github.com/jkphl/grunt-iconizr/issues/9
можно попробовать через «прокси», всё руки не доходят — github.com/gratimax/gulp-grunt
Уже начал писать свою обертку :)
Как успехи?
Как начал, так и приостановил работу, появились другие неотложные задачи.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.
Постараюсь найти время на этой или следующей неделе, чтобы дописать.
автор уже переписал компонент «svg-sprite», на неделе-другой обновит «grunt-iconizr» и напишет «gulp-iconizr»
github.com/jkphl/grunt-iconizr/issues/23#issuecomment-69060415
github.com/jkphl/grunt-iconizr/issues/23#issuecomment-69060415
Огромное спасибо за решение!!!
Немного подумав и почитав документацию 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}}
Sign up to leave a comment.
Генерация CSS-спрайтов с Gulp