Release of v1.3.0 changelog and readme update

Author: Joao Augusto

changelog.md

@@ -1,5 +1,22 @@
 #Changelog
 
+##1.3.0 (2014-03-11)
+
+- Removing delay from `transition` mixin
+- Updating transition to transform in transform mixin
+- Additon of `gradient-radial()` mixin
+- Updating default breakpoints to be animals
+- Converting modular classes to silent placeholders
+- Normalize updated to v3
+- Standard gradient mixin update
+- Abstracting vendors & prefixes out to base vars
+- Addition of `color-alpha()` mixin
+- `css-triangle()` renamed to `triangle()`
+- Addtion of new `_shapes.scss` whcih contains `square()`, `circle()` and `triangle()` mixins
+- Addition of `truncate-text()` mixin
+- `sache.json` added to enable Luigi to be listed on [Sache.in](http://www.sache.in/)
+- Addition of `-webkit-backface-visibility: hidden;` to transition mixin to combat opacity issues
+
 ##1.2.1 (2014-01-28)
 
 - Wrong variable name referenced in _image.scss

readme.md

@@ -1,8 +1,3 @@
-> TODO:
->
-> - Add info for the new gradient-radial mixin (usage: @include gradient-radial(farthest-corner, circle, center center, rgba(255,0,0,0.5), #333, orange))
-> - Add info for circle and square mixin
-
 #Luigi
 
 *Jump to the [index](#index) to everything that is included.*
@@ -147,6 +142,7 @@ This file contains many mixins that require vendor prefixes to achieve what have
 - [box-sizing](#box-sizing)
 - [color-alpha](#color-alpha)
 - [gradient](#gradient)
+- [gradient-radial](#gradient-radial)
 - [opacity](#opacity)
 - [transition && transition-property](#transition--transition-property)
 - [transform && transform-property](#transform--transform-property)
@@ -284,7 +280,7 @@ Output:
 
 ####gradient
 
-Allows creation of background gradients without endless amounts of vendor prefixing. Can cater for horizontal, vertical or diagonal gradients. Radial gradients will need to be [manually generated](http://www.colorzilla.com/gradient-editor/)
+Allows creation of background gradients without endless amounts of vendor prefixing. Can cater for horizontal, vertical or diagonal gradients. See also [radial gradients](#gradient-radial) mixin.
 
 Mixin:
 
@@ -306,6 +302,41 @@ Usage:
 
 *Omitting output due to large amounts of code.- see the [mixin](mixins/_css3.scss) for more detail*
 
+####gradient-radial
+
+This mixin is for creating a radial gradient.
+
+Mixin:
+	
+	gradient-radial($size, $shape, $position, $fallback, $colors...)
+
+**$size**: Size describing how big the ending shape must be. The possible options are: **closest-side**, **closest-corner**, **farthest-side**, **farthest-corner**
+
+**$shape**: The gradient's shape. Can be **circle** or **ellipse**
+
+**$position**: The position of the gradient in the element
+
+**$fallback**: Fallback background color for old browsers
+
+**$colors**: The sequence of colors
+
+Usage:
+
+	.class {
+		@include gradient-radial(farthest-corner, circle, center center, #f00, rgba(255,0,0,0.5), #333, orange)
+	}
+
+Output:
+
+	.class {
+		background: #f00;
+		background: -webkit--radial-gradient(center center, farthest-corner circle, rgba(255, 0, 0, 0.5), #333333, orange);
+		background: -moz--radial-gradient(center center, farthest-corner circle, rgba(255, 0, 0, 0.5), #333333, orange);
+		background: -o--radial-gradient(center center, farthest-corner circle, rgba(255, 0, 0, 0.5), #333333, orange);
+		background: -ms--radial-gradient(center center, farthest-corner circle, rgba(255, 0, 0, 0.5), #333333, orange);
+		background: radial-gradient(farthest-corner circle at center center, rgba(255, 0, 0, 0.5), #333333, orange);
+	}
+
 ####opacity
 
 Handles all vendors for using opacity.
@@ -403,7 +434,7 @@ Usage:
 Output:
 
 	.class {
-	  	-webkit-transform: skew(35deg);
+		-webkit-transform: skew(35deg);
 		-moz-transform: skew(35deg);
 		-ms-transform: skew(35deg);
 		-o-transform: skew(35deg);
@@ -772,15 +803,69 @@ Output:
 
 Defines mixins for making shapes with less code.
 
-- [css-triangle](#css-triangle)
+- [circle](#circle)
+- [square](#square)
+- [triangle](#triangle)
+
+####circle
+
+The easiest and quickiest way to do circle. This mixin can be used on slider pagination.
+
+Mixin:
+	
+	circle($size)
+
+**$size**: The diameter of the circle
+
+Usage:
+
+	.class {
+		@include circle(10px);
+	}
+
+Output:
+
+	.class {
+		-webkit-border-radius: 10px;
+		border-radius: 10px;
+		-moz-background-clip: padding;
+		-webkit-background-clip: padding-box;
+		background-clip: padding-box;
+		width: 10px;
+		height: 10px;
+	}
+
+
+####square
+
+This creates a regular quadrilateral (four equal sides and four equal angles - 90°).
+
+Mixin:
+	
+	square($size)
+
+**$size**: The size of the square
+
+Usage:
+
+	.class {
+		@include square(10px);
+	}
+
+Output:
+
+	.class {
+		width: 10px;
+		height: 10px;
+	}
 
-####css-triangle
+####triangle
 
 This makes the element a css triangle - for use as a pointer with the `:after` or `:before` pseudo element
 
 Mixin:
 
-	css-triangle($direction: down, $size: 20px, $color: #000)
+	triangle($direction: down, $size: 20px, $color: #000)
 
 **$direction**: what direction the arrow points (up/down/left/right)
 
@@ -791,7 +876,7 @@ Mixin:
 Usage:
 
 	.class:after {
-		@include css-triangle(up, 10px, #fff);
+		@include triangle(up, 10px, #fff);
 		content: '';
 	}
 
@@ -1055,6 +1140,7 @@ If the margin on the body needs to be more or less than the height of the footer
 		- [box-sizing](#box-sizing)
 		- [color-alpha](#color-alpha)
 		- [gradient](#gradient)
+		- [gradient-radial](#gradient-radial)
 		- [opacity](#opacity)
 		- [transition && transition-property](#transition--transition-property)
 		- [transform && transform-property](#transform--transform-property)
@@ -1077,7 +1163,9 @@ If the margin on the body needs to be more or less than the height of the footer
 		- [bp](#bp)
 		- [img-responsive](#img-responsive)
 	- [Shapes](#shapes)
-		- [css-triangle](#css-triangle)
+		- [circle](#circle)
+		- [square](#square)
+		- [triangle](#triangle)
 	- [Typography](#typography)
 		- [font](#font)
 		- [font-face](#font-face)