How do I create a flexible layout like this?

Responsive Flexible Layouts
1

how do i flexible layout like this http://www.claudionapolitano.com/portraits/

2

This site was created in Squarespace, and they are likely using a JavaScript library called Masonry: http://codepen.io/desandro/pen/myBxD

In Hype, you could reference Jquery and Masonry, and then you would need to place image elements within the inner HTML of a rectangle. If that rectangle is set to scale based on the width of your viewport, it would work in a similar way – though admittedly this does not use very much of Hype’s capabilities, except to scale up and down the rectangle holding your images.

1 Like
3

guess you mean the proportionally up’n downscaling of the images.
well, this is yet not within hypecapabilities. though you could implement it with javascript. which would have the effect that you could not work 100% whatYouSeeIsWhatYouGet :slight_smile:

4

A great addition would be to have a % width & height property for an element.

So each row you would add 3 images with a width of 33 % and height set to auto.

Easier said than done I presume.

Cheers

Steve Warby

5

thanks

6

Hi check this and this done in Hype, the instructions are on the template.
I think you could use.

http://www.hypetemplate.com/demos/fluid_columns_basekit/index.html

1 Like
7

The only caveat I have for users who are tempted to go nuts with responsive in hype is that they will need to limit the bitmaps or there will be a loading hit, plus Google likes to have images on the page versus within a Hype animation.
My solution is to fill a div with an image set to cover and place the Hype animation over it and set to the same height. This can also be an issue when using the same background image with several animations.
If and when Hype reaches the point where users can set up a shared resource folder, this will help.

8

That is awesome. Do you or can you share the hype file? I have to prototype for a landing page.

Thanks!

Daniel

1 Like