Add a versatile mixin for things like scaling, rotating, and translating.

Mixins for font stacks have no context and should be namespaced like so:

font {

.monospace() { ... }
.sans-serif() { ... }
.serif() { ... }
}

I think the import example should be: @import "preboot.less"; i.e. without the colon, at least with a colon throws up an error for me :)

The last bit with the retina fixes fails to compile at the @media mark with SimpLess, any ideas?

Double checked, doesn't compile with it removed either, just prints the title comments.

http://leafo.net/lessphp/docs/#differences

I'm not sure how this can be fixed...

http://css3pie.com/

I wonder why the grid don't have a container mixin, to create a wrapper for the grid's rows, at least something like:

     .grid-container() {
        padding: 0 @grid-column-padding; 
     }

Which corrects the negative margin of the rows.

Hi,

I wanted to know if there is any easy way to add the ability to Push/Pull columns similar to Bootstrap.

I added something like this, but it doesn't seem to work

.pull-column(@columns) {
    @media (min-width: @grid-float-breakpoint) {
        right: percentage(@columns / @grid-columns);
    }
}

.push-column(@columns) {
    @media (min-width: @grid-float-breakpoint) {
        left: percentage(@columns / @grid-columns);
    }
}

If I want to apply multiple transformation on a singler rule?
I think is missing a mixin like this:

.transform(@transformations) {
  -webkit-transform: @transformations;
     -moz-transform: @transformations;
      -ms-transform: @transformations;
       -o-transform: @transformations;
          transform: @transformations;
}

Hi,

I was having a problem with the background colours of the buttons (ie a.button.purple) being overriden by the default gradient colour. I found that removing lines 117 & 118 helped solve this for me:

#gradient > .vertical(
   );

Thanks for putting this together, I can see this fitting in brilliantly with HTML5 Boilerplate.

Cheers,
Ad

I should be able to write
.transition(padding 1s linear, opacity 0.5s linear);
to transition multiple, but not all, properties.

The table of content has the entry "Background sizing" but unfortunately the link leadd to nowhere and the mixin is absent of the page.

In font stack declarations there's a small, but meaningful mistake: In serif font stack after Georgia, Times New Roman and Times the last fallback font-family is "sans-serif" instead of "serif".

.serif(@weight: normal, @SiZe: 14px, @lineHeight: 20px) {
font-family: "Georgia", Times New Roman, Times, sans-serif;
font-size: @SiZe;
font-weight: @weight;
line-height: @lineHeight;
}

Hello,

I am working on a very simple page layout example with Preboot's grid and right away it's creating unnecessary margin on right hand side, which causes vertical scrollbar to appear. I don't understand why the right margin is set like that.

Here's the example with default Preboot stylesheet (I skipped outer tags from HTML, and I'm using doctype for html5):

HTML:
<div class="wrap">
  <div class="main">main content</div>
  <aside>sidebar</aside>
</div>

CSS:
.wrap {
  .make-row();
}
.main {
  background: blue;
  .make-column(9);
}
aside {
  background: orange;
  .make-column(3);
}

You added .content-columns but you forgot column-span:
.column-span(@value) {
-webkit-column-span: @value;
column-span: @value;
(-moz-column-span: @value; not available at the moment)
(-ms-column-span: @value; not available at the moment)
}

Currently the .translate3d mixin looks like this:
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}

It needs the missing -ms prefix to look like this:
.translate3d(@x, @y, @z) {
-webkit-transform: translate3d(@x, @y, @z);
-moz-transform: translate3d(@x, @y, @z);
-o-transform: translate3d(@x, @y, @z);
-ms-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}

You should add px2em mixin !

.px2em( @target, @context ) {
font-size: (@target / @context) + 0em;
}

Sorry! I found it.

When building a website based upon preboot, you sometimes want to add some mixins or what not from Bootstrap. But the variable names are not the same for preboot and bootstrap.

For example, Preboot uses @line-height-base when Bootstrap uses @baseLineHeight.
Question is, why?

You currently use 2 mixins for sizing: .size(@w, @h) and .square(@w). Maybe you could use a single one, making the whole thing easier to use.

I'm definitely not a LESS ninja, but here is what I came with. Probably could it be improved:

.size(@width, @height) {
  width: @width;
  height: @height; 
}

.size(@width, @height: 0) when (@height = 0) {
  width: @width;
  height: @width; 
}

.a {
  .size(10em);
} 

http://codepen.io/HugoGiraudel/pen/db3e3a09a9f0ad9e477da50f6d394f46

In the documentation (http://getpreboot.com/), you use .make-column-offset() then .make-offset() to refer to what seems to be the same mixin.

.make-column-offset(@columns) {
  @media (min-width: @grid-float-breakpoint) {
    margin-left: percentage(@columns / @grid-columns);
  }
}

.content-sidebar {
  .make-column(3);
  .make-offset(1);
}

Hi there fellow Hubber. If you're seeing this, that means that your site's custom domain is pointed to a deprecated IP. 👎

The good news is that it's an easy fix. Simply follow these instructions for updating your site's DNS records. 👍

❤️ and automation,
— The @github/pages team

//cc https://github.com/github/pages/issues/430

The .border-radius is redundant because all of that functionality is available through the .rounded mixin. The native border-radius CSS property supports this shorthand notation:

border-radius: topleft topright bottomright bottomleft;

You can just send the .rounded mixin one string with all these values.

.border-radius() was in v1 but seems to have been removed in favour of the more verbose single side mixins. Seems like an obvious use case—am I missing something or was this overlooked?

For example:

/* Mixin */
.position(@position, @top, @right, @bottom, @left) {
  position: @position;
  top: @top;
  right: @right;
  bottom: @bottom;
  left: @left;
}

/* Usage */
.element {
  .position(absolute, 0, 20px, auto, auto);
}

You have made a mistake here:

// Opacity
.opacity(@opacity: 100) {
filter: e(%("alpha(opacity=%d)", @opacity));
-khtml-opacity: @op / 100;
-moz-opacity: @op / 100;
opacity: @op / 100;
}

you have used @op instead of @opacity and this throws an error.

Cheers.