A fixed-fluid, full-width web application css grid.
Ever wonder where all the css grids are that allow you to create full width and full height web layouts?
- Play with an Example
- Install
- Basic Fixed-Fluid Grid
- Nesting for Complex Layouts
- Grid Types
- Grid Sizes
- Browser Support
Play with the code on Codepen:
http://codepen.io/scottcorgan/pen/jkHov
Install with Bower
bower install molten --save
HTML
<link rel="stylesheet" href="path/to/components/molten/molten.css">
or Import - sass/scss/less
@import 'path/to/molten.scss'; - scss/sass
@import 'path/to/molten.less'; - less
Creating a basic 2 column, left sidebar grid.
<div class="grid columns split250">
<aside class="bar">
<!-- left sidebar (250px) -->
</aside>
<section class="content">
<!-- the content (fluid) -->
</section>
</div>
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.
<div class="grid columns split250">
<nav class="bar">
<!-- left sidebar (250px) -->
</nav>
<div class="content">
<!-- Girdception!! -->
<section class="grid rows split50">
<aside class="bar">
<!-- topbar (50px) -->
</aside>
<article class="content">
<!-- content (fluid) -->
</article>
</section>
</div>
</div>
Sidebar on the left side
<div class="grid columns split250">
<div class="bar">
<!-- left sidebar (250px) -->
</div>
<div class="content">
<!-- the content (fluid) -->
</div>
</div>
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>
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>
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>
- 50px -
.split50
- 100px -
.split100
- 150px -
.split150
- 200px -
.split200
- 225px -
.split225
- 250px -
.split250
- 275px -
.split275
- 300px -
.split300
- 325px -
.split325
- 350px -
.split350
- 375px -
.split375
- 400px -
.split400
- 10px -
.split10
- 20px -
.split20
- 30px -
.split30
- 40px -
.split40
- 50px -
.split50
- 60px -
.split60
- 70px -
.split70
- 80px -
.split80
- 90px -
.split90
- 100px -
.split100
- 200px -
.split200
- 300px -
.split300
Desktop:
- Chrome 24+
- Firefox 19+
- Safari 6+
- IE 9+
Mobile
- Mobile Safari 6+
- Chrome for Mobile (iOS 6+, Android ... eh, it works)