Difference between revisions of "Popular syntax"

From rbachwiki
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

Back To Top- Home - Category