feat: adds wrapper var, .clean, some flexibility

- adds variable to control wrapper border
- adds uneven cols to have more flexibility
- adds .clean class to wrapper to have no background, border, margin and padding
- last .ph-row should not have margin-bottom
- updates readme

README.md

@@ -35,6 +35,7 @@ $ph-border-radius:        2px !default;
 
 $ph-gutter:               30px !default;
 $ph-spacer:               15px !default;
+$ph-item-border:          1px solid darken($ph-bg, 10%) !default;
 
 $ph-avatar-border-radius: 50% !default;
 
@@ -76,7 +77,9 @@ A simple html markup would be something like this:
 </div>
 ```
 
-- grid classes: `.ph-col-2`, `.ph-col-4`, `.ph-col-6`, `.ph-col-8`, `.ph-col-10`, `.ph-col-12`
+Use `<div class="ph-item clean"></div>` if you prefer to have no wrapper (background, border, margin) around.
+
+- grid classes: `.ph-col-1`, `.ph-col-2`, `.ph-col-3`, `.ph-col-4`, `.ph-col-5`, `.ph-col-6`, `.ph-col-7`, `.ph-col-8`, `.ph-col-9`, `.ph-col-10`, `.ph-col-11`, `.ph-col-12`
 
 - elements inside: `.ph-avatar` and `.ph-picture`
 
@@ -95,7 +98,7 @@ A simple html markup would be something like this:
 
 ## Contributing
 
-Please read angular's [CONTRIBUTING.md](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
+Please read Angular's [CONTRIBUTING.md](https://github.com/angular/angular/blob/master/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
 
 ## Versioning
 

src/index.html

@@ -46,7 +46,7 @@ <h2 class="h4">Generic placeholder</h2>
 
       </div>
 
-      <h2 class="h4">Placeholder in a external twitter bootstrap grid</h2>
+      <h2 class="h4">Placeholder in a external Bootstrap grid</h2>
 
       <div class="row">
         <div class="col-12 col-sm-6">
@@ -103,6 +103,22 @@ <h2 class="h4">Placeholder in a external twitter bootstrap grid</h2>
         </div>
       </div>
 
+      <h2 class="h4">Just Placeholder without wrapper</h2>
+
+      <div class="ph-item clean">
+
+        <div class="ph-col-12">
+          <div class="ph-picture"></div>
+
+          <div class="ph-row">
+            <div class="ph-col-4"></div>
+            <div class="ph-col-8 empty"></div>
+            <div class="ph-col-2"></div>
+          </div>
+        </div>
+
+      </div>
+
       <h2 class="h4">Other placeholder examples</h2>
 
       <div class="ph-item">
@@ -235,4 +251,4 @@ <h2 class="h4">Other placeholder examples</h2>
     <script async defer src="https://buttons.github.io/buttons.js"></script>
 
   </body>
-</html>
+</html>

src/scss/_layout.scss

@@ -12,11 +12,12 @@
   overflow: hidden;
   margin-bottom: $ph-gutter;
   background-color: $ph-bg;
-  border: 1px solid darken($ph-bg, 10%);
+  border: $ph-item-border;
   border-radius: $ph-border-radius;
 
   &::before {
     content: " ";
+    pointer-events: none;
     position: absolute;
     top: 0;
     right: 0;
@@ -36,6 +37,17 @@
     padding-right: ($ph-gutter / 2);
     padding-left: ($ph-gutter / 2);
   }
+
+  &.clean {
+    padding: 0;
+    background: transparent;
+    border: 0 transparent;
+    margin: 0;
+
+    > * {
+      padding: 0;
+    }
+  }
 }
 
 .ph-row {
@@ -56,23 +68,45 @@
   .empty {
     background-color: rgba($ph-bg, 0);
   }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
 }
 
+.ph-col-1 {
+  flex: 0 0 percentage(1 / 12);
+}
 .ph-col-2 {
   flex: 0 0 percentage(2 / 12);
 }
+.ph-col-3 {
+  flex: 0 0 percentage(3 / 12);
+}
 .ph-col-4 {
   flex: 0 0 percentage(4 / 12);
 }
+.ph-col-5 {
+  flex: 0 0 percentage(5 / 12);
+}
 .ph-col-6 {
   flex: 0 0 percentage(6 / 12);
 }
+.ph-col-7 {
+  flex: 0 0 percentage(7 / 12);
+}
 .ph-col-8 {
   flex: 0 0 percentage(8 / 12);
 }
+.ph-col-9 {
+  flex: 0 0 percentage(9 / 12);
+}
 .ph-col-10 {
   flex: 0 0 percentage(10 / 12);
 }
+.ph-col-11 {
+  flex: 0 0 percentage(11 / 12);
+}
 .ph-col-12 {
   flex: 0 0 percentage(12 / 12);
 }

src/scss/_variables.scss

@@ -4,7 +4,8 @@ $ph-border-radius:        2px !default;
 
 $ph-gutter:               30px !default;
 $ph-spacer:               15px !default;
+$ph-item-border:          1px solid darken($ph-bg, 10%) !default;
 
 $ph-avatar-border-radius: 50% !default;
 
-$ph-animation-duration: .8s !default;
+$ph-animation-duration:   .8s !default;