Skip to content

Instantly share code, notes, and snippets.

@orlin
Created Feb 16, 2011
Embed
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)
body
@include grid(5)
@include mobile-safari
+whole
.torso
+lf3(5)
#app_contact
#contact
float: none
+lfc(5)
#explain
float: none
+lfc(4)
+headflash_width(5)
/* Default 8-column layout
* For tablets at 768 px, netbooks, and old browsers. */
body
@include grid(8)
+whole
.torso
+lf3(8)
#app_contact
#contact
+lfc(5, 2, false)
#explain
+lfc(3, 2)
+headflash_width(5)
@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%
=whole
padding:
top: 0px
left: 0px
right: 0px
width: 100%
// the overall width and margins (depending on each partial's # of $columns)
=lf3($columns)
$width: $columns * $less-column-width + ($columns - 1) * $less-gutter-width
width: $width
margin:
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)...
=headflash_width($columns)
#headflash
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