PixelBrite.com®

What is a FlexBlox™?

FlexBloxes™ are stylized containers that are flexible, and grow with your content. Whether it's a paragraph of text, set of buttons, or a "pull-out" to emphasize copy in an article, FlexBloxes™ are rapid-deployment coding snippets and styles to aid in projects. Read Try It Out below to see a quick sample.

<div class="flexblox">
    <div class="pixcol_tl"></div>
    <div class="pixcol_tr"></div>
    <div class="pixcol_t"></div>
    <div class="pixcol_middle">
    <div class="pixcol_l"></div>
    <div class="pixcol_margins">
    <div class="pixcol_content">

    ENTER CONTENT HERE

    </div></div>
     <div class="pixcol_r"></div></div>
     <div class="pixcol_bl"></div>
     <div class="pixcol_br"></div>
     <div class="pixcol_b"></div>
</div>

Example

An example of a FlexBlox™ is located to the right, below the FlexCSS™ logo, along with an embedded childstyle FlexBlox™.

The Snippet

The HTML Markup, or snippet, presented on the right is what you will copy-and-paste into your HTML document. Simply add your content where indicated, and it will be attractively presented with no image editing or special coding. For additional discussion of the FlexBlox™ snippet structure, check out the FlexCSS™ Knowledgebase or the FlexCSS™ User Guide. Further knowledge about the structure itself is not a requirement for using FlexBlox™.

Class-Modifiers

Below the Snippet on the right are the FlexBlox™ classes or class-modifiers (the terms are synonymous). This article will briefly touch on the these class-modifiers, while a more in-depth discussion can be found in the User Guide and FlexCSS™ Knowledgebase.

Try It Out

After ensuring you have Installed FlexCSS™, copy-and-paste the snippet into your document and fill in the content area. The snippet is reproduced below, with the content location highlighted in green. That's it! A default FlexBlox™ will be placed in your document like the blue example below. Continue reading to learn more about how to adjust the appearance of your new FlexBlox™.

<div class="flexblox">
    <div class="pixcol_tl"></div>
    <div class="pixcol_tr"></div>
    <div class="pixcol_t"></div>
    <div class="pixcol_middle">
    <div class="pixcol_l"></div>
    <div class="pixcol_margins">
    <div class="pixcol_content">

    Welcome to FlexCSS

    </div></div>
     <div class="pixcol_r"></div></div>
     <div class="pixcol_bl"></div>
     <div class="pixcol_br"></div>
     <div class="pixcol_b"></div>
</div>

Defaults

Each FlexCSS™ object has a default appearance—FlexBlox™ included. Reassigning the defaults is discussed in the FlexCSS™ User Guide. But, simply adding class-modifiers to the header div will override the default behavior, and apply the style specified. FlexBlox™ also has the noborder class for clearing styles (discussed in the FlexHeads™ section). Below are some examples of FlexBlox™. For a full listing of style names please refer to the FlexCSS™ Quick Reference or User Guide Quick Reference.

Labelleft & Labelright

These two class-modifiers are intended to be used with the new FlexBlox™ HeadBlox styles from the FlexCSS™ Styles Bundle. These classes position an element (label) into the top colored bar. This is demonstrated by the Snippet FlexBlox™ above, which uses both classes to position two labels: Snippet/HTML Markup and FlexBlox™. When using HeadBlox™ labels, the top level element in the FlexBlox™ must have its top margin removed; otherwise, a gap will manifest in IE7 and Google Chrome. This relates to a minor margin concern which is covered in the FlexCSS™ Knowledgebase supplemental documentation.

FlexBlox™ HeadBlox™

New with the FlexCSS™ Styles Bundle are the FlexBlox™ HeadBlox™ styles like those used in the above Snippet/HTML Markup blocks, and the example to the right. These new styles have tremendous versatility and feature auto placement of a left label and right label. Also, dual coloring of the labels is part of each style using a simple <span>. A comprehensive look at HeadBlox™ is presented in the User Guide, with a complete Online Visual Reference housed in the FlexCSS™ Knowledgebase. For more resources, please see the FlexCSS™ Quick Reference.

ALSO NEW: A late addition to the FlexCSS™ Styles Bundle includes 24 Bonus Companion Styles that match the corresponding FlexBlox™ HeadBlox™ designs included int the Styles Bundle. A sample of these are demonstrated below:

Slim5 - Slim35

A thorough examination of the slim class-modifiers is provided in the User Guide. These simply clip a portion of margin, and eventually border-image, shifting the inner-content of a FlexBlox™ closer to the border edges.

FlexBlox™ in Action

The following FlexBlox™ are presented with some discussion of class-modifiers. These styles are included with the Starter Bundle and Personal Freedom License.

header div   <div class="flexblox abspos">

header div   <div class="flexblox childstyle bluepastel-glow slim15">

<div style="clear:both;"></div>

Next...

Next, FlexHeads™ are introduced.