Add initial features

jednano · Aug 5, 2015 · e783106 · e783106
1 parent 6f17ec5
commit e783106
Show file tree

Hide file tree

Showing 8 changed files with 738 additions and 70 deletions.
diff --git a/README.md b/README.md
@@ -21,108 +21,199 @@ Using this plugin, you can create three different types of triangles:
 
 ```css
 .isosceles-triangle {
-	triangle: <width> <height> <direction>;
+	triangle: pointing-<up|down|left|right>;
+	width: <length>;
+	height: <length>;
+	background-color: <color>;
 }
+
 .right-isosceles-triangle {
-	triangle: right-iso <hypotenuse-length> <direction>;
+	triangle: right-iso pointing-<up|down|left|right>;
+	<width|height>: <length>;
+	background-color: <color>;
 }
+
 .equilateral-triangle {
-	triangle: equilateral <side-length> <direction>;
+	triangle: equilateral pointing-<up|down|left|right>;
+	<width|height>: <length>;
+	background-color: <color>;
 }
 ```
 
 ### Triangle types
 
+All triangle types have the following rules/caveats:
+- You must specify a direction (`pointing-up`, `pointing-down`, `pointing-left` or `pointing-right`).
+- You must provide a separate `background-color` declaration. This will transpile into a `border-color` in the opposite direction in which your triangle points. The `background-color` helps you forget about all that nonsense and just specify what _appears_ to be the background color, visually.
+- Unfortunately, there is no way to set a triangle's actual `border` at this time. I considered using the `::before` pseudo-class to achieve this; however, it had a defect that was cutting it in half and I gave up. Feel free to submit a pull request with this feature if you have a solution for it.
+
+Now, on to the triangle types!
+
 #### Isosceles
 
-This is the default and the most standard triangle you will create. It has two angles the same and two sides the same. The triangle will fit snug inside the `width` and `height` that you define. Here's how you create one:
+<figure style="float:right;margin-left:50px;">
+	<img
+		src="https://github.com/jedmao/postcss-triangle/blob/master/images/isosceles-triangle.png?raw=true"
+		alt="Isosceles Triangle (Default)"
+		width="184"
+		height="146"
+	>
+	<figcaption>Isosceles Triangle (default)</figcaption>
+</figure>
+
+This is the default and the most standard triangle you will create. It has two angles the same and two sides the same. The triangle will fit snug inside the `width` and `height` box that you define. Here's how you create one:
 
 ```css
-.foo {
-	triangle: 150px 115px right;
+.isosceles-triangle {
+	triangle: pointing-right;
+	width: 150px;
+	height: 115px;
 	background-color: red;
 }
 ```
 
 This transpiles into:
 
-```css
-.foo {
+<div class="isosceles-triangle"></div>
+<style>
+.isosceles-triangle {
+	float: right;
 	width: 0;
 	height: 0;
-	border-left:
+	border-style: solid;
+	border-color: transparent;
+	border-width: 57.5px 0 57.5px 150px;
+	border-left-color: red;
 }
-```
-
-This will create a triangle with a `width: 150px; height: 115px;` and facing in the `right` direction.
-
-
-#### Right-Isosceles
-
-Has two 45&deg; angles and one 90&deg; angle. The 90&deg; angle is the direction of the triangle. This triangle is great if you want to render a sharp edge... Here's how you create one with this plugin:
+</style>
 
 ```css
-.foo {
-	triangle: right-iso 250px down;
+.isosceles-triangle {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 57.5px 0 57.5px 150px;
+	border-left-color: red;
 }
 ```
 
-This transpiles into:
+This creates a triangle with `width: 150px; height: 115px;` and pointing right.
 
-```css
+The isosceles triangle has the following rules/caveats:
+- You must specify both a `width` and `height`.
 
-```
+#### [Right-Isosceles](http://mathworld.wolfram.com/IsoscelesRightTriangle.html)
 
-#### Equilateral
+<figure style="float:right;margin-left:50px;">
+	<img
+		src="https://github.com/jedmao/postcss-triangle/blob/master/images/right-isosceles-triangle.png?raw=true"
+		alt="Right-Isosceles Triangle"
+		width="250"
+		height="125"
+	>
+	<figcaption>Right-Isosceles Triangle</figcaption>
+</figure>
 
-All angles are the same (60&deg;). This means all sides are the same length as well. Here's how you create one:
+This triangle has two 45&deg; angles and one 90&deg; angle. The 90&deg; angle is the direction the triangle points. This is great if you want to render a triangle with the sharpest edge possible, because it follows the pixels on your screen exactly, without any additional anti-aliasing.
+
+Iso is short for isosceles, because it's not the most fun word to spell/type; rather, it's only fun if you know how to spell it!
+
+Here's how you create one:
 
 ```css
-.foo {
-	triangle: equilateral 200px up;
+.right-isosceles-triangle {
+	triangle: right-iso down;
+	width: 250px;
+	background-color: red;
 }
 ```
 
 This transpiles into:
 
