Prosilver Overhaul/Modernization

[hanakin]

******************** CHANGED *********************

Through further discussion of this topic with several others including devs and work on my own, it has been pointed out that the scope of the original proposal far surpassed 3.2 so it has been broken down into smaller goals/RFCs.

We will be updating the current theme but not restructuring it semantically as far as HTML goes.

With that being said here is a list of what needs to be tackled.

1. Javascript conversion to jquery
   • All the javascript contained in the theme will be converted to jquery essential simplify & condensing it as well as removing all inline bad semantic onclick, onchange etc.. functions
2. Core HTML generation fixes/removal
   • There are several places where phpbb generates HTML code, this is a bad idea for a couple reasons. First the code is rigid and uses bad semantics to begin with. Second it restricts theme development and code progression. Examples would be the paging system rather than exporting all the code it should be a template loop the exports either a span text or an anchor. This way we can first make it semantic by putting it in a list rather than a comma delimited text block not sure if they were thinking on that one.
3. Image Sprites
   • All images used with in the theme should be compressed into sprites and loaded through css rather than IMG tags.
4. CSS Rewrite
   • The CSS for the theme needs completely rewritten. This includes restructuring of the CSS file , combining into one file, modern practices, Removing of all inline-css within the html, etc...

With all of these completed we will improve the current theme as well as speed up page loads and reduce server load.

RFCs for these should be created by those willing to dedicate time on working on them. If you are willing to help out or take point on any of these topics create an RFC post. Then pm me as I will be more than happy to help out with all of it, and I will then link to it from this post to keep it all organized in one place.

Further discussion in this post should reflect the project as a whole and keep any individual discussion to the individual RFCs

Keep in mind I am still working on the project as a whole as well and have it up on a test board for everyone to play with as I go along, so that you may make suggestions and point out problems

Test Board: Link

Feel free to create an account and toy around.

I have also created a global moderator and standard user account for everyone for testing purposes

MODERATOR
USER: testmod
PASS: testmod

USER
USER: testuser
PASS: testuser

*Keep in mind that the board is currently running off of a the development version of phpbb and currently has no js functionality

[MichaelC]

Could you please fully expand your points with all of your thoughts otherwise those parts of the RFC may not/can't be implemented & commented upon.

I do agree that prosilver needs a code overhaul and some UI changes but some of the things you mention are more changes to the style system/coding guidelines rather than prosilver itself.

[hanakin]

first at your comment

some of the things you mention are more changes to the style system/coding guidelines rather than prosilver itself.

well some of it does need changed! Alot of the template variables need rewritten to better control the structure and the guidelines would need updaed or changed to reflect a more modern approach.

I thought I was being pretty clear for the most part but here goes.

1. Javascipt:
   • all javascript needs to be external and we need to use a framework such as jquery to attach event calls to elements rather than using in-line calls
2. In-line styles:
   • these need to be completely removed from both the template files and the style system itself. It should never be used as it prevents altering of the style through the css files.
3. Structuring of the template folder:
   • we need to restructure it a little to make it easier to maintain and visualize. IE a separate folder for the scripts, also a separate folder for includes where the template files that do not get called directly are housed.
4. Limit HTTP requests:
   • There is more than one way we can approach this but we need to use massive image sprites or possibly even @font-face to limit the amount of images the theme has to load. We can also use css3 in some place to completely avoid the need for images.
     
     EXAMPLES
     • round corners and gradients can be achieved in all modern browsers via css3 so we would only need to use images for older browsers to accomplish this.
     • post-icons, profile-icons can all be combined into one sprite or consider something like this using @font-face to produce the icons. way the options and see what requires the smallest file size.
     • forum-buttons we do not need to use images for these at all in modern browsers we can use pure css3
