Skip to content

Instantly share code, notes, and snippets.

Created Feb 16, 2011
What would you like to do?
less framework 3 + compass-less-plugin (a few of the partials) + my mixins & usage
/* 5-column layout
* For 480 px mobiles, narrow browsers, and landscape iPhones. */
@media only screen and (max-width: 767px) and (min-width: 480px)
@include grid(5)
@include mobile-safari
float: none
float: none
/* Default 8-column layout
* For tablets at 768 px, netbooks, and old browsers. */
@include grid(8)
+lfc(5, 2, false)
+lfc(3, 2)
@import vars
$less-column-width: 60px
$less-gutter-width: 24px
$less-bumper-width: $bumper-width
@import lessframework/grid
@import styles_spread
// resets less-framework-3's padding / all is 100%
top: 0px
left: 0px
right: 0px
width: 100%
// the overall width and margins (depending on each partial's # of $columns)
$width: $columns * $less-column-width + ($columns - 1) * $less-gutter-width
width: $width
left: $less-bumper-width
right: auto
// similar to =column (compass-less-plugin's @mixin)
=lfc($columns, $pieces: 1, $last: true)
$width: $columns * $less-column-width + ($columns - 1) * $less-gutter-width
$right_space: $less-bumper-width / $pieces // shared compensation
width: $width - $right_space
@if $last != true
margin-right: $less-gutter-width
// this width is confusing (yet it's fine for sizing my headflash balloons)...
width: $columns * $less-column-width + ($columns - 2) * $less-gutter-width
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment