Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
| Line 21: | Line 21: | ||
=== Tips === | === 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 | 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; | |||
background-repeat: no-repeat; | |||
background-position: 120% center; | |||
padding-right: 300px; | |||
---- | ---- | ||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ||
Revision as of 15:51, 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;
background-repeat: no-repeat;
background-position: 120% center;
padding-right: 300px;