BNL Home

Converting From Fixed-Width to Fluid Grid

Converting from a fixed-width to a fluid grid template only requires one step... and then a thorough inspection of the site/page content to make sure nothing broke as a result of local style overrides that are conflicting with the BNL template styles.

  1. Update Global Style Sheet Reference
    Every BNL page contains a single reference in the <head> section that points to the master BNL stylesheet: /common/templates/global/css/BNL-960.css. To switch to a fluid grid, update that style sheet reference to point to the master fluid templae stylesheet: /common/templates/global/css/BNL-960-fluid.css.
  2. Check Page(s) For Style Issues
    When switching an existing site (or pages) over to the fluid grid, you should check all pages to ensure that everything is rendering correctly. Any rendering issues that appear on the newly converted, fluid-grid pages are likely the result of local style overrides that are conflicting with the BNL fluid-grid template styles.

    in addition to local styles that are conflicting with the fluid grid styles, there may be a few minor adjustments to make to some page elements so that they render properly at all device widths now that the width of the grid columns in which they appear are flexible.

    ► Check All Grid Content Within Tabs and Bounding Boxes
    In fluid grid pages, the first grid element in a grid row in a tab or bounding box MUST have a class of "alpha" and the last grid element must have a class of "omega." Grid divs that span the entire width of the container div (e.g. a grid_24 within a container_24) MUST have the "alpha" and "omega" class.
    Nested Grid Documentaiton

    ► Check Images
    Images in fixed-width pages are often sized at the same width of the grid div in which they reside so that they span 100 percent of the grid column. However, in the fluid grid page, the width of the grid div columns change depending on the size of the browser viewport. In the new fluid grid page, this results in images not spanning the entire width of their parent div at larger browser widths. To force images to span the entire width of the parent grid_x div, add the class "fwd" to the image, which stands for "Full Width Desktop."
    Responsive Class Attributes