Create Cross-Browser Full-Page Layouts With HTML and CSS

Fill is a lightweight JavaScript library used to create full-page cross-browser layouts with minimal HTML and CSS coding. Fill uses a row/column structure to select components (content sections) and place them in the layout. To select a component, mark the DOM element with a data-fill attribute and set a row and column index to 0.

responsive grid layout examples, display grid responsive columns, css grid layout examples, responsive css grid with media queries, grid template columns

How to make use of it:

1. Load the jQuery library and fill.js script of your webpage.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="dist/fill.min.js"></script>

2. Create a grid layout with custom rows and columns using the Fill data.

<div id="fill-demo" class="fill-container">
  <header data-fill="row: 0; col: 0; colSpan:3">
    ...
  </header>
  <nav data-fill="row: 1; col: 0; rowSpan:2">
    ...
  </nav>
  <section data-fill="row: 1; col: 1">
    ...
  </section>
  <section data-fill="row: 2; col: 1">
    ...
  </section>
  <aside data-fill="row: 1; col: 2; rowSpan:2">
    ...
  </aside>
  <footer data-fill="row: 3; col: 0; colSpan:3">
    ...
  </footer>
</div>

3. Make the grid layout a full page (100% height and 100% width).

.fill-container {
  width: 100%;
  height: 100%;
}

4. Configure the full page grid layout.

$(".fill-container").fill({

padding: "1em",

create: function(evt, ui){
  $(".fill", this).each(displayDimension);
  // The fill-container is hidden via CSS to prevent flashing on
  // slow loading browsers. Once the plugin has applied the layout, we
  // can show the container.
  // NOTE: You must use visibility:hidden to hide the container and not
  // display: none. Display:none will prevent the plugin from
  // calculating regions sizes properly
  $(this).css("visibility", "visible");
},

resize: function(evt, ui){
  // Display the region dimensions in the UI.
  // NOTE: The displayed regions will be the interior dimensions excluding any
  // padding applied to the layout
  displayDimension(0, evt.target);
}

destroy: function(evt, ui){
  // Removes Fill from the parent element and returns it to its original state
}

});

5. API Option.

// initializtion
$(".fill-container").fill();

// destroy
$(".fill-container").fill("destroy");

// refresh
$(".fill-container").fill("refresh");

Responsive Full Page Grid Layout Plugin/Github


See Demo And Download

Official Website(boundingdog): Click Here

This superior jQuery/javascript plugin is developed by boundingdog. For extra Advanced usage, please go to the official website.

Share