Presenting a responsive template: RESY

[codeless]

After some days of work, i finally was so comfortable with the template, that i released it on github.com. I would be glad if you give me feedback on it, either here (board) or there (github). Thank you!

Edited on Apr 20, 2012: For current screenshots please visit the github-repository! (in folder production choose preview_fullscreen.jpg).

[yellowled]

Okay, first of all: This is pretty great work for someone who hasn't been using s9y for that long. It could use a little more attention to detail here and there, and of course it doesn't cover a lot of commonly used plugins, but that's going to come with more experience using s9y and the template system. Good job!

Sound like a "but" coming up? Right.

– You're using new semantic HTML5 elements, but no HTML5 shiv, so this won't work in older browsers. That's fine, but you should mention that to users in a README or something.

– Not sure the empty description/author elements are a good idea. There's a s9y plugin which sets these, BTW.

– Not a huge fan of the LESS/JS option because it wouldn't have a non-JS fallback. (Then again, I'm a SASS guy myself.)

– I think you should avoid empty elements like nav and footer altogether until you actually use them.

– No need to include jQuery, it's bundled with s9y since 1.6, so it will be loaded twice in your template, which is not good in terms of performance.

– I wouldn't put the basic screen styles at the top of the css. It doesn't impose any cascade issues here, but that might change later.

– You might want to add some solution for reponsive images (and/or other media like videos).

Again, this is a good start and very impressive for someone new to s9y templating. Can't wait to see more. (Especially since we've been cut short on the templating front lately.)

YL

[onli]

Wow, if YL has so few and constructive criticisim, it has to be good ;)

If you feel that the template is ready, make sure to get it into spartacus (adding it to additional_themes in github, either via a push-request or via contacting one of us).

[codeless]

Hello!

Thanks for the feedback. Yellowled seems to have an very sharp eye, indeed!!
For one thing i would be glad if you could offer more infos: about the LESS/JS option. If I understood correctly you would prefer a non JavaScript fallback-option, which allows the template user to make use of LESS without the need to install the LESS-compiler?

Thanks & Greetings,
codeless

[yellowled]

If I understood correctly you would prefer a non JavaScript fallback-option, which allows the template user to make use of LESS without the need to install the LESS-compiler?

I'd just leave the non-compiled version out of it in the first place, maybe not even bundle the .less-files with the core download. You could always offer them in a seperate archive.

From what I can tell, most s9y users are uncomfortable with editing even the style.css, especially if a template is part of the core or available via spartacus. That's because changes will get overwritten in case of an update (which is why 2k11 has the option to add your own user.css, although the solution is less than ideal from a technical point of view). Most of them won't need your source files or might even be confused by them, which is why I wouldn't ship them with the template.

I don't think there is a proper way to include a non-JS fallback for the JS-version of LESS, which (frankly) is one reason I chose SASS myself. I don't mean to get into a LESS-or-SASS discussion here, I just reckon if someone would want to use the source files, (s)he'd be able to set up a compiler for it.

YL

[codeless]

Hello YL!

Thanks for the bunch of tips; i've already updated the github-repo to some extent. I'm not done with the responsive image solution or the HTML5 shiv problem -- would be glad if you could give me some quick hints (i already read your post about repsonive images).

[yellowled]

I'm not done with the responsive image solution or the HTML5 shiv problem -- would be glad if you could give me some quick hints (i already read your post about repsonive images).

I usually use the HTML5 shiv which comes with Modernizr. If you don't want to use Modernizr, there's always the standalone version. It's just a tiny bit of JS to enable the new semantic elements in old IEs.

As for responsive images, there still is no truly smart solution. In the long run, this issue will likely be solved by a new element or a new image format, but of course that's not helping at all as of now.

For the time being, we're left with the solutions I mentioned in my post plus the newer adaptive images technique (which is based on/an extension of the technique by Scott Jehl). I have yet to test this in a s9y environment, but I suppose it would have to be implemented as a plugin to work properly because it needs a bit of PHP and some .htaccess rules.

2k11 still uses Ethan Marcottes CSS-only technique (plus FitVids.js to help with embedded videos), which works okay if the images are not too big. It works even better in a s9y environment if responsive images not only get max-width: 100%, but also height: auto (because then the img elements can have width/height attributes which are inserted automagically by the s9y media database).

