Juice Mixins - Revision history

Bacchas at 17:29, 3 March 2017

2017-03-03T17:29:50Z

← Older revision		Revision as of 17:29, 3 March 2017
Line 20:		Line 20:
	</pre>		</pre>

	=== Using Juice Breakpoints===		== Using Juice Breakpoints==
	.classname{		.classname{
	@include bp(medium){ preset medium value}		@include bp(medium){ preset medium value}
	@include bp(480px, 1024px){ between these two values}		@include bp(480px, 1024px){ between these two values}

	=== Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc.. ===		== Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc.. ==
	<pre>		<pre>
	a{		a{
Line 33:		Line 33:
	}		}
	</pre>		</pre>
	=== Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints===		== Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints==

	<pre>		<pre>

2017-03-03T17:29:12Z

← Older revision		Revision as of 17:29, 3 March 2017
Line 20:		Line 20:
	</pre>		</pre>

	~~'''~~ Using Juice Breakpoints~~'''~~		=== Using Juice Breakpoints===
	.classname{		.classname{
	@include bp(medium){ preset medium value}		@include bp(medium){ preset medium value}
	@include bp(480px, 1024px){ between these two values}		@include bp(480px, 1024px){ between these two values}

	~~'''~~ Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc.. ~~'''~~		=== Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc.. ===
	<pre>		<pre>
	a{		a{
Line 33:		Line 33:
	}		}
	</pre>		</pre>
	~~'''~~ Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints~~'''~~		=== Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints===

	<pre>		<pre>

2017-03-03T17:28:24Z

← Older revision		Revision as of 17:28, 3 March 2017
Line 28:		Line 28:
	<pre>		<pre>
	a{		a{
	text-decoration: none;		text-decoration: none;
	@include hoverer(color, #blue, red);		@include hoverer(color, #blue, red);
	@include hoverer(text-decoration, none, underline);		@include hoverer(text-decoration, none, underline);
			}
			</pre>
			''' Responsive Mixin - Allows you to type in responsive code without setting breakpoints. It uses the breakpoints of small, medium and large. So below: background color will change at those 3 breakpoints. This is good if you want to change a single property at breakpoints'''

			<pre>
			body {
			@include responsive(background-color, #fff, #ddd, #bbb);
			{
	</pre>		</pre>

	----		----

	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2017-03-03T17:15:36Z

← Older revision		Revision as of 17:15, 3 March 2017
Line 24:		Line 24:
	@include bp(medium){ preset medium value}		@include bp(medium){ preset medium value}
	@include bp(480px, 1024px){ between these two values}		@include bp(480px, 1024px){ between these two values}

			''' Hoverer mixin, This does the link color and the hover color in one mixin. display color is blue and hover color is red. You can also pass other properties, like text-decoration etc.. '''
			<pre>
			a{
			text-decoration: none;
			@include hoverer(color, #blue, red);
			@include hoverer(text-decoration, none, underline);

			</pre>

	----		----

	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2017-03-03T16:56:08Z

Using the File

← Older revision		Revision as of 16:56, 3 March 2017
Line 25:		Line 25:
	@include bp(480px, 1024px){ between these two values}		@include bp(480px, 1024px){ between these two values}

	}		----

	~~----~~
	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2017-03-03T16:55:49Z

← Older revision		Revision as of 16:55, 3 March 2017
Line 20:		Line 20:
	</pre>		</pre>

	''' Using Juice '''		''' Using Juice Breakpoints'''
	.~~classename~~{		.classname{
	@include bp(medium){		@include bp(medium){ preset medium value}
	@include ~~span~~(~~4 of 12~~);		@include bp(480px, 1024px){ between these two values}
	}
	}		}

	----		----
	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2017-03-03T16:53:03Z

← Older revision		Revision as of 16:53, 3 March 2017
Line 20:		Line 20:
	</pre>		</pre>

			''' Using Juice '''
			.classename{
			@include bp(medium){
			@include span(4 of 12);
			}
			}

	----		----
	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2016-08-12T13:09:05Z

@@ Line 3: / Line 3: @@
 Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. You can enable prefixing for the mixin if you would like by setting the $browser-prefixes variable to true
 ----
 ==[[#Juice Mixins|Back To Top]]-[[Main_Page| Home]] - [[Css|Category]]==

2016-08-12T13:05:24Z

← Older revision		Revision as of 13:05, 12 August 2016
Line 2:		Line 2:
	http://kylebrumm.com/juice/		http://kylebrumm.com/juice/

	~~It has~~ mixins ~~for easy breakpoints~~, ~~transitions~~, ~~clearfix, etc.~~.		Juice is a collection of Sass mixins/functions that are used to minimize the work needed to apply styling/properties to elements. Juice is not just a collection to help with cross browser support, so it is best paired with autoprefixer, for the best possible browser compatibility. You can enable prefixing for the mixin if you would like by setting the $browser-prefixes variable to true

	----		----
	==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==		==[[#Juice Mixins\|Back To Top]]-[[Main_Page\| Home]] - [[Css\|Category]]==

2016-08-12T13:03:15Z