hrescak / sketch-flex-layout Goto Github PK

Love your plugin! But I can't seem to get margins to work properly. Here is my Sketch file: https://dl.dropboxusercontent.com/u/6258503/sketch-flex-layout-help.sketch Can you please take a look and tell me if I'm doing something wrong or if this is a bug with your plugin?

Many thanks,
Damir

Could be great to be able to work the style in an external file and import it with the plugin to adapt our design. It could saved us lots of time to prototype things if we're already working on components-oriented.

Do you think of adding relative percentage value support in the future?

Sometimes when re-positioning layers, the text layer changes size. Temporary fix is re-opening the file, after which it doesn't happen anymore. the text doesn't resize if the positioning code is commented out from the layoutElementsRecursively function:

var positionRect = currentLayer.rect();
    positionRect.origin.x = relativeX;
    positionRect.origin.y = relativeY;
    currentLayer.setRect(positionRect);

Hey Matej, great work, this is showing a lot of promise, especially for people like me that are toying with design tools on the side.

However I have been wrestling with bugs relative to positioning. I tried all I could for the past few hours, but there are things that won't come around. So I tried to come up with qualified bugs not to loose what I've gathered. In the file, if you just select the .container at the bottom of the iPhone Artboard, and "Add object from prototype", you can see the following issues :

1. The text layer "Des scientifiques ont prouvé..." was applied

• The padding from the outer .row group (12 px on the left = 6 + 6, with .row -> paddingLeft = 6)
• Twice the marginBottom (= 5 px) from the previous element .source (hence there is a 17 px gap between the bottom of .source and the text element, which corresponds to 2*5 + 7 where 7 px is the paddingBottom from the outer .row group, cf preceding remark
  1. Strangely the 1st issue disappears when I hit Cmd+Ctrl+L. However it does not solve the same problem for the .separator group which remains offset

https://drive.google.com/file/d/0B0lA1rMVev-cZWxJZEtiUDFtR2s/view?usp=sharing

Hope this helps. I'm eager to see it working properly !
Cheers,
Josselin

Tried to make a "responsive" layout, which kinda works when done this way: Duplicated the group prototype and set its width to e.g. 640 (iPhone 5). Created object from the new prototype and moved original group content into the new one. Now any change in Cell and Section header prototypes will be reflected on both iPhone 6 and iPhone 5 artboards. Pretty cool.

Here’s the amended example file: http://cl.ly/1B0m0E1V3g16

I also tried applying flexDirection:column; alignItems:stretch; on the original group prototype, which should eliminate the need of separate group prototypes, but for some reason it doesn’t do anything. – Any ideas why?

First of all thank you very much for creating and sharing this plugin. It's amazingly useful and powerful. Here is just a minor bug that I've come across.

If I use a flexbox flexDirection:row and apply a margin to that row and then duplicate that row the duplicated row will not apply the margins specified in my stylesheet if I keep the auto generated 'row .row copy' group name. To have the margin applied I need to rename the group 'row .row' without the text following the classname. It's a minor inconvenience depending on the number of items in the array but if it were possible to ignore text following the classname in a group or layer and still apply the styling properties it would be nice to quickly see the changes before going through and manually renaming each group/layer.

Im using Sketch 3.5.2. After installing the plugin, going through the provided examples does not end with the expected results as the scripts "throws an exception".
From my experience this did not happen in older sketch versions.

Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: ======= DEBUG START =========
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: 0 classes found in prototypes
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: --13ms-- Stylesheet + prototypes parsed
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: --7ms-- Applying stylesheet to layers
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: --20ms-- Computed styles
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: --4ms-- Measures collected
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: --9ms-- Recomputed styles
Feb 19 10:18:04 MyComputersName Sketch[4928]: Exception: TypeError: currentLayer.resizeRoot_ is not a function. (In 'currentLayer.resizeRoot_( true)', 'currentLayer.resizeRoot_' is undefined)
Feb 19 10:18:04 MyComputersName Compute Layout (Sketch Plugin)[4928]: TypeError: currentLayer.resizeRoot_ is not a function. (In 'currentLayer.resizeRoot_( true)', 'currentLayer.resizeRoot_' is undefined)
    sourceURL: /Users/me/Library/Application Support/com.bohemiancoding.sketch3/Plugins/Flex-Layout.sketchplugin/Contents/Sketch/Layout/layout.js

• Artboards should not be touched in terms of position and size. Maybe if a document has artboards, only the things inside of them should be touched ever. It would probably be helpful if there was a way to consider artboard styled so that if you resize it manually, everything inside resizes. Use the layout option maybe? Is this in contradiction with the previous point's solution?
  • in any way, not touching artboard's x and y is probably a good idea
  • solution 1 not touch artboard's position but if you want it's direct children laid out, you need to specify it's height and width
  • solution 2 have a special flag on an artboard/group like #layout and in that way the current dimensions get applied to the artboard's style

How do i make it?

Steps to repro:

• Make a box; for example, 100x100 dimensions positioned at the center of an artboard
• Add a class that only has a Width rule; for example, width:50
• Calculate layout; the box will move to x/y 0 with a height of -0.1 and width of 50

The behavior I expected was that the CSS would only modify the Width property of the box. Thus, the box would have width:50, height: 100, and be at the same position.

Text layers are not intrinsically sized / understood, I need to do some testing to push that further

• part 1 of the problem - resizing parent group changes text size - I can probably see if a group has only text layers and decide to not change the width and height. Another way to do this is to read a size from the text layer and change it back after re-setting width and height (would probably fuck up multi-size texts)
• part 2 - layout is not properly calculated with line wraps: in css layout, style has a measure attribute that takes a closure that apparently takes the width parameter and outputs height. Let's see if we can change the frame on a text after we change the width, (and maybe refresh the document in between), and then return the height in this kind of closure. This will be tough given the bridge and context-switching.

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Hey, is it still supporting on Sketch 39.1 cos I was pressing Ctl Cmd L and it did not work. (every previous steps I did were absolutely right)

Is this plugin still supported, I'm not seeing @Stylesheets applying in newest version of sketch

Hello,
I just wanted to know if someone else is having similar problems?!
If yes.How can I support to fix the bug?
regards,
Patrick

Is this MIT licensed, and if so can you add it? If not, can we use parts of this in our closed source application if we attribute you?

Thanks!

Currently the plugin fails silently if you try to run it without saving your sketch file. Lots of options to fix this, for example:

1. Save the file automatically when you run the plugin
2. Don't require saving to run the plugin
3. Let users know in the readme you need to save it to work

Flex layout does not work in the latest version of sketch.

I create a row as symbol, but when I run the plugin, the symbol is "breaks down".
How does the plugin work with symbol or at all does it work whit symbol?

Regards:
Laszlo Burgermeiszter

CSS styles have been applying to the 1st group of elements, but ignores the rest. I just downloaded the plugin, didn't have it before 3.7.

As soon as I click Compute layout

so that when there's two prototypes with the same child classname, they're not clashing.