YL

[Don Chambers]

Nice first effort! Thank you for your contribution to the s9y community!

I noticed a bit of a conflict... your config file has this:

Code: Select all

    # Only the right sidebar is supported:
    array(
        'var'           => 'sidebars',
        'type'          => 'hidden',
        'default'       => 'hide,right'
    ),

And your index.tpl has this:

Code: Select all

            {if $leftSidebarElements > 0}
                <aside style="float:left;">
                    {serendipity_printSidebar side="left"}
                </aside>
            {/if}

            <article>
                {$CONTENT}
            </article>

            {if $rightSidebarElements > 0}
                <aside>
                    {serendipity_printSidebar side="right"}
                </aside>
            {/if}

So, if a user had previously used left sidebar plugins, they will be emitted on the left of content. However, they cannot edit, move or hide them from the backend, because there is no left sidebar defined.

So, what was your intent?

Also, I do not think you should use inline styles to float it left... I think that should be in your stylesheet.

[codeless]

Hello!

Thank you, YL, for your hints about HTML5 shiv and the responsive images.

Don Chambers, you spotted a quirk it seems. Well, the state-of-art is, that i don't want to support the left column right of now. My solution would be to clean up the index.tpl and remove the output of the appropriate sidebar. Thank you for the tip about the inline styles. I agree, those are sort of a "no go".

Addendum: By now i've updated the template and pushed it onto github.com. The template (probably) now fits my needs and will go online. I've planned another S9Y installation which will make use of RESY too; but that installation will need several plugins which will force me to extend RESY. After that RESY probably is fit enough to be added to the official S9Y templates?

[yellowled]

The template (probably) now fits my needs and will go online.

Don't forget to show it off in the Showcase subforum.

After that RESY probably is fit enough to be added to the official S9Y templates?

Should be, yes. The primary key whether a template is added to Spartacus is usually the question if it has some unique point about it, which is clearly the case here due to its responsive nature.

YL

[Don Chambers]

Rather than eliminate the left sidebar items, just emit them before or after the right sidebar items, such as:

Code: Select all

<aside>
    {serendipity_printSidebar side="left"}
    {serendipity_printSidebar side="right"}
</aside>

[codeless]

After creating some colorsets a new version of RESY will get released in the next few days. Then i'll put my site in the showcase-section and probably someone can push the template on the official S9Y/templates repository.

@DonChambers: why do you think it would make sense to emit the left sidebar before or after the right one in the frontend? The left sidebar can't be managed in the backend when using the RESY-template...

[yellowled]

After creating some colorsets a new version of RESY will get released in the next few days.

Colorsets are always a popular feature. I would even consider not making the s9y.org-look the default colorset.

Then i'll put my site in the showcase-section and probably someone can push the template on the official S9Y/templates repository.

The templates respository is on GitHub now, so you could just send a pull request.

YL

[Don Chambers]

@DonChambers: why do you think it would make sense to emit the left sidebar before or after the right one in the frontend? The left sidebar can't be managed in the backend when using the RESY-template...

I think it could be a mistake to not allow management of left sidebar items. There is at least a 50% probability (probably higher) that anyone switching to your template will have existing left sidebar items. Once they switch to your template, they will no longer be able to manage those left items. You can force everything to DISPLAY on the right, but I do not see the need to eliminate the ability to manage those left sidebar items.

Regardless, nice job on the template.

[codeless]

Today i modified the template to fit the tips of yellowled and Don Chambers: first, the default colorset is not in the s9y.org colors; second, some support for the left sidebar was added. The admin can choose where to display the sidebar (either left or right), plus both sidebars are outputted on the chosen position via:

Code: Select all

            <aside 
                {if $template_option.sidebar_position == 'left'}
                    class="left"
                {/if}>
                    {if $leftSidebarElements > 0}
                        {serendipity_printSidebar side="left"}
                    {/if}
                    {if $rightSidebarElements > 0}
                        {serendipity_printSidebar side="right"}
                    {/if}
            </aside>

Now when it comes to the pull request yellowled mentioned: please help! If i got it right: before i can make a pull request, i've to fork the additional_themes -- am i forced to download the whole themes for this step? If yes, would it be possible to create an empty repository for s9y themes?
Thanks in advance for any help!