hrescak / sketch-flex-layout Goto Github PK
View Code? Open in Web Editor NEWPlugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes
Plugin for Sketch allowing for CSS Flexbox layouts using stylesheets and prototypes
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 :
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
Steps to repro:
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
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:
Flex layout does not work in the latest version of sketch.
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.
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.