[preview] mobiOne - mobile-first responsive theme

[Bloc]

After dabbling with trying to mold(and sometimes maim/hack to pieces ) a regular desktop/not-responsive into a responsive desktop/mobile themes I wanted to try a different way in this theme project. As the screenshots show I started on a "mobile-first" premise, and then slightly altered the css for non-mobiles. That is..non-touch-based devices as even mobiles and certainly tablets, can have rather high resolutions these days. I use css media queries to target devices that have a device-pixel-ratio lower than 1.4 ( meaning regular big-physical size screens, aka laptops/desktops.) and change the css for them - but the intial css is targeting mobiles.

It simplified things a lot but also challenge how to make the desktop version at least partly similar to a regular SMF theme again...

I am not sure about the latter part, but have good feeling for the touch version. As you can see I've gone for a Google/Material design(ish) type of layout, with many items hidden away in popup-menus or popup-panels, much like a phone does. Its purely CSS-driven , even for the desktop version,  and I have removed ALL images and icons from the theme, save the dynamic ones like topic icons. Everything icon-like is or will be exchanged for a icon-font based approach instead. The markup is flexible so its quite possible to change the theme easily just by changing the stylesheet. (variants will be added as I like to try out various layouts not necessarily based on the Material Design look)

At this stage there is no demo available, but wanted to show some screenshots of the working theme.

Comments are welcome.

[Antes]

About the menu, I suggest using relative positioning on sub-menu and use latest SuperFish.

[Bloc]

Thanks for the suggestion but I wrote my own css for this. Absolute positioning on mobile works best here, I feel.

On another note, the theme have changed much since I posted these.