Page

CSS for the developer AND the designer

...about the "#Page Id" element

The "#Page" id is the master content wrapper used to scaffold the min/max width of a site while leaving the body tag untouched. Must be a child of the body tag.

Style for the #Page id scaffolding element 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.

• Intent is to set the overall site-wide page width without disturbing the body tag behaviour.
• Applied as a child element within the "body" tag
• Width can be fixed pixel or percentage values
• Preset width = 100% and max-width = 1680px
• Can add any background, background-color/image, or none. Default is "transparent"
• Most often will contain div elements decorated with a "row" type class (which divide this Page horizontally)

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". and background style.
• Sets overall site page width
• Can set width per device type
• Can set background style properties
• Must be a child of the body tag
• Must contain div with Scaffold element class: Row (.row)
2. Row: as class in a div tag: "row". Divides the Page horizontally. Must be a child of Page
• Divides parent element horizontally creating horizontal zones
• Prevents child elements from encroaching other rows
• Can set background style properties
• Can be a child of any Scaffold element
• Must not contain "content" type elements such as p, ul, nav, etc...
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