I've run out of ideas.

[pziecina]

I have played with creating a combination of css grid and flexbox layouts that are acceptable across browsers and devices, even if they do not have support for css grids yet.

I have already done the standard types of layout, such as equal height 3 column, header and footer, and the standard product/detail type of layout, plus the usual blog and top/side fly-out menu layouts. What I am looking for now is something different, that I could try and convert to grid/flexbox, and if possible use just html/css for most items that would often be done via javascript.

To this end does anyone have any suggestions as to layouts or page components, that they think would not convert to grid/flexbox or just html/css for a component?

Alternatively a link to an interesting design concept, or effect would also be welcome. It does not matter if the layout is in a book, (that I can view on-line) a pdf document, or whatever, just so long as I can see it, (you can even post an image).

On an off-topic note -

css @apply spec has now been published, as part of a collection of ideas, and is the initial idea for the css version of pre/post-processor mix-ins. I'm not saying it will be available any time soon, but it made me laugh when I found that Chrome and Opera already has support for it behind a flag.

https://tabatkins.github.io/specs/css-apply-rule/

[osgood_]

I have not run out of ideas. I'm sitting in the garden with a strawberry rum daiqiuri watching wimbledon, beats coding hands down.

[pziecina]

osgood_  wrote

I have not run out of ideas. I'm sitting in the garden with a strawberry rum daiqiuri watching wimbledon, beats coding hands down.

Sounds like a good idea to me

The problem is that part of my work involves comming up with new ideas, the trouble is i just can't think of any. I may just give up and call time, then go into the garden and drink some wine.

[Nancy OShea]

How about the 2 most requested  Masonry grids & Parallax?

Nancy

[pziecina]

Thanks for the suggestion Nancy, but Masonary grid layout is simple for both css grid layouts and flexbox, and except for 1 or 2 alignment and margin options, one could almost say it is the default layout for both. Though i have to admit the tablet layout does sometimes present a problem, as one has to either change the image sizes, (srcset/picture) or the layout, as 7 inch tablets display as the larger version, and they do not look right somehow.

As for parallax, also easy and done, though the Edge bug requires a work around, see -

http://keithclark.co.uk/articles/practical-css-parallax/

Comming up with something new is proving to be quite difficult, as browsers and devices offer better css support, and update now on a regular basis for most users. Even older Android OS numbers are no longer the problem they were 6 months ago, when versions prior to 4.2 were still popular.

[osgood_]

pziecina  wrote

Comming up with something new is proving to be quite difficult, as browsers and devices offer better css support, and update now on a regular basis for most users.

Personally I think we need to be careful in respect of coming up with new stuff, especially where layout is concerned. There is already some very good layouts that exist which probably would not benefit from anything more complex being introduced other than maybe trying to achieve the same layout using more up-to-date techniques.

It can be said that a lot of website layouts are similar in structure but I think thats because at the moment the 'optimum' layout, which mainly consists of the big hero image slideshow, used as a focal point, has been found and works well, until such time as something else arrives which works equally as well, if not better, but I don't know what that is going to be. I think css grid will bring subtle layout changes visually but not massive ones. DTP operators have been laying out magazines for years and if you look back at the good publications much of it is similar to todays current magazine layouts, save for the use of more modern fonts, better photography, and more innovative print techniques.

[pziecina]

css grids is more of a layout refinement process than an innovative layout technique, and can make what was a simple layout more complex than is required in the wrong hands. Flexbox, whilst not fully used by some, is more of  a flow layout method, that is not worth using for the simple mainly text content pages, but comes into its own for multiple articles or products layouts.

The real innovation is i think yet to come in web layouts, and it is the currently accepted norm for rwd of using the designers grid and not the content to say how it should look and work, that i think is holding everything back.

Maybe hi-dpi displays for desktops will force the quality of layouts to improve also.

[rayek.elfin]

Infinite isometric diagonal grid-based layout in four directions:

- grid view can be panned in all four directions

- content grid repeats itself seamlessly in all four directions

- each flat content box displays a title and short description/image background

- click on any content box "extrudes" it and displays the content. Overflowing content is displayed on the next side of the box, and the box can be turned to show the next page

- multiple content boxes can be clicked to pop-up like towers.

- with proper z-index ordering, of course.

- important content boxes ought to be initially displayed as towers to attract attention. Not too many, though: you don't want to obscure the 'lower' content boxes too much.

- content boxes have arbitrary sizes (up to a point, and the minimum size is controlled by the basic isometric grid size).

Extra challenge:

- make the layout look like an isometric city with skyscrapers

- the sides of building could be made to look like buidlings with windows, balconies, etc.

- add floating clouds

- add roads, with cars moving through the city. Each car represents a twitter feed, facebook message, news item, RSS feed, etc.

- add planes.

- add isometric semi-transparent shadows

No WebGL or canvas allowed, of course. Just html, css, and some javascript.

Hey, you asked!

[pziecina]

rayek.elfin  wrote

Infinite isometric diagonal grid-based layout in four directions:

- grid view can be panned in all four directions

- content grid repeats itself seamlessly in all four directions

- each flat content box displays a title and short description/image background

- click on any content box "extrudes" it and displays the content. Overflowing content is displayed on the next side of the box, and the box can be turned to show the next page

- multiple content boxes can be clicked to pop-up like towers.

o/k got the first three item, as it is a simple 3d rotating carouse with skew, and with overflow hidden and backface visibility hidden. I am having problems with the controls though, as the speed of the rotation for the 2 nd item needs to be controlled, and css animations only allows for hover without js, swipping does not work on none touch screens, and touching the box for item 4 triggers the extrusion on mobile devices, so would not work on touch devices.

If anyone can think of a way to control such an interface, that would be intuitive and did not require js, let me know, but as Osgood said, innovative is not necessarily better. Interesting idea though.

[rayek.elfin]

A layout that rotates vertically around its axis, similar to the old Amiga game Nebulus:

Nebulus C64 longplay Part 1/2 - YouTube

[pziecina]

rayek.elfin  wrote

A layout that rotates vertically around its axis, similar to the old Amiga game Nebulus:

Nebulus C64 longplay Part 1/2 - YouTube

Did one using css animations about 5 years ago, but rotated at 30 degrees around the axis.

Like your idea in the previous post, but extruding the content is simple as it only requires html fragments, in a continuous lightbox, or did you mean something else?

Also remember no javascript, so the infinate scrolling grid would only repeat the content, nice idea though, and possible if i used js.