a.m. wrote:Hi Andrei, that's great news!
Here is a list of some small(and not so small) improvements to nopCommerce from our Front End Developer that could help for making styling nopCommerce much easier and better.
1. Add an element that wraps the master columns together (left column, center column, right column). this is necessary for a specific design to be applied in the background of the columns only (after the header/navigation and before the footer), example:
<div class="content-wrapper"><div class="master-wrapper-side-2"></div>...<div class="master-wrapper-center-2"></div>...</div>
2. Avoid placing text in block elements without being inside a html tag !! this way it is not possible to style it and it's causing problems for example when you need to float all children inside the block element. example (the ":" symbol is not a part of a tag and it's causing problems):
<div> <label></label> : <input/> </div> , and the same problem is present wherever a specific design is needed for an element that is not wrapped in a tag, for example here (the text "2011"): <li class="year"> 2011 <ul id="blog-year-2011"></ul> </li> ... for simple inline styles as color or font-weight it can be done through inheritance, but for a more complex block design it's not good at all to proceed this way. also, in some cases it is not SEO friendly.
3. Avoid placing title text in block elements without being wrapped in a propper html tag, this is not SEO friendly. example:
<div>Title</div>, should be <div><h>Title</h></div> or at least <div><strong>Title</strong></div>
4. Please reconsider the use of definitions lists in nop-commerce (<dl>). definition lists' purpose is to be used for specification data and alike and NOT to replace html tables, and they are not binding to "fieldset" structure. fieldsets could contain normal block elements which is fully semantic structure.
5. Remove at all the 10 years old "IE6" type of clearing floats using empty divs with "clear:both" style, should be done through css only
6. Text elements that act as block "heads" should be wrapped together in another element for more flexibility, example:
<a class="news-title">...</a><span class="news-date">...</span> , should be <div class=""><a class="news-title">...</a><span class="news-date">...</span></div>
Hope all these make sense and if you more specific examples or help we will be glad to help!
Many thanks!