Skip to content

Instantly share code, notes, and snippets.

@camilokawerin
Created March 20, 2014 12:42
Show Gist options
  • Save camilokawerin/9662955 to your computer and use it in GitHub Desktop.
Save camilokawerin/9662955 to your computer and use it in GitHub Desktop.
Fluid faux columns mixin for Less
// Based on Bootstrap gradient mixin
// http://getbootstrap.com/css/#less
// Faux columns technique by Dan Cederholm
// http://alistapart.com/article/fauxcolumns
// Fluid Width Equal Height Columns by Chris Coyier
// http://css-tricks.com/fluid-width-equal-height-columns/
.two-faux-colums(@col-one-color: #efefef; @col-one-width: 25%; @col-two-color: #fff; @border-color: #ebebeb; @border-width: 1px) {
background-image: -webkit-linear-gradient(right, @border-color, @border-color),
-webkit-linear-gradient(right, @col-one-color, @col-one-color @col-one-width, @col-two-color @col-one-width, @col-two-color);
background-image: linear-gradient(to right, @border-color, @border-color),
linear-gradient(to right, @col-one-color, @col-one-color @col-one-width, @col-two-color @col-one-width, @col-two-color);
background-size: @border-width 100%, auto;
background-position: @col-one-width 0, -@border-width 0;
background-repeat: no-repeat;
background-origin: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment