kirkas

$grid-width:              1280px;
$gutter-width:            12px;
$columns-number:          12;
$columns-number-string:   ("one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve");
$break-small:             760px;

@mixin respond-to($media) {
  @if $media == handhelds {
    @media only screen and (max-width: $break-small) { @content; }
  }

kirkas

@mixin arrow_helper($arrowSize, $arrowColor, $margin, $side, $align) {
  @if $side == "top" {
    border-bottom-color: $arrowColor;
    top: -2 * $arrowSize;
  }
  @if $side == "bottom" {
    border-top-color: $arrowColor;
    bottom: -2 * $arrowSize;
  }
  @if $side == "left" {

kirkas

<div class="circle_one">asdf</div>
<div class="circle_two">asdf</div>
<div class="circle_three">asdf</div>

kirkas

<div class="colour colour1"></div>
<div class="colour colour2"></div>
<div class="colour colour3"></div>
<div class="colour colour4"></div>
<br/>
<div class="colour colour5"></div>
<div class="colour colour6"></div>
<div class="colour colour7"></div>
<div class="colour colour8"></div>

kirkas

<div class="colour colour1"></div>
<div class="colour colour2"></div>
<div class="colour colour3"></div>
<div class="colour colour4"></div>
<br/>
<div class="colour colour5"></div>
<div class="colour colour6"></div>
<div class="colour colour7"></div>
<div class="colour colour8"></div>

kirkas

<input/>
<button class="btn--default btn--small">Button</button>
<button class="btn--default--outline btn--small">Button</button>
<br>
<button class="btn--default btn--regular">Button</button>
<button class="btn--default--outline btn--regular">Button</button>
<br>
<button class="btn--default btn--medium">Button</button>
<button class="btn--default--outline btn--medium">Button</button>
<br>

kirkas

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default--outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default--outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default--outline btn--medium">Button</button>

kirkas

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default--outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default--outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default--outline btn--medium">Button</button>

kirkas

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default--outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default--outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default--outline btn--medium">Button</button>

kirkas

<button class="btn btn--default btn--small">Button</button>
<button class="btn btn--default-outline btn--small">Button</button>
<br>

<button class="btn btn--default btn--regular">Button</button>
<button class="btn btn--default-outline btn--regular">Button</button>
<br>

<button class="btn btn--default btn--medium">Button</button>
<button class="btn btn--default-outline btn--medium">Button</button>