Its related to:
10. HTML needs to be semantic and follow best practices utilizing HTML5 when possible.
14. Template files need re-broken out into major files and included files for better organization and cleaner codebase(Componentized).
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
The Proposal
The main problem with alot of the content on the web today is the methods we use or have used in the past to design the front-end of a webpage are flawed.
Typically on a professional project we start with a design then code the HTML to fit said design. Then apply or code the CSS to make the HTML reflect the design. This is a flawed model and leads to bloated and extrrmely unefficent and maintainable code.
This is precisely how prosilver was created way back when in 2007 timeframe.
What we really should be doing is instead defining our content via HTML first. Then Designing a them based on this content and applying the CSS to it to reflect the design. This way we end up with a semantic reusable block of HTML code that at its core is completely editable via CSS to fit any design based on its content.
To facilitate this we need to analyse prosilver and break it down into Blocks. Then further break those blocks down into components which are comprized of individual elements.
EXP: The Action Bar would then look something like this
Block: actionbar-block
Components: button-group, paging, input-group
Button Group Elements: text-element, button, button-dropdown, icon
Input Group Elements: input-item, input-button-group, button, button-dropdown, icon
Paging Elements: text-element, pagination, button, icon
Code: Select all
<section class="actionbar-block">
<div class="pull-left">
<div class="button-group">
<a class="button" href="#" title="Post Replay"><span class="text-element">Post Reply</span> <i class="icon icon-reply"></i></a>
</div>
<div class="input-group">
<input class="input-item type="text" placeholder="Search...">
<span class="input-button-group">
<button class="button" type="submit" value="GO">
<a class="button button-dropdown" href="#" title="Search Settings"><span class="text-element">Search Settings</span> <i class="icon icon-gear"></i></a>
</span>
</div>
</div>
<div class="pull-right">
<div class="paging">
<span class="text-element">39 Posts: </span>
<a class="button" href="#" title="First Unread"><span class="text-element">First Unread</span> <i class="icon icon-first-unread"></i></a>
<a class="button" href="#" title="Jump To Page"><span class="text-element">Jump To Page</span> <i class="icon icon-page-jump"></i></a>
<ul class="pagination">
<li class="active><span class="text-element">1</span>
<li><a href="#" title="Page 2">2</a></li>
<li><a href="#" title="Page 2">3</a></li>
<li><a href="#" title="Page 2">4</a></li>
</ul>
</div>
</div>
</section>