Molten
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?
Table of Contents
- Play with an Example
- Install
- Basic Fixed-Fluid Grid
- Nesting for Complex Layouts
- Grid Types
- Grid Sizes
- Browser Support
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/less
@import 'path/to/molten.scss'; - scss/sass
@import 'path/to/molten.less'; - less
Basic Grid
Creating a basic 2 column, left sidebar grid.
<!-- left sidebar (250px) --> <!-- the content (fluid) -->
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.
<!-- left sidebar (250px) --> <!-- Girdception!! --> <!-- topbar (50px) --> <!-- content (fluid) -->
Grid Types
Left
Sidebar on the left side
<!-- left sidebar (250px) --> <!-- the content (fluid) -->
Right
Sidebar on the right side
<!-- only need to add the "right" class name --> <!-- right sidebar (250px) --> <!-- the content (fluid) -->
Top
Header bar along the top
<!-- use "rows" instead of "columns" for a top bar --> <!-- top bar (50px) --> <!-- the content (fluid) -->
Bottom
Footer bar long the bottom
<!-- only need to add the "bottom" class name --> <!-- bottom bar (50px) --> <!-- the content (fluid) -->
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 9+
Mobile
- Mobile Safari 6+
- Chrome for Mobile (iOS 6+, Android ... eh, it works)