5. HTML Changes:
   • HTML 5 is on its way so preparing for that is one major change some of the features are fully support now and can be used such as the simplified document heading

     Code: Select all

     <!DOCTYPE html> 
     <html lang="eng">
     <head>
     

     and the removal of the type attribute for <link> tags
   • Better structuring of the elements IE the forum list as opposed to being individual divs and different types of lists it should be an OL and a serious of ULs, the DL should be used only for the headings and not the row it self. In other words using html tags as they are ment to be used this is what the term semantics means
   • Implement an abstraction between layout structure and content in the CSS.(sort of OOCSS but maybe not fully) We use a series of classes and html elements to structure the layout
     
     EXAMPLE
     we separate each block into 3rds(Rule of three design principle) hd=header, bd=body, ft=footer, lt=left, cn=center, rt=right
     

     Code: Select all

     <section>
         <article>
             <hd>
                 <lt>
                 <cn>
                 <rt>
             </hd>
             <bd>
                 <lt>
                 <cn>
                 <rt>
             </bd>
             <ft>
                 <lt>
                 <cn>
                 <rt>
             </ft>
         <article>
     </section>
     

     this illustrates the classes, we declare the section and give it a wrapper of article we then have 3 rows and 3 columns giving us a rule of thirds to work with. We do not have to use all three rows or columns only those we need. This gives us extensive control over the markup with very minimal css and is very intuitive to read through
     
     with this structure we would get something like this for the navigation section

     Code: Select all

     <div id="nav" class="section">
     			<div class="article">
     				<ul>
     					<li>
     						<ul class="hd">
     							<li class="lt">
     								<ul class="breadcrumb">
     									<li class="icon-home"><a href="{U_INDEX}" accesskey="h">{L_INDEX}</a></li>
     								 	<!-- BEGIN navlinks -->
     									<li><a href="{navlinks.U_VIEW_FORUM}" title="{navlinks.FORUM_NAME}">{navlinks.FORUM_NAME}</a></li>
     									<!-- END navlinks -->
     								</ul>
     							</li>
     							<li class="rt">
     								<ul class="tools">
     									<li><a href="#" onclick="fontsizeup(); return false;" onkeypress="return fontsizeup(event);" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>
     									<!-- IF U_EMAIL_TOPIC -->
     									<li class="rightside"><a href="{U_EMAIL_TOPIC}" title="{L_EMAIL_TOPIC}" class="sendemail">{L_EMAIL_TOPIC}</a></li>
     									<!-- ENDIF -->
     									<!-- IF U_EMAIL_PM -->
     									<li class="rightside"><a href="{U_EMAIL_PM}" title="{L_EMAIL_PM}" class="sendemail">{L_EMAIL_PM}</a></li>
     									<!-- ENDIF -->
     									<!-- IF U_PRINT_TOPIC -->
     									<li class="rightside"><a href="{U_PRINT_TOPIC}" title="{L_PRINT_TOPIC}" accesskey="p" class="print">{L_PRINT_TOPIC}</a></li>
     									<!-- ENDIF -->
     									<!-- IF U_PRINT_PM -->
     									<li class="rightside"><a href="{U_PRINT_PM}" title="{L_PRINT_PM}" accesskey="p" class="print">{L_PRINT_PM}</a></li>
     									<!-- ENDIF -->
     									<li id="searchbox">
     										<form action="{U_SEARCH}" method="get" id="search">
     											<fieldset>
     												<input id="buttton" value="" type="submit" />
     												<input id="field" type="text" value="" name="button" />
     											</fieldset>
     										</form>
     									</li>
     								</ul>
     							</li>
     						</ul>
     					</li>
     					<li>
     						<ul class="ft">
     							<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
     							<li class="lt">
     								<ul class="functions">
     									<li class="icon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a><!-- IF S_DISPLAY_PM --> (<a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a>)<!-- ENDIF --></li>
     									<!-- IF U_MCP -->
     									<li>[&nbsp;<a href="{U_MCP}">{L_MCP}</a>&nbsp;]</li>
     									<!-- ENDIF -->
     									<!-- IF U_RESTORE_PERMISSIONS -->
     									<li><a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a></li>
     									<!-- ENDIF -->
     								</ul>
     							</li>
     							<!-- ENDIF -->
     							<li class="rt">
     								<ul class="navigation">
     									<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
     									<!-- IF not S_IS_BOT -->
     										<!-- IF S_DISPLAY_MEMBERLIST -->
     									<li class="icon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li>
     										<!-- ENDIF -->
     										<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) -->
     									<li class="icon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li>
     										<!-- ENDIF -->
     									<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
     									<!-- ENDIF -->
     								</ul>
     							</li>
     						</ul>
     					</li>
     				</ul>	
     			</div>
     		</div>
     

   • there would also be some proposed design changes to the look of the theme as well some of which are contained in the example above like moving the search filed into the navigation as it is on the phpbb.com site and the moving of the moderation control panel link to the navigation as well following the ucp link possibly adding the ACP link here as well not sure about that yet.

[DavidIQ]

I think I agree with everything here except for the HTML 5 part. Since it is still in its infancy and is not even approved yet, we shouldn't be adopting HTML 5 standards that will break older browsers that are incapable of interpreting this. HTML 5 is best left for phpBB 4.0 at the earliest. I think the same can be said about your CSS3 comments as well.

[hanakin]

I think I agree with everything here except for the HTML 5 part. Since it is still in its infancy and is not even approved yet, we shouldn't be adopting HTML 5 standards that will break older browsers that are incapable of interpreting this. HTML 5 is best left for phpBB 4.0 at the earliest. I think the same can be said about your CSS3 comments as well.

im not saying use any html5 features thats debatable but plan for them

as for the css3 its fully accepted for all browsers as far as i am aware with exception to ie 6 and below. We can accomodate for them by not using the css3 for them.
Everything i pointed out is fully degradable and bears no problems with modern techniques

however this brings a point i left out.

browser versioning, a rating scale as introduced by yahoo where all browsers that the software can be rendered on is rated a - c with what should be rendered for each. which are being supported, so forth and so on.

[Oleg]

Ambitious undertaking!

I have two requests:

