Skip to content

Instantly share code, notes, and snippets.

@shamrt
Created January 21, 2010 16:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shamrt/282908 to your computer and use it in GitHub Desktop.
Save shamrt/282908 to your computer and use it in GitHub Desktop.
// @author: Shane Martin
// @creation: 2010-01-21
//
// @description:
// Simple column by percentage; useful for result sets and forms. For the
// `percent-column` mixin the `!margin` variable is optional.
//
// @requires: chriseppstein/compass or the mixins used below from the Compass project
// @example:
// Styling a set of twitter results into two columns.
//
// #tweets_by_tag
// +percent-columns
//
// .tweet
// +percent-column("half")
//
// @notes:
// It is often useful to add a class that left-clears its previous siblings.
// In this case the third, fifth, and seventh elements would have a class to
// clear them, which could be the `even` or `odd` class.
=percent-columns
+clearfix
:clear both
:width 100%
=percent-column(!width = "full", !margin = 1%)
+float-left
margin-right = 0% + !margin
@if "half" == !width
width = 100% / 2 - !margin
@else if "third" == !width
width = 100% / 3 - !margin
@else if "two-third" == !width
width = 100% / 3 * 2 - !margin
@else if "fourth" == !width
width = 100% / 4 - !margin
@else if "fifth" == !width
width = 100% / 5 - !margin
@else if "three-fourth" == !width
width = 100% / 4 * 3 - !margin
@else if "full" == !width
width = 100% - !margin
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment