Thick As Brick - the simplest html template for layout

    Why was I harmful?
    Because I didn’t have a bike!
    Cartoon “Three from Prostokvashino”


    When you do the same thing ten times, for the eleventh time you unwillingly begin to think about how to optimize the process. So with the layout: after a dozen pages of pages you want to slightly simplify your task. Here, of course, various frameworks come to the rescue (which is just what oocss or the coolest CSS CSS framework from Yandex or a whole bunch of other no less interesting frameworks are worth). Useful and assembly systems ( Ant stands in the service of the studio Lebedev, Yes, and I slowly comprehend his Tao). Do not forget the various hacks and layout templates, of which there are countless numbers on the Internet.

    However, what about the site for which you need to make up a couple of typical pages? It makes no sense to drag a bunch of extra CSS code with you. In addition, it is much easier for many typesetters to write high-quality code from scratch than to overload a bunch of previously declared useless classes. What to do?

    To solve this sucked out of a fingernon-trivial task, I wrote a simple template for layout, which greatly facilitated my work on projects. The template is primitive and simple (that's why it is called), it does not pretend to be a framework title (minus the karma to someone who calls it a framework!;)). It carries pre-declared CSS classes for working with menus, lists, forms, resets of basic tags (such as resetting padding for forms and correct padding for

    ) and some other goodies that are good for me.

    For the most impatient, I will give a link to the project in Google Code , and for the most curious, I will tell you that Thick As Brick consists of:

    • html-file index.htm
      This file contains links to styles and javascripts, empty meta tags and checking for the presence / absence of javascript (for more details about the last item, see Vitaliy Kharisov’s blog);
    • css-file css / common.css The
      file contains a minimal set of resets (for body, a img, form, p and headers) and a basic set of classes (.no-margin, .no-float, .pseudo-link, ul.news, ul.menu, ul.tiles, table.reset, ul.reset, etc.). It is assumed that the layout designer will not change this file, but will edit css / custom.css, which will be discussed below
    • css file css / common-ie6.css The
      file is responsible for the compatibility of the most common classes with our beloved IE6
    • css-file css / custom.css The
      file contains the styles that can be changed in the process of working on a specific project (the original custom.css is empty and contains only comments;)).
    • css file css / custom-ie6.css
      This style file also provides css / custom.css compatibility with IE6.
    • js file js / script.js
      An empty js file. For further “appending”
    • single-pixel gif images / common / x.gif The
      file comes in handy in extremely rare cases

    You can download the template from here in the archive or create the latest version (the archive and version are identical in SVN).

    I really hope that this article will encourage other users, if not to use their achievements, then at least make them write something of their own and tell about it in the comments;).

    My twitter and blog

    Also popular now: