Molten

A fixed-fluid, full-width web application css grid. This fork adds support for IE8+.

Ever wonder where all the css grids are that allow you to create full width and full height web layouts?

Table of Contents

• Fork specific changelog
• Play with an Example
• Install
• Basic Fixed-Fluid Grid
• Nesting for Complex Layouts
• Grid Types
• Grid Sizes
• Browser Support

Fork modifications

To support IE8 the following modifications were done

• Remove support for less
• Remove calc() for rows calculation. Use absolute positioning instead.
• For scrolling behaviour, added scroll-x and scroll-y which requires a wrapping div. See tests/index.html.
• Using grunt-contrib-sass

Play with an Example

Play with the code on Codepen:

http://codepen.io/scottcorgan/pen/jkHov

Install

Install with Bower

bower install molten --save

Usage

HTML

<link rel="stylesheet" href="path/to/components/molten/molten.css">

or Import - sass/scss

@import 'path/to/molten.scss'; - scss/sass

Basic Grid

Creating a basic 2 column, left sidebar grid.

<div class="grid columns split250">
  <div class="bar">
    <!-- left sidebar (250px) -->
  </div>
  <div class="content">
    <!-- the content (fluid) -->
  </div>
</div>

Nesting for complex layouts

Molten gives you classes to create grids based on columns and rows. You can nest rows and columns within rows and columns to help you build complex layouts. There is no limit to how many grids you can nest. To get scrollbars on overflow you need to wrap the content in a div with class scroll-y or scroll-x.

<div class="grid columns split250">
  <nav class="bar">
    <!-- left sidebar (250px) -->
  </nav>
  <div class="content">
  
    <!-- Girdception!! -->
    <div class="grid rows split50">
      <div class="bar">
        <!-- topbar (50px) -->
      </div>
      <div class="content">
        <div class="scroll-y">
          <!-- content (fluid) -->
        </div>
      </div>
    </div>
    
  </div>
</div>

Grid Types

Left

Sidebar on the left side

<div class="grid columns split250">
  <div class="bar">
    <!-- left sidebar (250px) -->
  </div>
  <div class="content">
    <div class="scroll-x">
      <!-- the content (fluid) -->
    </div>
  </div>
</div>

Right

Sidebar on the right side

<div class="grid columns split250 right"> <!-- only need to add the "right" class name -->
  <div class="bar">
    <!-- right sidebar (250px) -->
  </div>
  <div class="content">
    <!-- the content (fluid) -->
  </div>
</div>

Top

Header bar along the top

<div class="grid rows split50"> <!-- use "rows" instead of "columns" for a top bar -->
  <div class="bar">
    <!-- top bar (50px) -->
  </div>
  <div class="content">
    <!-- the content (fluid) -->
  </div>
</div>

Bottom

Footer bar long the bottom

<div class="grid rows split50 bottom"> <!-- only need to add the "bottom" class name -->
  <div class="bar">
    <!-- bottom bar (50px) -->
  </div>
  <div class="content">
    <!-- the content (fluid) -->
  </div>
</div>

Grid Sizes

Fixed Column Widths

• 50px - .split50
• 100px - .split100
• 150px - .split150
• 200px - .split200
• 225px - .split225
• 250px - .split250
• 275px - .split275
• 300px - .split300
• 325px - .split325
• 350px - .split350
• 375px - .split375
• 400px - .split400

Fixed Row Heights

• 10px - .split10
• 20px - .split20
• 30px - .split30
• 40px - .split40
• 50px - .split50
• 60px - .split60
• 70px - .split70
• 80px - .split80
• 90px - .split90
• 100px - .split100
• 200px - .split200
• 300px - .split300

Browser Support

Desktop:

• Chrome 24+
• Firefox 19+
• Safari 6+
• IE 8+

Mobile

• Mobile Safari 6+
• Chrome for Mobile (iOS 6+, Android ... eh, it works)