add new alignment utility classes with eventual deprecation of row al…

…ign classes, fremove redundant files, add border option to hr

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullets-sass",
-  "version": "4.2.0",
+  "version": "5.0.0",
   "description": "A simple Sass Framework",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "gulp-jshint": "^1.11.0",
     "gulp-plumber": "^1.0.1",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.0.1",
+    "gulp-sass": "^3.1.0",
     "gulp-sass-lint": "^1.3.2",
     "gulp-sourcemaps": "^1.6.0",
     "gulp-uglify": "^1.2.0",

scss/settings.scss → scss/_settings.scss

@@ -1,10 +1,23 @@
 // Global
-$global-font-family:'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
-$global-font-size:16px;
-$global-line-height:1.2;
-$global-font-weight:300;
-$text-color:#222222;
-$global-width:1200px;
+$global-font-family:
+    // Safari for OS X and iOS (San Francisco)
+    -apple-system,
+    // Chrome >= 56 for OS X (San Francisco), Windows, Linux and Android
+    system-ui,
+    // Chrome < 56 for OS X (San Francisco)
+    BlinkMacSystemFont,
+    // Windows
+    "Segoe UI",
+    // Android
+    "Roboto",
+    // Basic web fallback
+    "Helvetica Neue", Arial, sans-serif !default;
+
+$global-font-size: 16px;
+$global-line-height: 1.15;
+$global-font-weight: 300;
+$text-color: #222222;
+$global-width: 1200px;
 
 $global-margin: 2rem;
 $global-padding: 2rem;
@@ -72,12 +85,14 @@ $h6-font-sizes: (
 );
 
 
-$header-font-family:'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
-$header-line-height:1.2;
-$header-bottom-margin:rem-calc(30);
+$header-font-family: $global-font-family;
+$header-line-height: 1.2;
+$header-bottom-margin: rem-calc(30);
 
-$paragraph-line-height:1.6;
-$paragraph-margin-bottom:1.2rem;
+$paragraph-line-height: 1.6;
+$paragraph-margin-bottom: 1.2rem;
+
+$hr-border: 1px solid $light-gray;
 
 $list-lineheight: $paragraph-line-height;
 $list-margin-bottom: $paragraph-margin-bottom;
@@ -97,10 +112,10 @@ $cite-pseudo-content: '\2014 \0020';
 $abbr-underline: 1px dotted $black;
 
 // inputs
-$input-height:60px;
-$input-border-color:$light-gray;
-$input-focus-color:$primary;
-$input-focus-border-color:$primary;
+$input-height: 60px;
+$input-border-color: $light-gray;
+$input-focus-color: $primary;
+$input-focus-border-color: $primary;
 
 // buttons
 $button-padding-topbottom: 14px;
@@ -133,13 +148,6 @@ $tabletbreak:rem-calc(768);
 $phabletbreak:rem-calc(460);
 $mobilebreak:rem-calc(320);
 
-// CSS Grid
-$column-min: 200px;
-$column-max: 12fr;
-$row-min: 150px;
-$row-max: auto;
-$grid-gap: $global-padding;
-
 // map the breakpoints
 $breakpoints: (
 	mobile-min: $mobilebreak,

scss/bullets/atoms/_bullets-button.scss

@@ -24,27 +24,11 @@
 			color: $button-text-color;		
 		}
 
-		&:active {
-			background: darken($button-background, 8%);			
-		}
-
 		&.button--large {
 			padding: $button-padding-topbottom*1.4 $button-padding-leftright*1.3;
 		}
 	}
 
-	.button--secondary {
-		background: $secondary;
-
-		&:hover {
-			background: darken($secondary, 5%);
-		}		
-
-		&:active {
-			background: darken($secondary, 8%);			
-		}
-	}
-
 	.button--hollow {
 		background: none;	
 		border: 2px solid $button-background;
@@ -55,23 +39,6 @@
 			color: lighten($button-background, 30%);
 		}
 
-		&:active {
-			background: darken($button-background, 5%);			
-		}	
-
-	}
-
-	.button--hollow.button--secondary {
-		border: 2px solid $secondary;
-
-		&:hover {
-			background: $button-background;
-			color: lighten($secondary, 30%);
-		}
-
-		&:active {
-			background: darken($secondary, 5%);			
-		}			
 	}
 
 } // end mixin

