Initial release.

Author: iliakolev

CHANGELOG.md

@@ -0,0 +1,5 @@
+# ratio Changelog
+
+## [0.1.0] - 2015-03-31
+
+* Initial release.

README.md

@@ -0,0 +1,87 @@
+# Ratio
+
+The `ratio` object simply causes media embeds – such as videos, slideshows, or
+even images to retain a specific aspect ratio.
+
+## Dependencies
+
+The `ratio` object depends on one other module:
+
+* [settings.defaults](https://github.com/treeframework/settings.defaults)
+
+If you install the `ratio` object using Bower, you will get these dependencies at
+the same time. If not using Bower, please be sure to install and `@import` these
+dependencies in the relevant way.
+
+## Installation
+
+You can install `ratio` object via npm, Git Submodule, or copy and paste.
+
+### Install using Bower:
+
+```sh
+$ bower install tree-ratio --save
+```
+
+Once installed, `@import` into your project in its Object layer:
+
+```scss
+@import "bower_components/tree-ratio/object.ratio";
+```
+
+### Install using npm:
+
+```sh
+$ npm install tree-ratio --save
+```
+
+### Install as a Git Submodule:
+
+```sh
+$ git submodule add [email protected]:treeframework/object.ratio.git
+```
+
+Once installed, `@import` into your project in its Object layer:
+
+```scss
+@import "trump.ratio/trump.ratio";
+```
+
+### Install via file download
+
+The least recommended option dor installation is to simply download
+`_object.ratio.scss` into your project and `@import` it into your project in its
+Objects layer.
+
+## Usage
+
+Basic usage of the `ratio` object uses the required classes:
+
+```html
+<div class="ratio">
+    <iframe class="ratio__item" src="..."></iframe>
+</div>
+```
+
+## Options
+
+Other, optional classes can supplement the required base classes:
+
+* `.ratio--[3by1|2by1|16by9|4by3]`: alter aspect ratio.
+
+For example:
+
+```html
+<figure class="ratio  ratio--4by3">
+    <img class="ratio__item" src="path/to/image.jpg" alt="">
+</figure>
+```
+
+## Credits
+
+* **[inuitcss](https://github.com/inuitcss)** Powerful, Sass-based, OOCSS
+framework designed with scalability and performance in mind.
+
+* **[SUIT CSS link utilities](https://github.com/suitcss/utils-link/)** SUIT
+CSS is a reliable and testable styling methodology for component-based UI
+development.

_object.ratio.scss

@@ -0,0 +1,81 @@
+// *************************************
+//
+//   #RATIO
+//
+// *************************************
+
+// For use with media embeds – such as videos, slideshows, or even images –
+// * that need to retain a specific aspect ratio.
+
+// Predefine the variables below in order to alter and enable specific features.
+$tree-ratio-namespace:       $tree-namespace !default;
+
+$tree-enable-ratio--3by1:    false !default;
+$tree-enable-ratio--2by1:    false !default;
+$tree-enable-ratio--16by9:   false !default;
+$tree-enable-ratio--4by3:    false !default;
+
+
+
+
+// 1. Default aspect ratio is 1:1.
+.#{$tree-ratio-namespace}ratio {
+    position: relative;
+    display: block;
+    height: 0;
+    padding-bottom: 100%; // [1]
+    overflow: hidden;
+}
+
+    .#{$tree-ratio-namespace}ratio__item {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        height: 100%;
+        width: 100%;
+    }
+
+
+
+
+
+@if ($tree-enable-ratio--3by1 == true) {
+
+    // Ratio 3:1
+
+    .#{$tree-ratio-namespace}ratio--3by1 {
+        padding-bottom: 33.33333%;
+   }
+
+}
+
+@if ($tree-enable-ratio--2by1 == true) {
+
+    // Ratio 2:1
+
+    .#{$tree-ratio-namespace}ratio--2by1 {
+        padding-bottom: 50%;
+   }
+
+}
+
+@if ($tree-enable-ratio--16by9 == true) {
+
+    // Ratio 16:9
+
+    .#{$tree-ratio-namespace}ratio--16by9 {
+        padding-bottom: 56.25%;
+   }
+
+}
+
+@if ($tree-enable-ratio--4by3 == true) {
+
+    // Ratio 4:3
+
+    .#{$tree-ratio-namespace}ratio--4by3 {
+        padding-bottom: 75%;
+   }
+
+}

bower.json

@@ -0,0 +1,16 @@
+{
+  "name": "tree-ratio",
+  "version": "0.1.0",
+  "homepage": "https://github.com/treeframework/object.ratio",
+  "author": "Ilia Kolev <[email protected]>",
+  "description": "For use with media embeds – such as videos, slideshows, or even images – * that need to retain a specific aspect ratio.",
+  "main": "_object.ratio.scss",
+  "keywords": [
+    "oocss",
+    "css"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "tree-defaults": "~0.2.5",
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "tree-ratio",
+  "description": "For use with media embeds – such as videos, slideshows, or even images – * that need to retain a specific aspect ratio.",
+  "version": "0.1.0",
+  "author": "Ilia Kolev <[email protected]>",
+  "bugs": {
+    "url": "https://github.com/treeframework/object.ratio/issues"
+  },
+  "dependencies": {
+    "tree-defaults": "~0.2.5",
+  },
+  "homepage": "https://github.com/treeframework/object.ratio",
+  "keywords": [
+    "oocss",
+    "css"
+  ],
+  "license": "MIT",
+  "main": "_object.ratio.scss",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/treeframework/object.ratio.git"
+  }
+}