Simple rules for simple layout.

The discussion in this short article is not about specific techniques for specific cases, the topic of correct optimization of code and graphics for high-loaded projects will not be disclosed either. I don’t know if there are many people here who often deal with the layout of small projects for which the use of haml / sass and heaps of proper optimization techniques are superfluous, well described in articles by other professionals.

For several years, customers have regularly asked me to complete the layout of their project, which for some reason hasn’t been completed by another artist, or to fix bugs, despite the fact that I don’t work with someone else’s code, or break the double price for it. Judging by the tape of projects of famous Russian freelance sites, this problem is quite acute, no one wants to tinker over. The most amazing thing is that most of the errors are typical and easily fixed.

I will try to collect general recommendations, following which you can get not only money, but also thanks to the customer, programmers and future visitors to the site. Things are obvious, but I haven’t found an article that brings them together. The comments reveal the disadvantages of some of the described methods, for convenience, the post contains links to comment branches where you can read more about it.

HTML

Code Logic - Universal Classes

Regularly encountered problem is missing or corrupted code logic during the rest of the process. I'm not talking about blunders, such as overlapping and unclosed tags, but about the completely unfrozen approach of a large number of beginning layout makers to the further fate of their work. My words may seem seditious, but the layout of small projects, such as business cards, 30-60 page corporate sites and the like, there is no need to build on the basis of css- “frameworks”, and a modular grid for the layout of such sites is also not required. This is modern, it shows the level of your skills and it is indeed often justified, but in this case it will only complicate the reading of the code and increase the DOM tree. As the old man Rezo said, do not multiply the essence beyond necessity.

---

Typical situation - news block:
')

<!-- news -->
<div class="news">
    <div class="item">
        <span class="date">16.07.12</span>
        <a href="#" title="" class="title"><strong>  </strong></a>

        <p> </p>
    </div>

    <div class="item">
        <span class="date">16.07.12</span>
        <a href="#" title="" class="title">  </a>

        <p> </p>
    </div>

    <div class="item">
        <span class="date">16.07.12</span>
        <a href="#" title="" class="title">  </a>

        <p> </p>
    </div>

? , , . news-box, homenewsletter? , , , articles-list all_articles.

item. , box, , item , — , .

Update. , .
.

, . , . , . , :

<!-- //-------------- FOOTER --------------// -->

---

— wrapper. , . — .

<div id="footer">
    <div class="wrapper">
        
    </div>
</div>

, , .



float: left, wrapper , (overflow: hidden). , , CSS > , :

.news .item { }
.news > .item { }
#footer .wrapper { }

—

, .

<form action="">
    <input type="text" name="s1" value="" tabindex="1" /><br />
    <input type="checkbox" name="s2" id="s2" tabindex="2" checked="checked" /> <label for="s2"></label><br />
    <input type="submit" name="s3" value="" tabindex="3" />
</form>

, , .

(action    ),        ,          .         ,      . 





   :




<script src="js/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

<script src="js/plugins.js"></script>
<script src="js/script.js"></script>

<!-- Anything Slider -->
<script src="js/anythingslider/js/jquery.anythingslider.js"></script>
<script>
    $(function(){
	    $('#slider').anythingSlider();
	});
</script>
</body>
</html>

body, , . , .

-

• DOM . . :first-child, :nth-child js-.
• . placeholder js.
• ul. div li.
• - , body - .
• , , , . tr:hover, thead, tbody tfoot. CSS- even odd
• . css , images img ( tmp , ), js js, fonts . , .

CSS

-, , , , CSS Ctrl+F.



CSS :

.fmenu_text {
  overflow: hidden;
  vertical-align: top !important;
}
.font_medium .fmenu_item {
  font-size: 11px;
}
.fmenu_item:hover {
  text-decoration: none;
  opacity: 1;
}
.fmenu_item_over {
  opacity: 1;
  background-color: #597DA3;
  color: #FFF;
}
#fmenu_fr {
  background-position: 100% -6px;
}

. , - , . , (position, top/right/bottom/left, float, display, , , outline, cursor border-, , - background CSS3- ).

Update. . .
.

CSS -

• (margin: 0 0 0 0). , .
• reset , . . , font-face-kit's reset.
• . , , . , . - link/visited/active/hover , hover- 15-20 .
• html - /* comment */.
• IE - . . 5-10, .

, , . - , . .

"CSS - ", webo.in " " CSS.

. , - , - . , . , , , , . , , «» , . , , .