>> 2.0.0 - Add Bootstrap 4 (final) support

DesignRevision · Feb 8, 2018 · e1edfcc · e1edfcc
1 parent d51c839
commit e1edfcc
Show file tree

Hide file tree

Showing 54 changed files with 6,766 additions and 1,261 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
 node_modules
+.DS_Store
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## 📦 2.0.0 - 2018-02-08
+
+- Skipped minor version due to changes that break backward compatibility.
+
+### Changed
+- Upgraded compatibility with Bootstrap 4 final.
+- Improved outlined buttons active state styles.
+- Improved form label sizing.
+- Improved default select element styles.
+- Improved toggle elements focused state styles.
+- Fixed indeterminate checkbox styles.
+- Fixed multiple IE11 app promo extra page layout issues [(#11)](https://github.com/DesignRevision/shards-ui/issues/11)
+
+### Added
+- Extended support for customisation options via variables.
+
+### Removed
+- Removed redundant margin adjustments on paragraphs following headings.
+- Removed unused SCSS variables.
+
+## 📦 1.1.2 - 2017-12-04
+
+### Changed
+- Fixed custom toggle issues [(#8)](https://github.com/DesignRevision/shards-ui/issues/8) and [(#9)](https://github.com/DesignRevision/shards-ui/issues/9).
+- Fixed demo page elements issues [(#10)](https://github.com/DesignRevision/shards-ui/issues/10).
+- Corrected first field "type" in the bottom form of the demo agency landing page.
+
+
+## 📦 1.1.0 - 2017-11-10
+
+### Added
+- Demo example page as extra.
+
+### Changed
+- Updated license to MIT.
+
+
+## [1.0.0] - 2017-11-07
+- Initial release.
diff --git a/README.md b/README.md
@@ -30,33 +30,32 @@ Currently there are only two ways of downloading Shards:
 
 ### 🖇 Dependencies
 
-The only hard dependency is Bootstrap 4 beta which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency.
+The only hard dependency is Bootstrap 4 (final) which needs to be included in your HTML document before Shards. Datepickers and slider controls also require the Shards JavaScript dependency.
 
 ### 🏎💨 Quick Start
 
 In order to take advantage of both Bootstrap and Shards' features you may want to use the following starter template that includes all dependencies.
 
 ```html
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <title>Shards — Quick Start</title>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-    <!-- Bootstrap and Shards CSS -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
-    <link rel="stylesheet" href="/css/shards.min.css">
+    <!-- CSS Dependencies -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <link rel="stylesheet" href="css/shards.min.css">
   </head>
   <body>
-    <h1>👋 Hello! I'm using Shards and it's awesome!</h1>
+    <h1>Hello, world!</h1>
 
-    <!-- JavaScript -->
-    <!-- jQuery, Popper.js, Bootstrap JS, Shards JS -->
+    <!-- Optional JavaScript -->
+    <!-- JavaScript Dependencies: jQuery, Popper.js, Bootstrap JS, Shards JS -->
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
-    <script src="/js/shards.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+    <script src="js/shards.min.js"></script>
   </body>
 </html>
 ```
@@ -79,12 +78,6 @@ Building better products is something I'm trying to get really good at. I’d lo
 While building this project we used various free resources built and made 
 available by some wonderful people around the world. See the [ATTRIB.md](ATTRIB.md) file for details.
 
-## Roadmap
-Below are a couple of items from my list of improvements for the upcoming month(s).
+## Changelog
 
-### General
-- [x] Publish as an NPM package.
-- [x] Change the license to a more permissive alternative.
-
-### Design
-- [ ] Improve the Sketch document (nested symbols).
+[View notable changes.](CHANGELOG.md)
diff --git a/package.json b/package.json
@@ -1,13 +1,13 @@
 {
   "name": "shards-ui",
   "description": "A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.",
-  "version": "1.1.2",
+  "version": "2.0.0",
   "main": "js/index.js",
   "scripts": {
     "start": "npm-run-all --parallel watch serve-dist",
     "copy-html": "copyfiles -f src/extras/*.html dist",
     "copy-images": "copyfiles -u 3 src/extras/images/**/**/**/* dist/images/",
-    "css": "npm-run-all css-compile css-prefix css-minify",
+    "css": "npm-run-all css-compile css-prefix css-minify && npm run bundlesize",
     "css-compile": "npm-run-all css-compile:main css-compile:extras css-compile:demo",
     "css-compile:demo": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-demo.scss dist/css/shards-demo.css",
     "css-compile:extras": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 src/extras/scss/shards-extras.scss dist/css/shards-extras.css",
@@ -27,8 +27,15 @@
     "watch-css": "nodemon --ignore src/js --ignore dist/ -e scss -x \"npm run css\"",
     "watch-html": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e html -x \"npm run copy-html\"",
     "watch-images": "nodemon --ignore src/js --ignore src/scss --ignore src/extras/js --ignore src/extras/scss --ignore dist/ -e jpg,jpeg,png -x \"npm run copy-images\"",
-    "watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\""
+    "watch-js": "nodemon --ignore src/scss --ignore dist/ -e js -x \"npm run js\"",
+    "bundlesize": "bundlesize"
   },
+  "bundlesize": [
+    {
+      "path": "./dist/css/shards.min.css",
+      "maxSize": "14 kB"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/DesignRevision/shards-ui"
@@ -61,7 +68,9 @@
     "webpack": "^3.6.0"
   },
   "dependencies": {
+    "bootstrap": "4.0.0",
     "bootstrap-datepicker": "^1.7.1",
+    "bundlesize": "^0.15.3",
     "nouislider": "^10.1.0"
   }
 }
diff --git a/src/scss/_alert.scss b/src/scss/_alert.scss
@@ -1,25 +1,25 @@
 //
-// Alerts adjustments
+// Base styles
 //
 
-// Base styles.
 .alert {
   padding: $alert-padding-y $alert-padding-x;
   margin-bottom: $alert-margin-bottom;
   border: none;
-  @include border-radius(0);
+  @include border-radius($alert-border-radius);
 }
 
 // Provide class for links that match alerts
 .alert-link {
   font-weight: $alert-link-font-weight;
 }
 
+
 // Dismissible alerts
 .alert-dismissible {
   .close {
-    top: -$alert-padding-y;
-    right: -$alert-padding-x;
+    top: 0;
+    right: 0;
     padding: $alert-padding-y $alert-padding-x;
     @include transition($transition-base);
 
@@ -29,6 +29,8 @@
   }
 }
 
+
+// Alternate styles
 // Override alert theme colors without mixin.
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
@@ -41,10 +43,10 @@
 
     // Exception for alerts with a light background.
     @if $color == "light" {
-      @include color-yiq($value);
+      color: color-yiq($value);
 
       .alert-link {
-        @include color-yiq($value);
+        color: color-yiq($value);
       }
     }
   }

diff --git a/src/scss/_badge.scss b/src/scss/_badge.scss
@@ -1,25 +1,27 @@
+// Base class
 //
-// Badges adjustments
-//
+// Requires one of the contextual, color modifier classes for `color` and
+// `background-color`.
 
-// Base class
 .badge {
   padding: $badge-padding-y $badge-padding-x;
   font-size: $badge-font-size;
   font-weight: $badge-font-weight;
   font-family: $badge-font-family;
   color: $badge-color;
 
-  @include border-radius();
+  @include border-radius($badge-border-radius);
 }
 
-// Add badge anchor transitions.
+// Badge anchor transitions
 a.badge {
   @include transition($transition-base);
 }
 
 // Pill badges
 .badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
   @include border-radius($badge-pill-border-radius);
 }
 
@@ -41,7 +43,7 @@ a.badge {
 
     // Fix light outlined badges
     @if ( $value == theme-color("light") ) {
-      @include color-yiq($value);
+      color: color-yiq($value);
     }
   }
 }
diff --git a/src/scss/_button-group.scss b/src/scss/_button-group.scss
@@ -1,6 +1,29 @@
-// scss-lint:disable QualifyingElement
+// stylelint-disable selector-no-qualifying-type
 
-// Adjust Button Groups
+// Make the div behave like a button
+.btn-group,
+.btn-group-vertical {
+  // Prevent double borders when buttons are next to each other
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -$btn-border-width;
+  }
+}
+
+.btn-group {
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
 
 // Sizing
 //
@@ -9,28 +32,59 @@
 .btn-group-sm > .btn { @extend .btn-sm; }
 .btn-group-lg > .btn { @extend .btn-lg; }
 
+
 //
 // Split button dropdowns
 //
 
-.btn + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x * .75;
-  padding-left: $input-btn-padding-x * .75;
+.dropdown-toggle-split {
+  padding-right: $btn-padding-x * .75;
+  padding-left: $btn-padding-x * .75;
 }
 
 .btn-sm + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-sm * .75;
-  padding-left: $input-btn-padding-x-sm * .75;
+  padding-right: $btn-padding-x-sm * .75;
+  padding-left: $btn-padding-x-sm * .75;
 }
 
 .btn-lg + .dropdown-toggle-split {
-  padding-right: $input-btn-padding-x-lg * .75;
-  padding-left: $input-btn-padding-x-lg * .75;
+  padding-right: $btn-padding-x-lg * .75;
+  padding-left: $btn-padding-x-lg * .75;
 }
 
 
 // The clickable button for toggling the menu
 // Set the same inset shadow as the :active state
 .btn-group.show .dropdown-toggle {
   @include box-shadow($btn-active-box-shadow);
+
+  // Show no shadow for `.btn-link` since it has no other button styles.
+  &.btn-link {
+    @include box-shadow(none);
+  }
 }
+
+
+//
+// Vertical button groups
+//
+
+.btn-group-vertical {
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
+    margin-top: -$btn-border-width;
+  }
+
+  // Reset rounded corners
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}