scss/bullets/atoms/_bullets-images.scss

@@ -1,14 +1,6 @@
 @mixin bullets-image {
-
-    figure {
-        margin: 0;
-        padding: $global-padding/2;
-        background: $light-gray;
-    }
-
 	img {
-		max-width: 100%;
-		display: block;
+		max-width:100%;
+		display:inline-block;
 	}
-
 } // end mixin

scss/bullets/atoms/_bullets-type.scss

@@ -1,8 +1,8 @@
 @mixin bullets-type {
 	h1,h2,h3,h4,h5,h6 {
-		font-family:$header-font-family;
-		line-height:$header-line-height;
-		margin:0 0 $header-bottom-margin;
+		font-family: $header-font-family;
+		line-height: $header-line-height;
+		margin: 0 0 $header-bottom-margin;
 	}
 
 	h1 {
@@ -128,7 +128,7 @@
 
 		border-top: 0;
 		border-right: 0;
-		border-bottom:1px;
+		border-bottom: $hr-border;
 		border-left: 0;
 	}
 } // end mixin

scss/bullets/utility/_bullets-align.scss

@@ -0,0 +1,33 @@
+@mixin bullets-align {
+    // handle horizontal alignment
+
+    .u-align-center {
+        justify-content: center;
+    }
+
+    .u-align-justified {
+        justify-content: space-between;
+    }
+
+    .u-align-spaced {
+        justify-content: space-around;
+    }
+
+    .u-align-end {
+        justify-content: flex-end;
+    }
+
+    // handle vertical alignment
+
+    .u-align-middle {
+        align-items: center;
+    }
+
+    .u-align-bottom {
+        align-items: flex-end;
+    }
+
+    .u-align-top {
+        align-items: flex-start;
+    }
+}

scss/bullets/utility/_bullets-base.scss

@@ -2,7 +2,6 @@
 html {
 	box-sizing: border-box;
 }
-
 *, *:before, *:after {
 	box-sizing: inherit;
 }
@@ -16,6 +15,6 @@ body {
 }
 
 img {
-	max-width: 100%;
-	display: inline-block;
+	max-width:100%;
+	display:inline-block;
 }

scss/bullets/utility/_bullets-colour.scss

@@ -1,7 +1,7 @@
-.u-color-primary {
-    color: $primary;
+.primary {
+
 }
 
-.u-color-secondary {
-    color: $secondary;
+.secondary {
+	
 }

scss/bullets/utility/_bullets-grid.scss

@@ -16,7 +16,6 @@
 		flex-wrap:wrap;
 
 		.row {
-			width: auto;
 			margin-left:-$global-padding/2;
 			margin-right:-$global-padding/2;
 		}	
@@ -128,5 +127,4 @@
 
 	}
 
-
 } // end mixin

scss/bullets/utility/_bullets-touch.scss

@@ -0,0 +1,12 @@
+a,
+area,
+button,
+[role="button"],
+input:not([type=range]),
+label,
+select,
+summary,
+textarea {
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+}

scss/style.scss

@@ -12,8 +12,9 @@
 // import the bullets
 @import "bullets/utility/bullets-base";
 @import "bullets/utility/bullets-grid";
-@import "bullets/utility/bullets-css-grid";
+@import "bullets/utility/bullets-align";
 @import "bullets/utility/bullets-colour";
+@import "bullets/utility/bullets-touch";
 
 @import "bullets/atoms/bullets-type";
 @import "bullets/atoms/bullets-links";
@@ -25,9 +26,5 @@
 @import "bullets/molecules/bullets-tablestripe";
 @import "bullets/molecules/bullets-forms";
 @import "bullets/molecules/bullets-hero";
-@import "bullets/molecules/bullets-module";
 
-@import "bullets/organisms/bullets-tables";
-@import "bullets/organisms/bullets-header";
-@import "bullets/organisms/bullets-footer";
-@import "bullets/organisms/bullets-article";
+@import "bullets/organisms/bullets-tables";