draeton / stitches Goto Github PK

Doesn't work in firefox 24, windows 7.
Nothing happens when I click "Open".

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?

Is it possible to support SVG sprites? Fragment identifiers still don't have a lot of support.

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

It says you need this to install.

I can't find stitches.js.

Help? Thanks!

If all sprites are the same width and height, place them in the .sprite CSS selector rather than in every image.

Hi,

It would be interesting if there was a way to save the image-sprite in JPG and not PNG only.

Thanks!

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 💃

Clicking the same sprite twice closes the sprite properties palette, but it doesn't deselect the sprite.

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:

1. use build/stitches/js/stitches-1.3.5.js, let it do its thing
2. use src/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.

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.

The project needs some unit testing to maintain functionality between builds.

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.

I have dragged and dropped 600 small pngs onto the page a few times and the diagonal disable lines wont go away

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)

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

Image sizes: 256x256
Steps:

1. Add a bunch of images (100+)
2. Click Download

*Note: the page crashes in chrome.

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!

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.

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.

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.

From: https://www.facebook.com/murray.waters

Spritesheet writes a blank png file when generated with firefox. Dimensions are correct but pixels are empty.

It would be nice to have stitches available as gulp plugin

The sorting of the sprites based on file name is not implemented correctly, thus the sorting is wrong.

It would be awesome if you could add some options to override the amount of columns and rows you would like.

http://draeton.github.io/stitches/stitches/dist/stitches-1.3.5.zip

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:

• Change default padding from 5px to 4px so it's always divisible by 2
• Add an option to output a Retina-friendly spritesheet:
  • Include 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)
  • Halve all the background-position values

More information: http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/

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.

When I click "Downloads > Spritesheet", I get a "spritesheet" file without an extension and need to add ".png" to file name myself.