{"id":20119592,"url":"https://github.com/box/shalam","last_synced_at":"2025-05-06T14:32:28.627Z","repository":{"id":30925672,"uuid":"34483611","full_name":"box/shalam","owner":"box","description":"DEPRECATED - A friendly tool for CSS spriting","archived":false,"fork":false,"pushed_at":"2017-09-06T23:56:57.000Z","size":196,"stargazers_count":25,"open_issues_count":0,"forks_count":6,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-04-27T06:19:30.741Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://opensource.box.com/shalam","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/box.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-04-23T21:56:10.000Z","updated_at":"2025-02-28T03:02:47.000Z","dependencies_parsed_at":"2022-08-02T20:30:17.132Z","dependency_job_id":null,"html_url":"https://github.com/box/shalam","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/box%2Fshalam","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/box%2Fshalam/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/box%2Fshalam/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/box%2Fshalam/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/box","download_url":"https://codeload.github.com/box/shalam/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252703454,"owners_count":21790887,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-13T19:16:13.772Z","updated_at":"2025-05-06T14:32:28.283Z","avatar_url":"https://github.com/box.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shalam - Deprecated\n\n[![Project Status](http://opensource.box.com/badges/eol.svg)](http://opensource.box.com/badges)\n\nShalam has been EOL'd and is no longer being maintained. It is kept here for reference only and will not be updated.\n\nWe have modernized our stack to use inline SVGs instead of sprited images.\n\n## About\n\nA friendly tool for CSS spriting. Shalam allows you to add Retina-friendly,\nhigh-quality image sprites to your website without modifying any markup.\n\n\n## Installation\n\n### Mac OS X\n\nFirst, you'll need to make sure that your system is ready. If you're running\nOS X, you'll need Cairo installed. Cairo depends on XQuartz. You'll want to\ndownload and install XQuartz from here:\n\nhttps://xquartz.macosforge.org/landing/\n\nThen install Cairo and pkgconfig with [Homebrew](http://brew.sh):\n\n```bash\nbrew install cairo pkgconfig\nnpm install -g shalam\n```\n\nIf you get an error about `xcb-shm`, try running the following before running\n`npm install`:\n\n```bash\nexport PKG_CONFIG_PATH=/opt/X11/lib/pkgconfig\n```\n\n### Linux\n\nIf you'd like to use Shalam on Linux, you can run a similar set of commands:\n\n```bash\nyum install cairo cairo-devel cairomm-devel libjpeg-turbo-devel pango pango-devel pangomm pangomm-devel giflib-devel\n\nnpm install -g shalam\n```\n\n### Windows\n\nWindows support is currently not available. You may find success, however, after [installing node-canvas manually](https://github.com/Automattic/node-canvas/wiki/Installation---Windows). Patches to add or improve Windows support are welcome.\n\n\n## Adding Sprites\n\nSimply use the `-shalam-sprite` declaration in your CSS files:\n\n```css\n.my-great-class {\n    font-size: 1.5em;\n    font-weight: bold;\n\n    -shalam-sprite: \"files-page/chevron.png\" dest-size(32px 32px);\n}\n```\n\nThe syntax for `-shalam-sprite` is simple: a string containing a path to an image asset (discussed below) is required. Following the string is an optional `dest-size()` modifier. `dest-size()` allows you to specify the height and width of the image as you would like it to appear on the page. This is usually the `width` and `height` of the element you are applying `-shalam-sprite` to. Only two positive non-zero numbers that use `px` as the unit are accepted.\n\n\nWhen shalam is run, you'll get this code:\n\n```css\n.my-great-class {\n    font-size: 1.5em;\n    font-weight: bold;\n\n    -shalam-sprite: \"files-page/chevron.png\" dest-size(32px 32px);\n    /* shalam! */;\n    background: url(../img/sprites/files-page.png) -20px -74px;\n    background: url(../img/sprites/files-page.compat.png) -50px -24px/125px 32px;\n    /* end shalam */\n}\n```\n\nThe `background` declarations with all the fixins are generated for you! This means that generating sprites with retina assets (even if your assets are not all retina) is a breeze.\n\n\n## Running\n\n```bash\nshalam /path/to/source/css /path/to/source/images /path/to/final/output/image\n```\n\n- The first argument is the path to a directory containing the CSS files to process.\n- The second argument is the path to a directory containing the source images that will be used in the sprited image. This doesn't need to be a part of your application's main repository (since the source images will not be included in your assets). For example, you might keep your source images in `/Users/matt/projects/site-assets/`.\n- The third argument is the path to the location you expect the final sprited image to go. That is, if you expect to create `static/img/sprite.png`, you will specify `static/img/sprite`. The file extension is omitted intentionally to support a compatibility sprite (`static/img/sprite.compat.png`, for IE8 support).\n\nFor example, you might run:\n\n```\nshalam static/css static/img static/img/sprite\n```\n\nThe URL paths to the sprited images that will be inserted into the CSS will be\nrelative to their paths on the disk. In the above example, the following code:\n\n```css\n/* ~/myapp/static/css/main.css */\n.foo {\n    -shalam-sprite: \"image.png\";\n}\n```\n\nrun with the following command:\n\n```bash\nshalam static/css static/img static/img/sprite\n```\n\nwill yield\n\n```css\n/* ~/myapp/static/css/main.css */\n.foo {\n    -shalam-sprite: \"image.png\";\n    /* shalam! */;\n    background: url(../img/sprite.png) 0 0;\n    background: url(../img/sprite.compat.png) 0 0/40px 40px;\n    /* end shalam */\n}\n```\n\nNotice that the URLs used in the template are relative from the final path of the sprited image to the location of the CSS file. In `static/css/main.css`, `../img/sprite.png` would yield `static/img/sprite.png`, which is what we passed for the third argument.\n\n\n## Advanced Features\n\nMore advanced features are documented on the wiki:\n\n- [Support for pulling source images directly from Git](../../wiki/Git-Support)\n- [Ability to define sprite \"packages\" for easy sprite re-use](../../wiki/Package-Support)\n\n\n## Support\n\nNeed to contact us directly? Email oss@box.com and be sure to include the name of this project in the subject.\n\n\n## Hacking on Shalam\n\nIf you're interested in contributing, please read our wiki page about [hacking on Shalam](https://github.com/box/shalam/wiki/Hacking-on-Shalam) to get started.\n\n\n## Copyright and License\n\nCopyright 2015 Box, Inc. All rights reserved.\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n   http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbox%2Fshalam","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbox%2Fshalam","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbox%2Fshalam/lists"}