Popular syntax

Using Alternate Layout

$nav_layout: layout(12 0 fluid float inside); // 12 columns 0 gutter fluid layout margins on the inside
nav{
@include full;
.nav-item{
@include span(3 of $nav-layout);
}
}

HTML markup

<ul>
<li class="nav-item"> home </li>
<li class="nav-item"> home </li>
<li class="nav-item"> home </li>
</ul>

Use full to span and clear floats

Use this on the on the containing div and then set spans for internal divs this is like spanning the entire gird, but using the 'full' will apply clearfix and other settings that will prevent weird floating issues.

@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;
}

---