HTML-CSS framework "NTH"

I spread the framework written for myself.
Reason for creation: tired every time when creating a new site to do the same thing - to redo my favorite Tripoli (correcting its bugs, add markup properties); Add jQuery JS framework, create a typical HTML structure. I decided to combine the elements I used frequently into one universal whole.
He did for himself, that is - neat and good.

File structure

  [css] folder with style files
   | - ie6.css stylesheet for Internet Explorer 6
   | - ie7.css stylesheet for Internet Explorer 7
   | - print.css style file for printing devices
   | - reset.css file that resets browser styles
 [img] folder for decorative images
   | - blank.gif single-pixel transparent gif
 [js] java scripts folder
   | - jquery.js jQuery JS framework
   | - script.js script file
 [pict] folder for informative images
 iepngfix.htc troubleshooting IE6 with PNG
 index.html html layout
 style.css BASIC style file 

Notes and Explanations

• The main CSS file is in the root (adapted for use with WordPress).
• Added separate style files for Internet Explorer versions 6 and 7.
• All images used in the layout for decoration are located in the [img] folder (they should be added to the page as block backgrounds, but not with img tags).
• All images used to display meaningful information are placed in the [pict] folder (they should be added to the page using the img tag).

HTML

HTML is stacked non-personally, semantically and validly (XHTML 1.0 Transitional).
This is a fixed-width two-column layout, in which the left narrow column ( .sidebar ) in the HTML stream follows the main part ( .content ).
Watch the layout .
The index.html file has the following structure:

  # all-site
   #header
     .site-logo
     .site-description
   #navigation
   #wrapper
     .content
       . content-block
     .sidebar
       .sidebar-block .search
       .sidebar-block .login
       .sidebar-block .contact
       .sidebar-block .advert
   #footer 

The div tags are annotated with classes (ids) of the closing div .
As you can see, the .sidebar block has several typical nested blocks.

CSS

Based on the Tripoli framework. There are several style files, all of which have been modified.
')

Features and differences from Tripoli

• Added styles for creating a fixed-width HTML layout (980px - total, 690px - content block, 219px - sidebar), horizontally aligned in the center of the browser window.
• The main blocks are separated by a gray border.
• The properties prescribed for the main typography apply to #wrapper - that is, to .content and .sidebar (in the original Tripoli, properties were applied only to the content block).
• The problem with input[type='password'] is fixed (some properties are not specified in Tripoli, as a result, input with this parameter was different from the others; the problem remained in IE).
• Numbered and unnumbered lists are now slightly tied to the preceding paragraphs ( p+ul and p+ol ).
• Added service classes .hide , .right , .left , .more . (The class .more , if set for a paragraph, presses the paragraph to the previous element in the stream, the symbol “→” is added to the link inside p.more )
• For the sup and sub tags, a minded font is assigned.
• The big tag is assigned an enlarged font.
• Fixed problem with multi-level lists of numbered, unnumbered and mixed types.
• Added color change in thead cells, changing the background color of the table row when hovering (not working in IE, problem solved with JS).
• In the design of quotes used "Christmas trees" (French quotes), multilingual support quotes removed.
• For IE (6 and 7) list markers are forcibly hidden in the sidebar.
• For IE7, the internal indents of the textarea and input increased, the internal indents of the buttons are changed.
• Removed references property position: relative; padding: 0.3em 0 .1em 0; position: relative; padding: 0.3em 0 .1em 0; .
• Multiple additions and corrections in print styles.

Structure style.css (main style file):

  / * Name, file details * /
 / * Memo to the coder * /
 / * data on the colors used in the layout * /
 / * BLOCKS * /
 [Description of block structure]
 / * TYPOGRAPHY * /
 [typographical rules]
   / * SIDEBAR ONLY * /
   [typographical rules for .sidebar]
 / * SERVICE * /
 [service rules]
 / * DESIGN ELEMENTS * /
 [design elements of additional blocks] 

Javascript

The NTH framework has on-board jQuery 1.2.6.

Features

• Added highlighting tr when hovering (for IE6; duplicate for normal browsers via CSS).
• Added a change to the value parameter for the input search tag when the focus is received.

License

NTH-framework is licensed under the Creative Commons Attribution-ShareAlike (by-sa) license
This type of license allows you to process, correct and develop a work, even for commercial purposes, as long as authorship is indicated and all derivative works are licensed under similar conditions.

Download NTH-framework

Download from my blog .

Afterword

Bugs are not excluded (and just problems) layout. I would be glad if you pay attention to them. Actually, creating this topic, I really hope that my colleagues will point out problems and errors, possible additions.

UPD: post moved to the blog "Web-development"