ShelfLife - [responsive][2.0.x][free]

[Bloc]

ShelfLife is a responsive SMF theme that do not use drop-down menus. They have been replaced with push-only drop-line menus, to make it easier for both touch and non-touch devices alike. Much of the CSS have been simplified and HTML5 / CSS3 have been used to full extent.

- Testet on IE11+, Chrome 40+, Safari 5.1+, Opera 31 and Firefox 40+ , note that earlier versions of the browsers may not render it 100% accurate.

[margarett]

Very, very nice

[Ken.]

Great theme Bloc! It's good to see you making new themes.   

I really like this ShelfLife theme, all the choices for bg, css, board icons, ect make it a very desirable theme. Currently it's running on my xampp, but you've inspired me to make a new online test bed to give it a run there.

[Ken.]

Picking up a few errors:

Code Select Expand

http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: boardicons1
File: C:/XAMPP/htdocs/Themes/default/emailInactiveUsers.template.php (set_settings sub template - eval?)
Line: 550
   
http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: module_boardindex_text
File: C:/XAMPP/htdocs/Themes/ShelfLife_100/Settings.template.php (settings sub template - eval?)
Line: 169

[Biology Forums]

This is gorgeous. I will see if it fits in my Homework Clinic website. The only thing I don't like is the linktree. Bloc, I think you should start using FontAwesome into your themes.

[Biology Forums]

Another question, Bloc:

Will this be easy to adapt to 2.1 when it becomes public?

[Bloc]

This is gorgeous. I will see if it fits in my Homework Clinic website. The only thing I don't like is the linktree. Bloc, I think you should start using FontAwesome into your themes.

Its using webfonts already: IcoMoon, where I have used their online editor to only include the glyps I need, and not the entire set. It also allows me to use several sources in the font, including Fontawesome.

Yeah, the linktree needs some work.

Another question, Bloc:

Will this be easy to adapt to 2.1 when it becomes public?

I am already working on a version for 2.1 beta, so it should be effortless to update the theme.

[Bloc]

Picking up a few errors:

Code Select Expand

http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: boardicons1
File: C:/XAMPP/htdocs/Themes/default/emailInactiveUsers.template.php (set_settings sub template - eval?)
Line: 550
   
http://localhost/index.php?action=admin;area=theme;sa=settings;th=4;ca22b13d51a=fa070da7b7dbaf7a16c1f9e48ec3e6e6
8: Undefined index: module_boardindex_text
File: C:/XAMPP/htdocs/Themes/ShelfLife_100/Settings.template.php (settings sub template - eval?)
Line: 169

Thanks, Ken. These errors should be gone in the next release.

[Biology Forums]

I didn't notice that you were using IcoMoon - very cool.

I can humbly say this is the best free theme available for SMF. Looking forward to testing and using it.

[Bloc]

I didn't notice that you were using IcoMoon - very cool.

I can humbly say this is the best free theme available for SMF. Looking forward to testing and using it.

Thank you.

[Bloc]

A bit late..but here is a run-down of features in ShelfLife, most of which resides in "current theme settings":

- HTML5 / CSS3 based
- collapsable forum categories(in addition to the normal collapsing this one only hides them. Saved for members)
- Preset board-icons for every board, new ones can be uploaded and will be auto-detected by the theme.(into "images/boardicons" on the format PNG)
- Responsive CSS. Forum width will only stretch to about 1200px. You cannot set the width, this is make sure it looks good in all devices.
- No dropdown menus, for the same reason as above.
- background preset images. Its possible to upload more on the format "backbg123.jpg" into "images/theme". Once it is it will be auto-detected.
- same for the top background, which can also be turned off. format is "topbg123.jpg" and goes in same folder.
- hide the header(with main menus) when inside admin/moderate screens.
- inside topics the extra info about the poster is shown when clicking the avatar
- Possible to include extra copyrights in an array(inside index.template.php, in the template_init function)
- index.css is using a more compact style for the styles, to easier to read.(minimized version will be supplied soon) 
- using IcoMoon webfont for many icons.
- Google webfont for catbg style.

[Bloc]

New release: v1.0.1

- several fixes and changes added.
- Support for SimplePortal added.*

*SimplePortal have two settings that were changed/removed to "current theme settings" instead, to make the responsive part easier. These are:

- left panel width and right panel width. You also have the option of making the theme
- full-width above 1200px, since the extra sidebars are added, and to totally
- hide panels when below 680px(assumed most mobile devices start). Otherwise the new width settings will make the panels go above and below the content.

- to download: https://github.com/Bloc67/ShelfLife/releases

[Biology Forums]

Hey Bloc, if I setup a right column portal, it will automatically go to the bottom using a mobile device?

[Bloc]

Yes, (I am still pondering if I should target more specifically) right now any device below 680px in width will see them go below.

My dilemma is that some mobiles have larger resolutions, so I might be forced to also test for pixel-density, which is generally higher on mobiles. Meaning a 5 inches mobile screen with 1200 pixels in width have a higher value for that, than 1200 pixels on 13 inches screen. The actual space is smaller, so sidepanels will make it look crowded and harder to read.The same resolution will make the 5 inches sharper in image quality, thats all.

Mind you, its only for SimplePortal, so far.

[lifeguard81]

Wow Bloc!

This theme is realy nice!

[busterone]

Very nice theme Bloc. 

[Antechinus]

Bloc, don't you dare start doing interesting things again. You might get me interested too.

[Bloc]

Hehe Its fun though, throwing everything around...I started with a total blank CSS file and the goal to rewrite a lot of templates. So currently I have a index.css which do NOT need admin.css/moderate.css(they are blank lol) and still just  42k.

Compare that to 2.0's default theme 56k + 9k for admin..or the 2.1 default staggering 76k + 13k for admin..and another 9k for the responsive part! Thats a total of 98k just for the CSS...over 2 times more than I have for ShelfLife. I still manage to get a complete theme just by using more classes and lot less id's.  AND i did not include any special CSS framework - which some seem to think lmao - but I did create a few classes to help with it. Inspired by frameworks, not including them, that keeps the sizes down.

Now, CSS alone isn't the whole story of course..I also try to use native js, small snippets instead of adding more plugins to the mountain of a library thats called JQuery(but in 2.1 I have no choice, which is another reason I am not the least thrilled to code for it), and I have started doing common parts..like my Common.template which renders boards(called from both Boardindex and Messageindex) and list topics(from Messageindex, unread and replies templates). These things make it easier to change alot faster and not have to worry about inconcistencies. Still have long way there though, I like more common things.

I also got rid of oh-so-unexessary double-up GenericMenu thing. i mean..dropdown or sidebar, who cares? One menu is enough, and re-using that on quickmenus and quickbuttons makes it lot less to keep tabs upon.

Admin part I did not add many "admin" styles at all..instead I changed slightly the already defined styles so thy are bit tighter in there. When you change for example titlebg it will reverberate to admin too..but font-size etc. will still be better suited for admin. Especially if you like to add a webfont and 56px in size on normal titlebars.

[Antechinus]

Sounds good. I might take a look at it over the weekend.

ETA: GPL? Isn't that incompatible with SMF's license? Why not something more liberal?

ETA2: Hmm. bwcell33 for a class name? Why not just call it attachment? Much clearer to anyone who wants to wade into the code. Tricksy little code names that don't obviously mean anything are one of my pet hates.

[Bloc]

GPL2 because I like people that re-use the code, to also offer it for free, not sell it. It should be compatible since it is a theme in the first place..but others may know more about that.

bwcell33..yeah, from the days of  "BlocWeb" themes I might change it to some better, but at least its quite unique names and only used for creating grids. So "grid" might be a better one.(unless/until some mod get the crazy idea to use that too ) ..or maybe just "gridcell". That might work.

I forgot to mention: the js I added are kept in theme.js. Some are inline in templates too but try to avoid it now, makes for better code if not inline.