Hype Auto Layout (inspired by Figma)

MaxZieb · December 10, 2019, 4:13pm

This little extension was initially more primitive and inspired by the following thread. It then turned into a template and now it has become a full extension after reading an article on the Figma auto layout feature.

This extension helps with positioning elements using a stacking order. It should be assigned to a group using data-auto-layout using the value vertical or horizontal. You can use the data-auto-layout-margin to set the margin between elements. This extension supports symbols, groups and elements. It evaluates the height of each direct child in the group you assign this to. If you want to deviate from this behavior you can use the default class name hypeAutoLayoutSize on a container within one of the children to set the height. If you don’t like the selector name or already have your own you can set it on an auto layout group with data-auto-layout-size-selector as a valid query selector qualifier like (for example) .card. Furthermore, there is an extension wide setting to replace the optional size selector HypeAutoLayout.setDefaultSizeSelector.

PS: Would love to have a IDE preview in the future for this

Demo:
HypeAutoLayout.html

Download:
HypeAutoLayout.hype.zip

Code repository on GitHub

Dependency:

Version history
1.0 Initial release under MIT-license

Content Delivery Network (CDN)

Latest version can be linked into your project using the following in the head section of your project:

_{Load only the extension:}

<script src="https://cdn.jsdelivr.net/gh/worldoptimizer/HypeAutoLayout/HypeAutoLayout.min.js"></script>

_{Load the extension combined with its dependency:}

<script src="https://cdn.jsdelivr.net/combine/gh/worldoptimizer/HypeMutationObserver/HypeMutationObserver.min.js,gh/worldoptimizer/HypeAutoLayout/HypeAutoLayout.min.js"></script>

Optionally you can also link a SRI version or specific releases.
Read more about that on the JsDelivr (CDN) page for this extension at https://www.jsdelivr.com/package/gh/worldoptimizer/HypeAutoLayout

Learn how to use the latest extension version and how to combine extensions into one file at

STE2DG · December 10, 2019, 7:53pm

Incredible work absolutely love this.

I am driving an eLearning project in work based on this ‘stacking layout’ cleverly put together by @MaxZieb.

The design team will be producing the graphics and I will be using the above template to develop the skeleton eLearning application through hype

The app will be used to help new starters find their feet in the company during induction using a ‘smart poster’ design. Users will scan a ‘smart poster’ that has a NFC tag embedded in it to launch ‘hidden gems’ (useful facts about the company) on their phone…using this great template as a starting point.

I will circle back over the coming 4-6 weeks to share my progress.

Thank you @MaxZieb for running with this and doing an outstanding job at developing this awesome template.

Best,
-Stephen

Some prototype screenshots from the project.

jerminator · December 9, 2020, 11:31pm

Could this be adapted to position objects vertically, moving them down the page for narrower windows or up the page for wider windows? Here's a post that has a good example of the issue I'm trying to address: Keeping two resizing objects contiguous - Tumult Forums. I've been experimenting, but don't really know what I'm doing, and may be barking up the wrong tree.testing-word-wrap-changing-vertical-position.hype.zip (66.4 KB)

MaxZieb · December 10, 2020, 1:33am

Hype doesn't track overflow as a factor to size the bounding box. Hype Auto Layout can only track Hype elements (and the associated bounding boxes) so your stuck.

I once made an example/experiment called "FixHeightExample"

Marrying that idea with Hype Auto Layout actually does the trick although it still has occasional hiccups when the observer fire out of the needed order (quick resizing). Also, when inserting an arbitrary object like a red box the margin is only respected below the box. Might also be related to the async observers.

You can always just create everything with the regular box model inside a rectangle and let the browser do the layout if it's regular HTML.

Here is what I got… but I can't spare more unpaid time on it. Hope it helps anyway and points you in the right direction:

HypeAutoLayoutTextTweakTest.hype.zip (107,3 KB)

h_classen · December 10, 2020, 10:39am

@jerminator this is not how Hypes principles work. It's related to absolute sizes and positioning. responsive settings are a very specific functionality of Hype to overcome some of the 'standard' HTML-behaviour. so any scripting approaches become heavily complex regarding document- and elementsettings and elementnestings.

so using any scripted approaches will definetely drive you to manage your document regarding the scripts rules. which may require to limit other Hype-functionalities.

The Hype-Approach on this is to mix responsive settings with Layouts.
Some effort in setup, but it'll do its job.

MaxZieb · December 10, 2020, 10:54am

I agree... but this little extension was built to overcome this shortcoming. And it mostly works well (apart from text layers that don't interact with bounding boxes.).

At least for now! The trend is definitely there in (Sketch), Figma and now also in Adobe XD…
all of them being absolutely positioned design system.

Read about stacks in XD (powerful stuff):
https://letsxd.com/stacks

h_classen · December 10, 2020, 11:50am

i use scripting for respositioning and resizing (elements, scenes, document) in Hype too.
This necessarity appears soon when building templates that are fed dynamically.
would really like a built in approach but i'm not sure its generic capabilities would solve most specific usecases ...

btw: great Extension

jerminator · December 10, 2020, 7:58pm

Wow! Thanks for thorough and in-depth replies! I'm digging into the details to see if I can implement some of this.

So far I've used Hype to create one site: creategood.studio and it works well within the "Hype-Approach". But of course there's always the "I wish I could..."

Thanks for the great application and support!