Difference between revisions of "Popular syntax"

From rbachwiki
Jump to navigation Jump to search
Line 1: Line 1:
== Use full to span and clear floats==
==Using Alternate Layout==
 
 
==Use full to span and clear floats==
Use this on the on the containing div and then set spans for internal divs
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.
this is like spanning the entire gird, but using the 'full' will apply clearfix and other settings that will prevent weird floating issues.

Revision as of 17:08, 2 October 2016

Using Alternate Layout

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



Back To Top- Home - Category