-```css
+<div class="right-isosceles-triangle"></div>
+<style>
+.right-isosceles-triangle {
+	float: right;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 125px 125px 0;
+	border-top-color: red;
+}
+</style>
 
+```css
+.right-isosceles-triangle {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 125px 125px 0;
+	border-top-color: red;
+}
 ```
 
+This creates a triangle with `width: 250px; height: 125px;` and pointing down.
 
+The right-isosceles triangle has the following rules/caveats:
+- You must specify either a `width` or a `height`.
+- You may not specify both a `width` and `height`, because it will calculate the missing dimension for you.
 
+#### [Equilateral](https://en.wikipedia.org/wiki/Equilateral_triangle)
 
+<figure style="float:right;margin-left:50px;">
+	<img
+		src="https://github.com/jedmao/postcss-triangle/blob/master/images/equilateral-triangle.png?raw=true"
+		alt="Equilateral Triangle"
+		width="200"
+		height="181"
+	>
+	<figcaption>Equilateral Triangle</figcaption>
+</figure>
 
-
-The `type` is the only optional property and its value can be either [`equilateral`](https://en.wikipedia.org/wiki/Equilateral_triangle) or [`right-iso`](http://mathworld.wolfram.com/IsoscelesRightTriangle.html). Iso is short for isosceles, because it's not the most fun word to spell; rather, it's only fun if you know how to spell it!
-
-If you don't prefer the shorthand property, you can declare the following triangle-namespaced properties:
+This triangle's angles are all the same (60&deg;). This means all sides are the same length as well. Here's how you create one:
 
 ```css
-.foo {
-	triangle-type: <equilateral|right-iso>;
-	triangle-width: <length>;
-	triangle-height: <length>;
-	triangle-direction: <up|right|down|left>;
+.equilateral-triangle {
+	triangle: equilateral up;
+	height: 100px;
+	background-color: red;
 }
 ```
 
-Using [`postcss-nested-props`](https://github.com/jedmao/postcss-nested-props), this could be simplified to:
+This transpiles into:
+
+<div class="equilateral-triangle"></div>
+<style>
+.equilateral-triangle {
+	float: right;
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 0 57.73503px 100px;
+	border-top-color: red;
+}
+</style>
 
 ```css
-.foo {
-	triangle: {
-		type: <equilateral|right-iso>;
-		width: <length>;
-		height: <length>;
-		direction: <up|right|down|left>;
-	}
+.equilateral-triangle {
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-color: transparent;
+	border-width: 0 57.73503px 100px;
+	border-bottom-color: red;
 }
 ```
 
-See [`<length>`](https://developer.mozilla.org/en-US/docs/Web/CSS/length) for possible units.
-
+This creates a triangle with `width: 115.47006px; height: 100px;` and pointing up.
 
+The equilateral triangle has the following rules/caveats:
+- You must specify either a `width` or a `height`.
+- You may not specify both a `width` and `height`, because it will calculate the missing dimension for you.
 
 That's about it!
 
@@ -138,7 +229,7 @@ $ npm install postcss-triangle
 
 ```js
 postcss([
-	require('postcss-triangle'),
+	require('postcss-triangle')(/* options */),
 	// more plugins...
 ])
 ```
@@ -150,21 +241,27 @@ postcss([
 import postcssTriangle = require('postcss-triangle');
 
 postcss([
-	postcssTriangle,
+	postcssTriangle(/* options */),
 	// more plugins...
 ])
 ```
 
 ## Options
 
-None at this time.
+### unitPrecision
+
+Type: `number`<br>
+Required: `false`<br>
+Default: `5`
+
+When using `right-iso` or `equilateral` triangles, calculations will be performed that will most likely turn into fractions. This option allows you to control the number of significant digits after the decimal point (e.g., `1.2354` with a `unitPrecision` of `2` would yield `1.24`, rounding it off nicely).
 
 ## Testing
 
 Run the following command:
 
 ```
-$ ./scripts/test
+$ npm test
 ```
 
 This will build scripts, run tests and generate a code coverage report. Anything less than 100% coverage will throw an error.
@@ -174,7 +271,7 @@ This will build scripts, run tests and generate a code coverage report. Anything
 For much faster development cycles, run the following command:
 
 ```
-$ ./scripts/watch
+$ npm run watch
 ```
 
 This will build scripts, run tests and watch for changes.
diff --git a/images/equilateral-triangle.png b/images/equilateral-triangle.png
diff --git a/images/isosceles-triangle.png b/images/isosceles-triangle.png
diff --git a/images/right-isosceles-triangle.png b/images/right-isosceles-triangle.png