Philosophy of Konstruktors CSS Snippets

General Ideas behind Konstruktors

1. Provide copy & paste CSS fragments, not separate files.
   • Having multiple HTTP requests is not a good idea. CSS "text files" are not that complicated to maintain, if well organized and commented. In addition, the Firebug extension makes CSS debugging so easy. It was not so a few years ago.
   • There should be a freedom to choose the class/id names. Everybody has a set of specific names for certain page elements, that they are used to.
   • Nothing to download - use only what you need.
2. No hacks or browser specific filters.
   • They are necessary only for small details, not the big things like layout, typeface and size. Konstruktors helps you build big things faster, leaving you time for the details.

Grid Ideas

1. Uses percentages as a measure of width.
   • The container of a site can be of any width you want (ems, px or %).
   • The display of web is no more restricted to desktop monitors. If the device is smart enough to deal with using CSS, it will most likely know how to make use of adjustable content.
2. 30 grid units (+2 extra).
   • Easy to do the math while coding - all the block class names in a single container should add up to 30. Two equal columns: 15 + 15; three equal columns: 10 + 10 + 10units.
   • Why exactly 30 units and not 12, 16 or 24? I started with 12 and realized that the smallest width of a column I needed was either too thin or too wide, and came all the way up to 30.
   • The typical number of equal width grid columns in web design is 2, 3, 4, 5 or 6. In order to build them all, one would need 60 unit width grid. There is no integer before 60 that can be divided by all of these numbers. However, dividing 100% by 60 units we get a unit width of 1.66(6)%. I think IE would go crazy about having to round such numbers. Therefore, the next reasonable number is 30, which leads to 100 / 30 = 3.33% unit blocks.
   • Although 30 units / 4 columns = 7.5 units per column, there are special class names for blocks of width 25% and 75%, which are .bb-t7a and .bb-t22a. Thus, with 30 standard and 2 extra classes we cover most of the possible grid lines.
   • The Golden Ratio. Although the principle of dividing layout according to the golden ration is totally different from the grids, it is still possible to construct such a layout width Konstruktors. Here is how. The golden number φ = 1.6180..., which means that in a two column layout, the smallest column is 0.618 units, while the largest is 1 unit wide. If that's so, it follows that the largest column is 0.618 of total width (0.618/1 = 1/1.618). Thus, the smallest column is 38.2% and the largest 61.8% of total width. This (almost) corresponds to classes .bb-t12 (40%) and .bb-t18 (60%) in Konstruktors, especially if you consider the padding you might apply.
3. Use an additional inner div for the padding of the grid block, if necessary.
   • For the most of the content blocks you will need to apply padding, especially, if it has a color background or borders.
   • Browsers have many different and inconsistent ways of dealing with content that has width, margins and padding. Ohh, and borders too, dear IE.
   • There is nothing dirty about using two divs for a block of content - one describes its dimensions, while the other defines its content.
4. Don't use nested styling for content blocks (through multiple levels of .bb-tn block classes, e.g. .bb-15 .bb-10 {...}). Apply additional class names to style separate grid sections, with names that are relevant to the content of the section.
   • Imagine a layout where you have three grid containers inside each other (because of complex layout, not ignorance). If you had applied the left side border to .bb-tbase .bb-t15 {...}, there would be border on all the nested .bb-t15 blocks.
   • Don't mix the style for laying out grids with the style of their content. Use grid classes for grid layout (number of columns and their width) and additional classes for styling the content that is inside the grid (background, borders, padding). This helps you in larger projects, where the grid structure has to be used in different parts of the website. Think of a newspaper's website with sections devoted to different occasions, like elections or major sports events.

CSS Class &amp Id (Identifier) Names

Letters a, b and c define the alignment of any grid object. a - left, b - centred, c - right.

For example, grid columns can be aligned left, right or centred, which coresponds to class names .bb-fa, .bb-fb and .bb-fc. Letter f means floating.

Another example is the padding of the grid content, which can be applied to either the left, both or only the right side of the grid column. Therefore, we use .bbin-a1, .bbin-b1 or .bbin-c1 classes to define the padding of grid content. Letters 1,2...n are used for different padding sizes - one could use 1em, 14px, 10% or any other size. Use a distinct number together with a side to which the padding is applied.