Mixin Overview - adaptdk/adapt-mixins GitHub Wiki

Welcome to the Adapt Mixins wiki!

  • Coller - Comes in Float version collerFloat - Read more
  • Dyncol - Comes in Float version collerFloat - Read more
  • Media
  • Tablefix (Needs documentation)
  • Clearfix (Needs documentation)

Coller (Grid system)

Author: Mads Thines

How to use

Include on the parent of the elements where you want to create the grid system. (Everythings optional)

@include coller(4, 3, 2, 1, 2%, *, alignement, $large, $medium, $small);

or

@include coller(4, 3, 2, 1, 2%, *, $large, $medium, $small);

Dyncol (Dynamic Columns)

Author: Mads Thines

How to use

Include on the parent of the elements where you want to create the grid system. (Everythings optional)

@include dyncol;

or

@include dyncol(2%, *);
  • Margin 2% is the margin between the rows
  • Selector The selector's element (Only useful if there's other html tags in the same parent)

Media (Media Queries)

Author: Mads Thines

How to use

Include on the selector where you want the media querie to work.

/* $medium: 768px;   // Tablet Horizontal (iPad) */

/* Input */
body {
  @include media($medium up) {
    background: hotpink;
  }
}

/* Output */
@media screen and (min-width: 768px) {
  body {
    background: hotpink;
  }
}