Row

CSS for the developer AND the designer

...about the ".row" class

The “row” class is one of three “scaffold” style types in the Qikcss responsive style family. Specifically, the “row” class is used to divide a layout horizontally.

Style for the “row” scaffolding class is found in the qik_2_scaffold.css file/section however, DO NOT alter style here.

To customize this style ad the qik_theme.css file to your project and overide default styles here.

• The “row” class intent is to divide the layout/element horizontally.
• Applied as a class to the “div” tag element
• Width is always fixed at 100% of the containing element
• Can add any background/image, background-color, Default is "transparent"
• Most often will contant div elements decorated with a "col" type class (which divides this row vertically)

About Scaffold Element Styles

Scaffold element styles standardize the way a page renders content in all browser at any viewport size. It dynamically changes the page layout and flow as the viewport size changes.

Using the simplest of tag elements and css3 styles understood by all browsers, scaffold element styles target one sole purpose; to control the layout of rows and columns in different browsers and devices as the viewport width changes. This gives the designer/developer total control over the behavior of a page layout as it responds to a change in page width in any device.

The three Scaffold element class types in the order of their use and hierarchy are:

1. Page: as id in a div tag: "#Page". Sets overall site page width and background style. Must be a child of the body tag
2. Row: as class in a div tag: "row". Divides the Page horizontally. Must be a child of Page
3. Column: as class in a div tag: "col". Divides the Row vertically. Must be a child of Row and contain "content" elements (p, img, ul, etc...)

Scaffold elements wrap or contain “content” type elements that hold the actual page content. Because the scaffold element focuses solely on page division and flow they are not affected by the complexities of content. Conversely because content elements are not concerned about page division and flow as the page width changes the content is not affected by the change in page width. It is this “separation of concerns” that greatly simplifies layout across browsers, devices, and page size.

add QikCss to your project/website:

- QikCss - download latest version here