Difference between revisions of "Popular syntax"
Jump to navigation
Jump to search
| Line 24: | Line 24: | ||
== Include a background image in the right corner == | == Include a background image in the right corner == | ||
@include background-image(url('../images/misc/greenplanet.png')); | @include background-image(url('../images/misc/greenplanet.png')); | ||
background-size: 400px; | background-size: 400px; // makes the image 400 px wide | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: 120% center; | background-position: 120% center; // sets the background position of an image default is top-left | ||
padding-right: 300px; | padding-right: 300px; | ||
---- | ---- | ||
==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ==[[#top|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]== | ||
Revision as of 16:20, 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;