Skip to main content ↑ ↓
Orion - theme preview Started by Bloc · · Read 65194 times 0 Members and 2 Guests are viewing this topic. previous topic - next topic

Orion - theme preview

I just started a theme which I intended to be for SMF 2.1, but changed my mind once I looked at ElkArte properly. There just so much more to like in the elk :)..anyway, no demo or anything yet, barely started coding but I will be using some of the CSS framework Leaf, simply because much of the goodiness is already worked out there. Not sure how much will be kept, but we'll see how it goes.

Below is a working draft, not complete and probably a bit confusing but its the base of the theme/styles within it. Will be updating this topic as things progresses.

EDIT: link to Leaf http://getleaf.com/

Re: Orion - theme preview

Reply #1 –

Pretty, pretty cool! :D
Bugs creator.
Features destroyer.
Template killer.

Re: Orion - theme preview

Reply #2 –

Looking good!

Re: Orion - theme preview

Reply #3 –

The colors are not mine but the styling is neat. Clean, simple, elegant! Great job!

Re: Orion - theme preview

Reply #4 –

Just an update: the theme is trodding along, so much i'll be posting a demo soon. But it does take its time - I don't want to do it half-way either, so that means changing stuff quite severely. :) I do hope addons don't rely too much on templates being exactly identical to default theme.  :) I'll be doing tests of that of course.

Anyways, some differences from default theme:
   - Totally thrown out index.css, it has way too many styles and would not fit with the theme design anyway.
   - Same goes for the templates themselves...more or less.
   - More focus on what the media quiries change, and for what media. I opted for checks on widths first(desktops) giving for example regular dropdown menus, but once a touch device is discovered it changes to click menus(or slide in/out containers). However, with touch devices having more room(as in higher resolutions), the layout bounce back to desktop style - but still with click menus. WIP no doubt.
   - Added in the option for variants to not only add its own index.css, but also supply their own subtemplates, at least in index.template for now. I don't see the need to add in other templates, but its useful to change the "framing" somewhat for a variant too.
   - All icons are removed. Well..apart from custom topic icons and smilies. I use css/Icomoon instead, but using just pure css to actually render the icons give a lot of freedom on how/if theme show its icons and in what style. That means addons that rely on straight-forward images for its icons will need to be adjusted, if possible.
  
- some stats:
index.css 35kb (includes also icomoon styles)
admin.css 0kb (might include a few styles to off-load the index.css, but basically it won't be many)
font-awesome.css 0kb (don't use them)
rtl.css 0kb (again, same as for admin.css)
images folder 117kb/33 files

--compared to default theme
index.css 97kb
admin.css 24kb
font-awesome.css 26kb
rtl.css 27kb
images folder 597kb/342 files

Of course the comparison is a bit unfair so don't read too much into it..but it shows my goal which is a drastic reduction of files used - both for rendering speed and complexity of the theme.

Also attached 2 working drafts for the stats/poll/profile stats page.

Re: Orion - theme preview

Reply #5 –

This is surely something different from what we are used to see in forum design, congrats  ;)
Last Edit: September 06, 2016, 05:19:05 am by radu81
sorry for my bad english

Re: Orion - theme preview

Reply #6 –

@Bloc so far what you have shown looks amazing, and have to love those file size reductions, great work !!!
 

Re: Orion - theme preview

Reply #7 –

Still looking for something "new" on board index / message index / display / profile / pm page, which are among the most important aspects to me. :D

Re: Orion - theme preview

Reply #8 –

@Bloc , how do you recognise touch screen devices with larger screen size ? What do you use ?

PS: Nice work ;)

Re: Orion - theme preview

Reply #9 –

Quote from: meetdilip – @Bloc , how do you recognise touch screen devices with larger screen size ? What do you use ?

PS: Nice work ;)
Code: [Select]
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 959px),
only screen and (min--moz-device-pixel-ratio: 1.5) and (min-width: 959px),
only screen and (-o-device-pixel-ratio: 3/2) and (min-width: 959px), 
only screen and (min-device-pixel-ratio: 1.5) and (min-width: 959px),
{

Its not a 100% accurate way to check if touch capability is there , but assuming that any device with pixel-ratio higher than 1.5(below 1.5 is typical big size monitors) is of the touch variety this will target those + a minimum of 960px resolution.

My main reason is to keep drop-menus only to over a certain width + below 1.5 pixel ratio. Plus distinguish between high and low resolution on pixel-ratio above 1.5, meaning most touch devices today. If anything falls outside that and still get dropmenus they will work as click menus, based on my testing on a recent android version. In that respect I could just leave it as it is..but targeting gives me more freedom.

Re: Orion - theme preview

Reply #10 –

Quote from: Spuds – @Bloc so far what you have shown looks amazing, and have to love those file size reductions, great work !!!
Thanks. :) Its a pet peave I guess, reducing to just what you need. Of course, minimized version will reduce it further.

Quote from: ahrasis – Still looking for something "new" on board index / message index / display / profile / pm page, which are among the most important aspects to me. :D
Yeah, I know what you mean :) Orion theme might not be the most innovative, but it will make a foundation for more experimental themes. I just need a firm base first. No offense to default theme and the effort put in it, but I just can't get my head around it..not for these things anyway. If I can create all the styles I will need within index.template's code , re-using those styles for all the other templates, then I have accomplished my goal.

Re: Orion - theme preview

Reply #11 –

Looks very nice. Seems very light too.

Re: Orion - theme preview

Reply #12 –

Thanks, @Trekkie101  :) I take care to not leave out any functions from ElkArte(as I have done in some SMF themes) but some of them might be a little different in approach and looks.

Re: Orion - theme preview

Reply #13 –

Interesting project. I'll keep an eye on it.
Master of Expletives: Now with improved family f@&king friendliness! :D

Sources code: making easy front end changes difficult since 1873. :P

Re: Orion - theme preview

Reply #14 –

Wow, the stats look amazing!  :o

Please let me change the colors easily so I can use this theme when it's published!  :D