Generate Responsive Code

finchalyzer / slinky

Export your Sketch designs as HTML email templates

Other

598 stars 32 forks source link

Generate Responsive Code #10

Open ghost opened 7 years ago

ghost commented 7 years ago

Need to make it so that Slinky generates responsive code. I think as long as it made it so that the everything stacked on top of each other in mobile clients in the order groups were created in Sketch it wouldn't be too difficult.

Note: Since this is email, it'll need to stack without media queries. Perhaps exporting it to Inky (Foundation for Emails) code would work well for that.

TedGoas commented 7 years ago

Perhaps this could be done in phases. Eg:

Phase 1 - Responsive using media-queries
Phase 2 - Responsive without using media-queries (Hybrid design, Fab four, etc.)

finchalyzer commented 7 years ago

Responsive is a bit tricky to make it fully automatically. It's nearly impossible to guess only from the design what/when/how should break into which screen sizes. An additional UI to edit the parameters could solve the issue.

What do you think about making Slinky compatible with Auto Layout Sketch plugin since they have this already covered? The workflow in this case would be - create the design, make the responsive rules with Auto Layout and then export with Slinky.

TedGoas commented 7 years ago

+1 additional UI - Like a text field in Sketch? Riffing from Auto Layout's pattern could be a good idea since it seems like a popular plugin folks are already familiar with.

ghost commented 7 years ago

I was actually just wondering if an initial implementation would be making people put their content in groups, and then when the email sizes down, it just stacks in descending order... At least for an MVP.

ghost commented 7 years ago

Could be possible to pull some of the code from this project and implement it here: https://animaapp.github.io/docs/v1/launchpad/