Popular syntax

Use full to span and clear floats

you can use this on the on the containing div and then set spans for internal divs

@include full;

example: HTML markup

<header>
<div class="logo"> </div>
<div class="text"> </div>
 </header>

CSS markup

header{
 @include full;
.logo{
 @include span(3);
}
.text{
 @include span(last 7);
}

}

Border Radius

@include border-radius(12px);

Clearfix

@include clearfix

Breakpoint using juice

@include bp(medium) affects medium and down
@include bp(large-up) // affects large and up

open the juice file, they have a bunch of presets

Juice Center an element vertically and horizontally

When you use this the container has to have a position set. absolute, relative etc..

.element {
 @include centerer;
}

Text Shadow

@include text-shadow(black 0 0 20px);

Background Linear Gradient

@include background-image(linear-gradient($navcolor1, $navcolor2));

Tips

when you use @include span(4 of 12) and you have three columns only 2 will display inline. So the fix is to @include span(4 of 14) This should fix the problem

Include a background image in the right corner

@include background-image(url('../images/misc/greenplanet.png'));
     background-size: 400px; // makes the image 400 px wide
     background-repeat: no-repeat;
     background-position: 120% center; // sets the background position of an image default is top-left
     padding-right: 300px; // keeps the text away from the background image

Using Fonts

@import url('https://fonts.googleapis.com/css?family=David+Libre');
$para2: 'David Libre', serif;
body{
	font-family:$para2;
}

---