draeton / stitches Goto Github PK
View Code? Open in Web Editor NEWHTML5 Sprite Sheet Generator
Home Page: draeton.github.io/stitches
License: MIT License
HTML5 Sprite Sheet Generator
Home Page: draeton.github.io/stitches
License: MIT License
It says you need this to install.
<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>I can't find stitches.js.
Help? Thanks!
When using a data image it seems very difficult to copy everything properly and paste it into the text field under "import". I usually get some kind of syntax error. Ideally there would be an option to select a file from the computer to get the data from there.
I have an idea how to do this I just tested by hacking around in Chrome's DevTools so I'll submit a pull request in a bit.
when using this you have 2 alternatives:
build/stitches/js/stitches-1.3.5.js
, let it do its thingsrc/require.js
to load the src/js/module/stitches.js
module, but use your own code instead of $(".stitches").each(function () { new Stitches(this) });
, which is cumbersome and hard to discover.i propose that this API is enhanced by the following:
if build/stitches/js/stitches-1.3.5.js
finds some global like e.g. window.Stitches = { STUB: true }
, then instead of attaching a stitches instace to every *.stitches
, it replaces window.Stitches
.
Spritesheet writes a blank png file when generated with firefox. Dimensions are correct but pixels are empty.
The project needs some unit testing to maintain functionality between builds.
This tool should be supported in the major browsers, including IE and Safari. Dropfile and Flashcanvas are included, but they need to be linked up to the existing code.
I want to solve this using groups (which will be assigned their own layout). If solved correctly, groups within groups shouldn't be a problem (other than processing time)...
Editing groups may be interesting... also, creating groups within groups... naturally, Adobe products will be somewhat of an inspiration here
It would be awesome if you could add some options to override the amount of columns and rows you would like.
Is it possible to support SVG sprites? Fragment identifiers still don't have a lot of support.
The rendering code should be broken out from the getTemplates method. This will allow for either an error template or some other code to display to users with non-compliant browsers, or if something else goes awry.
Sprites should not be allowed to have the same name. One solution is to have a flag on the sprite instances that notifies the user about a conflict.Another solution is to process incoming sprites and increment the number at the end of the name (I would probably use a /-\d+$/ convention)
Hi, I just added SCSS support. Everything works fine except for the example. Unfortunately I cannot figure out where it fails. The problem is that the css classes are not injected to the browser. Where should I look for it? After that I can make a pull request to share :)
btw: Love this tool 💃
I'm trying to upload 78 PNG files (and create a spritesheet and CSS from them), yet only around 20 gets uploaded to the spritesheet. How do I upload all of them?
Hey man,
I'm sure you don't work on this much anymore, but would you accept a PR if I added in support for Stylus as well as LESS? I can make a stylus.tpl quickly and I see where to add it in utils/template.js and in js/stylesheet/ and in stitches.tpl. There appears to be enough room for a third tab/radio button.
I use Stylus almost exclusively nowadays and it takes a bit of manual editing to convert from the less stitches outputs to stylus, so it'd be awesome if it could do stylus from the get-go.
When I click "Downloads > Spritesheet", I get a "spritesheet" file without an extension and need to add ".png" to file name myself.
There seems to be a problem with the less output. It generates a mixin called.stitches-[styleprefix] but the mixin that is actually used by all the selectors is still called stitches-sprite.
Hi,
It would be interesting if there was a way to save the image-sprite in JPG and not PNG only.
Thanks!
I have dragged and dropped 600 small pngs onto the page a few times and the diagonal disable lines wont go away
If all sprites are the same width and height, place them in the .sprite
CSS selector rather than in every image.
Stitches successfully generated this sprite sheet:
Almost all flags are 16x11 in size, but two of them are 11x11, so the stylesheet looks like this:
.flags {
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.flags-ad {
width: 16px;
height: 11px;
background-position: 0 0;
}
/* ... */
.flags-ch {
width: 11px;
height: 11px;
background-position: -192px 0;
}
The approach is simple: .flags would be 16x11 in size, and the width and height properties would be omitted in every sprite unless its size differs from the average, something like this:
.flags {
width: 16px;
height: 11px;
background-image: url(spritesheet.png);
background-repeat: no-repeat;
display: block;
}
.flags-ad {
background-position: 0 0;
}
/* ... */
.flags-ch {
width: 11px;
background-position: -192px 0;
}
Apart from that, Stitches is a great and useful tool, nice job!
It would be nice to have stitches available as gulp plugin
Hi,
first thanks a lot for your plugin, so nice to use !
But i tried to use it on my own computer and didn't work.
So i downloaded th stitches-0.1.4 zip, unziped it, created an html page as you say.
JS and CSS are in the good folder, but when i try the page i get those 2 errors (in french) :
Erreur : mal formé
Fichier Source : file:///C:/Documents%20and%20Settings/Administrator/Desktop/stitches-0.1.4/js/stitches.html
Ligne : 10, Colonne : 75
Code Source :
< a href="javascript:void(0)" class="disabled dlsprite" target=_blank>Sprite »</ a>
Erreur : uncaught exception: [Exception... "Node cannot be inserted at the specified point in the hierarchy" code: "3" nsresult: "0x80530003 (NS_ERROR_DOM_HIERARCHY_REQUEST_ERR)" location: "file:///C:/Documents%20and%20Settings/Administrator/Desktop/stitches-0.1.4/js/jquery-1.7.1.min.js Line: 4"]
I use FF 4.0.1 (it is my working computer, cannot update FF for now)
1-adding arrangement ability to items
2-style sheet and image download in zip or on click
3-test the style and sprite in same page to make sure the user is pretty satisfied with it.
thanks for your hard work bb
The sorting of the sprites based on file name is not implemented correctly, thus the sorting is wrong.
Clicking the same sprite twice closes the sprite properties palette, but it doesn't deselect the sprite.
The sprite editor sometimes outputs things like "background-position: -0px -0px". This could be changed to '0px' or just '0' for better, more readable CSS.
MacBook Pros have retina screens and use double density icons. Basically a 100x100 icon would be displayed in a 50x50 space on the screen.
To support with Stitches:
background-size: x y
to resize the image, where x
is half the width and y
is half the height of the image (eg. background-size: 250px 100px
for a 500px by 200px spritesheet)background-position
valuesMore information: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
Doesn't work in firefox 24, windows 7.
Nothing happens when I click "Open".
Currently when importing more than five images while using the compact mode the images are placed in the incorrect order. Images should be arranged as
1 2 3
4 5 6
7 8
But are actually placed as
1 2 5
3 4 6
7 8
It would seem that the size of the spritesheet is not calculated beforehand but while adding each image. In the example case making the spritesheet 2x2 first until 5 images are added where it scales it to 3x3 and continues adding images in the available space.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.