1. Please make the mockups available under GPL or otherwise free (as in freedom) terms. One of the properties of prosilver is that its mockups/prosilver gdk are restrictively licensed.

Question for phpbb legal department - are mockups derived from prosilver html (as opposed to gdk) legally distributable under GPL?

2. Please use more punctuation

So far the development team has not commented on this rfc. If there are issues that would prevent its acceptance, surely the author would appreciate knowing about them earlier rather than later. What do the developers think about this rfc?

A verify important aspect to consider is the ease of modification of the new style by people who are not frontend developers. Such people would include myself. As the subsilver removal discussion showed, a number of people find prosilver hard to modify. If at all possible, effort should be expended making the new style easy to modify for people who are not experts in the currently implemented standards, much less standards that are not finished. This should pay off in the long run.

In particular, common modifications that people are performing now (I'm thinking http://www.phpbb.com/community/viewtopi ... 4&t=639205 and perhaps other topics in style support forum) should be accounted for and should be as easy to make as is practical.

[hanakin]

Please make the mockups available under GPL or otherwise free (as in freedom) terms. One of the properties of prosilver is that its mockups/prosilver gdk are restrictively licensed.

Sure thing that was the plan how ever they are not final in anyway. There is probably a lot still missing from them and critiques on changes or additions would be greatly appreciated as I do not run a board myself only moderate, I have not come across every possible rendition the software can produce I'm sure. Also other than just including a text file saying this is GNU is there anything else required for this I do not work much with Licensing other than CC.

A verify important aspect to consider is the ease of modification of the new style by people who are not front-end developers. Such people would include myself. As the subsilver removal discussion showed, a number of people find prosilver hard to modify. If at all possible, effort should be expended making the new style easy to modify for people who are not experts in the currently implemented standards, much less standards that are not finished. This should pay off in the long run.

In particular, common modifications that people are performing now (I'm thinking http://www.phpbb.com/community/viewtopi ... 4&t=639205 and perhaps other topics in style support forum) should be accounted for and should be as easy to make as is practical.

The manner in which I am coding should make handling most every change simply through a css tweak file. And the layout for the CSS file it self will be extremely organized and laid out to make finding exactly what you need, especially for all you MAC users out there who have access to CSSEdit.

That brings up an interesting side note, I actually aside from the update to the structure would like to suggest a few modifications to the theme, beginning with the awful header and navigation layout. Although this would ultimately come after the structure of the html is pretty much finalized and most likely in a separate topic of its own, although some have been already made in my initial pass but are well commented.

But you are correct in the fact that there has been little to no response from the developers for guidance on this. I am kind of moving forward with what I feel needs changed and will modify it from there based on discussion here.

I have made a lot of headway on this I have updated the first post with a link to my progress for those of you who are too lazy like myself to find it on your own.

[jsebean]

I think I agree with everything here except for the HTML 5 part. Since it is still in its infancy and is not even approved yet, we shouldn't be adopting HTML 5 standards that will break older browsers that are incapable of interpreting this. HTML 5 is best left for phpBB 4.0 at the earliest. I think the same can be said about your CSS3 comments as well.

I agree with that, if you redesign the template I'd rather it use XHTML for this time and not html5. I'd like to see the template work with IE7+ (of course it will work with firefox and chrome however you program it ) Like DavidIQ said, in phpBB4, maybe html5 can be used.

[/a3]

I agree with that, if you redesign the template I'd rather it use XHTML for this time and not html5. I'd like to see the template work with IE7+ (of course it will work with firefox and chrome however you program it ) Like DavidIQ said, in phpBB4, maybe html5 can be used.

Doesn't prosilver already use XHTML under SGML?

and the removal of the type attribute for <link> tags

Why? (X)/HTML is designed so it could potentially have any scripting and styling languages "plugged" into it. I don't see any reason why the MIME-types should be removed.

My thoughts on HTML5: there's no point in changing over until the features are well supported by all browsers. Most of these features are not really necessary in a bulletin board anyway - <audio>, <video> and <canvas> seem to be the biggest changes. The other changes are of course semantic, but those tags are not supported by IE and below without JavaScript.

Better structuring of the elements IE the forum list as opposed to being individual divs and different types of lists it should be an OL and a serious of ULs, the DL should be used only for the headings and not the row it self. In other words using html tags as they are ment to be used this is what the term semantics means

As per this topic, I do think the forum list should in fact be tables. I think a few people here were confused and thought the proposal was to bring table layouts for all layout purposes back - not true. When I talk about the forum listing, I mean stuff like

Code: Select all

CATEGORY NAME    |   TOPICS   |   POSTS   |   LAST POST
Forum Name            656         3423      by SampleUser
                                              yesterday, 3:30 pm

[naderman]

I agree with pretty much all of your suggestions just two things: I think we should move javascript files entirely out of the template and have a js directory on the same level as the imageset/theme/template and we should stick with XHTML meaning we would use XHTML5 (the XHTML version of HTML5).