Popular syntax

Centering Text Vertically in DIV

HTML Markup

<div class="main">
<div class="right"> <img src="https://picsum.photos/75/150?random=1" alt=""></div>
<div class="left"> <p>some text</p></div>
</div>

CSS Markup

.main{
  display: flex;
  align-items: center;
}

Using Pre

@include pre(2)

This will move over 2 columns from the left -- >

Border Box code - add to every project

*, *:before, *:after{
 box-sizing: border-box;
}

using Pull

@include pull(1)

Will move over 1 column from the right <--

Using Break

@include break;

Lets say you have six divs and you want to break at div3 then you would include the break in the div3

Using Gutters

Gutters function provides margins

.class{
@include gutters(3em inside) // other options split, outside
}

This will provide extra margins on the class

Using span()

You can pass percent pixel or columns to spans

@include span(50%)
@include span(2 of 4)
@include span(200px)
@include span(50% .25 inside)//diferent gutter and padding directive

Other span directives

@include span(wide 4) // (wider)
height: span(12);// would take the value from span and use it for the height

Using Susy Gallery function

HTML Markup

 
<div class="myphotos">
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>
  <div> <img src="" alt=""> </div>

</div>

CSS Markup

$gallery_layout: layout(12 .125 fluid float after); // this has nothing to do with the gallery() function. this is just a custom layout thats also applied to the .myphotos
.myphotos{
	@include full;
	div{
		@include with-layout($gallery_layout){
			@include gallery(4);
			margin-bottom: gutter();

			}// layout
		
	} //div
}// myphotos

The with-layout and the margin bottom is not necessary. The with-layout allows you to use another layout with the gallery layout The margin-bottom: gutter() gets the preset gutter margins and applies them to the bottom, making all the margins even.

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>

using this particular layout for nav would remove the spacing between li items

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);
@include text-shadow(black 1px 1px);

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

---