add extra Uikit grid sizes

uikit-extra-grid-sizes-mixin

/*
* add extra Uikit grid sizes
*
* usage:
* set custom breakpoint (1480px) and name ("xlarge-x")
* @media (min-width: 1480px) {
*  .add-grid-sizes(xlarge-x);
* }
*/

.add-grid-sizes(@size) {

  /* Whole */
  .uk-width-@{size}-1-1,
  .uk-grid-width-@{size}-1-1 > * {
    width: 100%;
  }

  /* Halves */
  .uk-width-@{size}-1-2,
  .uk-width-@{size}-2-4,
  .uk-width-@{size}-3-6,
  .uk-width-@{size}-5-10,
  .uk-grid-width-@{size}-1-2 > *,
  .uk-grid-width-@{size}-2-4 > *,
  .uk-grid-width-@{size}-3-6 > *,
  .uk-grid-width-@{size}-5-10 > * {
    width: 50%;
  }

  /* Thirds */
  .uk-width-@{size}-1-3,
  .uk-width-@{size}-2-6,
  .uk-grid-width-@{size}-1-3 > *,
  .uk-grid-width-@{size}-2-6 > * {
    width: 33.333%;
  }

  .uk-width-@{size}-2-3,
  .uk-width-@{size}-4-6,
  .uk-grid-width-@{size}-2-3 > *,
  .uk-grid-width-@{size}-4-6 > * {
    width: 66.666%;
  }

  /* Quarters */
  .uk-width-@{size}-1-4,
  .uk-grid-width-@{size}-1-4 > * {
    width: 25%;
  }

  .uk-width-@{size}-3-4,
  .uk-grid-width-@{size}-3-4 > * {
    width: 75%;
  }

  /* Fifths */
  .uk-width-@{size}-1-5,
  .uk-width-@{size}-2-10,
  .uk-grid-width-@{size}-1-5 > *,
  .uk-grid-width-@{size}-2-10 > * {
    width: 20%;
  }

  .uk-width-@{size}-2-5,
  .uk-width-@{size}-4-10,
  .uk-grid-width-@{size}-2-5 > *,
  .uk-grid-width-@{size}-4-10 > * {
    width: 40%;
  }

  .uk-width-@{size}-3-5,
  .uk-width-@{size}-6-10,
  .uk-grid-width-@{size}-3-5 > *,
  .uk-grid-width-@{size}-6-10 > * {
    width: 60%;
  }

  .uk-width-@{size}-4-5,
  .uk-width-@{size}-8-10,
  .uk-grid-width-@{size}-4-5 > *,
  .uk-grid-width-@{size}-8-10 > * {
    width: 80%;
  }

  /* Sixths */
  .uk-width-@{size}-1-6,
  .uk-grid-width-@{size}-1-6 > * {
    width: 16.666%;
  }

  .uk-width-@{size}-5-6,
  .uk-grid-width-@{size}-5-6 > * {
    width: 83.333%;
  }

  /* Tenths */
  .uk-width-@{size}-1-10,
  .uk-grid-width-@{size}-1-10 > * {
    width: 10%;
  }

  .uk-width-@{size}-3-10,
  .uk-grid-width-@{size}-3-10 > * {
    width: 30%;
  }

  .uk-width-@{size}-7-10,
  .uk-grid-width-@{size}-7-10 > * {
    width: 70%;
  }

  .uk-width-@{size}-9-10,
  .uk-grid-width-@{size}-9-10 > * {
    width: 90%;
  }
}