Legend

Question

I've run out of ideas.

Forum|Forum|9 years ago
July 4, 2017
3 replies
937 views

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/

This topic has been closed for replies.

rayek.elfin

Legend

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

Nebulus C64 longplay Part 1/2 - YouTube

pziecinaAuthor

Legend

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.

rayek.elfin

Legend

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!

pziecinaAuthor

Legend

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.

O

osgood_

Legend

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

pziecinaAuthor

Legend

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.