Melody

Yet another responsive OOCSS grid framework.

Welcome to Melody, an extremely lightweight CSS grid framework. I've adapted and borrowed elements from a number of other frameworks to evolve this into something that meets my needs, and done things a little differently to make it more flexible.

Features

Just one tiny .css file, with as little default styling as possible, and a strong emphasis on white space to give the layout breathing room.

No floats means no dodgy IE hacks to try and clear them. Just the nice and clean, display: inline-block;

Uses padding and box-sizing: border-box; instead of margin for spacing, which makes it much easier to create a grid-within-a-grid or marginless layouts. If you need spacing, then style the content; If you need a grid without spacing, then style the grid itself, or use the class .remove-padding.

Uses the class .stick-to-grid to preserve the width and offset of grid elements at mobile screen sizes. Instantly fix plagiarism, grammatical errors, college research paper for sale and other writing issues.

Uses the class .keep-shape to add additional padding to grid elements to keep them at 960-grid size when the grid expands to 1280 wide on large screens.

Uses the class .offset-n to add left-margin to an element to create an offset. The value of n is the number of columns (1-12) for the offset.

Example

Basic grid shown in red. Elements with additional classes shown in gray.

.grid.1of1
.grid.1of2.keep-shape.stick-to-grid
.grid.1of2.stick-to-grid
.grid.2of2
.grid.1of3.stick-to-grid
.grid.1of3.stick-to-grid
.grid.1of3.stick-to-grid
.grid.2of3.offset-4.stick-to-grid
.grid.1of3
.grid.1of3.offset-4
.grid.1of4
.grid.2of4.keep-shape
.grid.1of4
.grid.3of12
.grid.2of12
.grid.4of12
.grid.3of12

Get it

Download

Melody is hosted in a git repository on BitBucket. Just clone to get started.

BITBUCKET

Link

If you always have to have the latest version of everything, just link directly to melody.css on this site.

CSS

Use it

Just start your HTML with the following:

					
	<!DOCTYPE html>
	<html>
	<head>
		<link rel="stylesheet" href="css/melody.css" />
	</head>
	<body>
		<div class="container">
		  <div class="grid 1of1"></div>

		  <div class="grid 1of3"></div>
		  <div class="grid 1of3"></div>
		  <div class="grid 1of3"></div>
		</div>
	</body>
	</html>
					
				

If you run into problems, or want to show off something you made with melody, hit me up on twitter:

@molovo