Coders

Thank you for your interest in this job.
We have some important guidelines only because there are many coders out there who do not follow industry practices:

  1. do not use any css resets
  2. use semantic markup (instead of divs for titles use h1, p, li tags instead)
  3. most boxes should stretch vertically and be independent as possible form other elements.  For example if you take out a navigation element - the logo wouldn't move. If you take out a paragraph or heading tag - the page layout should stay the same.  (we only mention this because some coders code everythinig to use margins and float - and that is bad for things like the logo and navigation - because if you take one thing out everything around it changes)
  4. use standars css - DO not use sass or less.
  5. html 5 is good but need compatibility backward to ie8 no modernizer, pie or shims.
  6. do not use new html 5 tags because of cross browser compatibility issues
  7. css 3 is good like border radius, etc. but only if backward compatible to ie 8.
  8. code for firefox, ie8 and forward, safari, and chrome
  9. headers and footers should be same html for home and sub page so they can be shared on our cms when we skin to the platform.
  10. Here are 2 examples of some clean code we did in-house for your reference:
    http://www.lunawebs.com/clients/shopgearinc.com/beta1/
    http://www.lunawebs.com/clients/thehaugengroup.com/beta1/
  11. Our bootstrap is attached for reference: code_bootstrap.zip
  12. You do not need to do any javascript.  We will do all jquery/javascript.  Just css hovers, etc.
  13. We only use web safe fonts or google fonts, no embedded fonts for licensing reasons. Also never use images for fonts except in the logo or if we instruct you specifically to do so
  14. Buttons should stretch horizontally so that more or less text can be entered. If possible, do not use a non-repeatable background image.
  15. font size should be set on "html,body" css rule so that all text will at least get a default appropriate size
  16. "width: auto" should not be set explicitly unless absolutely needed, by default most items are width auto
  17. text should not be all uppercase directly in html code, text-transform should be used in css
  18. for code formatting use true tab characters instead of spaces to format the code. File sizes are smaller with true tab characters and more widely supported in editors
  19. if possible do not use a special class to signify the first or last item of a list or set ( such as class="first" or class="last" ). Instead utilize widely compatible css rule for "element:first-child", however "element:last-child" is not as widely supported so should not be used. Often a first child is not needed but it appears a last child special rule is needed, this can be avoided by reversing the rules so that the first element would need a special class then use "element:first-child"
  20. all links should be styled with a hover state. navigation links should be styled with a hover and active class ( see code bootstrap for sub page )

FAQ - Frequently Asked Coding Questions

"1. do not use any css resets" - even such simple resets as for BODY, H1-H6, P, UL, LI?

yes - no resets at all. Body and html you can set margin / padding as needed of course - for example 0 - but no need to reset needed. If you look at our examples we sometimes set padding top or bottom for p tags, or h1, etc. - but that is not a true reset. I hope that helps.

"7. css 3 is good like border radius, etc. but only if backward compatible to ie 8." - as far as I know, IE8 can support border-radius emulation only with the help of JS, or with the help of additional html markup, that uses background images with transparency. But you said in #12 that you don't want JS be added by a coder.

css3 is fine as long as it will gracefully degrade for ie8. So for example - border-radius is fine gracefully degrading to be a square box. Using multiple backgrounds for css3 could cause issues because ie8 doesn't support it. So "graceful degradation" means features can degrade to default when it doesn't cause readability/usability issues.

"11.Our bootstrap is attached for reference." - Do you want it to be used by me? Or its just an example of how the code should be written?

you should use the bootstrap to start the project. That's why it's called a bootstrap because it's meant to start the project.