[Chore] Update codebase to use prettier auto-styling

.prettierignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "printWidth": 80,
+  "singleQuote": true,
+  "quote-props": "consistent",
+  "trailingComma": "es5",
+  "arrowParens": "always"
+}

README.md

@@ -1,4 +1,5 @@
 # object-fit-polyfill
+
 A polyfill for browsers that don't support the `object-fit` CSS property. Unsure of what the `object-fit` does? Essentially `object-fit` is to `<img>` tags what `background-size` is to `background-image`. You can check out the [MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) for more details.
 
 ## Features
@@ -38,20 +39,25 @@ Initialization:
 ```html
 <!-- Minimum CSS -->
 <style>
-.container {
-  width: 25em; /* Or whatever you want it to be */
-  height: 25em; /* Or whatever you want it to be */
-}
-.media {
-  width: 100%;
-  height: 100%;
-  object-fit: cover; /* Or whatever object-fit you want */
-}
+  .container {
+    width: 25em; /* Or whatever you want it to be */
+    height: 25em; /* Or whatever you want it to be */
+  }
+  .media {
+    width: 100%;
+    height: 100%;
+    object-fit: cover; /* Or whatever object-fit you want */
+  }
 </style>
 
 <!-- Minimum HTML -->
 <div class="container">
-  <img class="media" data-object-fit="cover" src="https://unsplash.it/800/600/" alt="">
+  <img
+    alt=""
+    src="https://unsplash.it/800/600/"
+    class="media"
+    data-object-fit="cover"
+  />
 </div>
 
 <script src="dist/objectFitPolyfill.min.js"></script>
@@ -61,23 +67,46 @@ Customized object-fit/object-position:
 
 ```html
 <div class="container">
-  <img class="media" data-object-fit="contain" data-object-position="top left" src="https://unsplash.it/800/600/" alt="">
+  <img
+    alt=""
+    src="https://unsplash.it/800/600/"
+    class="media"
+    data-object-fit="contain"
+    data-object-position="top left"
+  />
 </div>
 
 <div class="container">
-  <img class="media" data-object-fit="none" data-object-position="25% 75%" src="https://unsplash.it/800/600/" alt="">
+  <img
+    alt=""
+    src="https://unsplash.it/800/600/"
+    class="media"
+    data-object-fit="none"
+    data-object-position="25% 75%"
+  />
 </div>
 
 <div class="container">
-  <img class="media" data-object-fit="scale-down" data-object-position="3em -1em" src="https://unsplash.it/800/600/" alt="">
+  <img
+    alt=""
+    src="https://unsplash.it/800/600/"
+    class="media"
+    data-object-fit="scale-down"
+    data-object-position="3em -1em"
+  />
 </div>
 ```
 
 If you're only interested in using the basic polyfill (which assumes `object-fit: cover` and `object-position: 50% 50%`), you can save yourself some bytes by using:
 
 ```html
 <div class="container">
-  <img class="media" data-object-fit src="https://unsplash.it/800/600/" alt="">
+  <img
+    alt=""
+    src="https://unsplash.it/800/600/"
+    class="media"
+    data-object-fit
+  />
 </div>
 
 <script src="dist/objectFitPolyfill.basic.min.js"></script>

demo/style.css

@@ -1,15 +1,18 @@
-html, body {
+html,
+body {
   margin: 0;
   height: 100%;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif;
   line-height: 1.5;
   background-color: #111;
   color: #fff;
 }
 a {
   color: inherit;
 }
-h1, h2 {
+h1,
+h2 {
   margin: 0;
 }
 
@@ -20,7 +23,7 @@ h1, h2 {
 .heading-intro {
   position: relative;
   top: 50%;
-  background-color: rgba(0,0,0, 0.8);
+  background-color: rgba(0, 0, 0, 0.8);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
   transform: translateY(-50%);
@@ -31,7 +34,7 @@ h1, h2 {
  */
 
 .clearfix::after {
-  content: "";
+  content: '';
   display: table;
   clear: both;
 }

gulpfile.js

@@ -1,15 +1,16 @@
-"use strict";
+'use strict';
 
-var gulp = require("gulp"),
-    uglify = require("gulp-uglify"),
-    rename = require("gulp-rename");
+var gulp = require('gulp'),
+  uglify = require('gulp-uglify'),
+  rename = require('gulp-rename');
 
 /*----------------------------------------------
   Uglify JS
 -----------------------------------------------*/
-gulp.task("default", function() {
-  return gulp.src("src/*.js")
+gulp.task('default', function() {
+  return gulp
+    .src('src/*.js')
     .pipe(uglify())
-    .pipe(rename({suffix: ".min"}))
-    .pipe(gulp.dest("dist/"));
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest('dist/'));
 });