Add classes to define borders in only one side

Author: jfmdev

README.md

@@ -48,7 +48,7 @@ Additionally, you can modify the opacity of the colors the `pure-bg-alpha-*` cla
 
 ### Borders
 
-You can define borders using the class `.pure-bd-*`, where `*` can be any number between 1 and 5, defining the width (in pixels) of the border. By default the border will be solid and black.
+You can define borders using the classes `.pure-bd-*` / `.pure-bd-bottom-*` / `.pure-bd-left-*` / `.pure-bd-right-*` / `.pure-bd-top-*`, where `*` can be any number between 1 and 5, defining the width (in pixels) of the border. By default the border will be solid and black.
 
 To change the style of a border you can use classes `.pure-bd-solid` / `.pure-bd-dotted` / `.pure-bd-dashed`.
 

demo.html

@@ -88,6 +88,14 @@ <h3>Border widths</h3>
     <div class="pure-p-2 pure-bd-4">pure-bd-4</div>
     <br>
     <div class="pure-p-2 pure-bd-5">pure-bd-5</div>
+    <br>
+    <div class="pure-p-2 pure-bd-bottom-1">pure-bd-bottom-1</div>
+    <br>
+    <div class="pure-p-2 pure-bd-left-1">pure-bd-left-1</div>
+    <br>
+    <div class="pure-p-2 pure-bd-right-1">pure-bd-right-1</div>
+    <br>
+    <div class="pure-p-2 pure-bd-top-1">pure-bd-top-1</div>
 
     <h3>Border styles</h3>
 

dist/all.css

@@ -1,6 +1,6 @@
 {
   "name": "purecss-utilities",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Utility CSS classes that complement PureCSS",
   "main": "index.js",
   "scripts": {

dist/all.css.map

@@ -1,9 +1,33 @@
 // .pure-bd-1 | .pure-bd-2 | .pure-bd-3 | .pure-bd-4 | .pure-bd-5
+// .pure-bd-bottom-1 | .pure-bd-bottom-2 | .pure-bd-bottom-3 | .pure-bd-bottom-4 | .pure-bd-bottom-5
+// .pure-bd-left-1 | .pure-bd-left-2 | .pure-bd-left-3 | .pure-bd-left-4 | .pure-bd-left-5
+// .pure-bd-right-1 | .pure-bd-right-2 | .pure-bd-right-3 | .pure-bd-right-4 | .pure-bd-right-5
+// .pure-bd-top-1 | .pure-bd-top-2 | .pure-bd-top-3 | .pure-bd-top-4 | .pure-bd-top-5
 @for $i from 1 through 5 {
   .pure-bd-#{$i} {
     border-width: #{$i}px;
     border-style: solid;
   }
+
+  .pure-bd-bottom-#{$i} {
+    border-bottom-width: #{$i}px;
+    border-bottom-style: solid;
+  }
+
+  .pure-bd-left-#{$i} {
+    border-left-width: #{$i}px;
+    border-left-style: solid;
+  }
+
+  .pure-bd-right-#{$i} {
+    border-right-width: #{$i}px;
+    border-right-style: solid;
+  }
+
+  .pure-bd-top-#{$i} {
+    border-top-width: #{$i}px;
+    border-top-style: solid;
+  }
 }
 
 // .pure-bd-black | .pure-bd-blue | .pure-bd-cyan | .pure-bd-green | .pure-bd-grey