Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
| Line 10: | Line 10: | ||
== Juice Center an element vertically and horizontally == | == Juice Center an element vertically and horizontally == | ||
When you use this the container has to have a position set. absolute, relative etc.. | |||
.element { | .element { | ||
@include centerer; | @include centerer; | ||
} | } | ||
== Text Shadow == | == Text Shadow == | ||
@include text-shadow(black 0 0 20px); | @include text-shadow(black 0 0 20px); | ||
Revision as of 13:18, 21 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
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