Difference between revisions of "Popular syntax"

From rbachwiki
Jump to navigation Jump to search
Line 27: Line 27:
       background-repeat: no-repeat;
       background-repeat: no-repeat;
       background-position: 120% center; // sets the background position of an image default is top-left
       background-position: 120% center; // sets the background position of an image default is top-left
       padding-right: 300px;
       padding-right: 300px; // keeps the text away from the background image
----
----


==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

Revision as of 16:22, 20 September 2016

Border Radius

@include border-radius(12px);

Clearfix

@include clearfix

Breakpoint using juice

@include bp(small)

open the juice file, they have a bunch of presets

Juice Center an element vertically and horizontally

.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

Back To Top- Home - Category