bullframe.css 3.8.2 → 4.0.0

package/docs/test/js/vendor/ie10-viewport-bug-workaround.js

@@ -1,20 +1,20 @@
-/*!
- * IE10 viewport hack for Surface/desktop Windows 8 bug
- * Copyright 2014-2015 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */
-
-// See the Getting Started docs for more information:
-// http://getbootstrap.com/getting-started/#support-ie10-width
-
-(function() {
-	"use strict";
-
-	if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
-		var msViewportStyle = document.createElement("style");
-		msViewportStyle.appendChild(
-			document.createTextNode("@-ms-viewport{width:auto!important}")
-		);
-		document.querySelector("head").appendChild(msViewportStyle);
-	}
-})();
+/*!
+ * IE10 viewport hack for Surface/desktop Windows 8 bug
+ * Copyright 2014-2015 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+
+// See the Getting Started docs for more information:
+// http://getbootstrap.com/getting-started/#support-ie10-width
+
+(function() {
+	"use strict";
+
+	if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
+		var msViewportStyle = document.createElement("style");
+		msViewportStyle.appendChild(
+			document.createTextNode("@-ms-viewport{width:auto!important}")
+		);
+		document.querySelector("head").appendChild(msViewportStyle);
+	}
+})();

package/gulpfile.js

@@ -8,8 +8,11 @@
 // instead of gulp.series()
 const { src, dest, watch, series, parallel } = require('gulp');
 
+// Upgrade gulp-sass to v5
+// https://github.com/dlmanning/gulp-sass/tree/master#migrating-to-version-5
+const sass = require('gulp-sass')(require('sass'));
+
 // Import all the Gulp-related packages we want to use
-const sass = require('gulp-sass');
 const postcss = require('gulp-postcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
@@ -55,7 +58,7 @@ function scssTask() {
       .pipe(
         replace(
           '@charset "UTF-8";',
-          '/*! bullframe.css v3.8.2 | MIT License | https://github.com/marcop135/bullframe.css */'
+          '/*! bullframe.css v4.0.0 | MIT License | https://github.com/marcop135/bullframe.css */'
         )
       )
 

package/index.html

@@ -19,14 +19,10 @@
   <meta name="msapplication-TileColor" content="#da532c" />
   <meta name="theme-color" content="#f95c1f" />
 
-  <link rel="stylesheet" href="./dist/css/bullframe-dark-prefers.min.css?v3.8.1" />
+  <link rel="stylesheet" href="./dist/css/bullframe-dark-prefers.min.css?v4.0.0" />
 
   <!-- this is just for a nicer demo -->
   <link rel="stylesheet" href="./docs/test/css/style.css" />
-
-  <!-- enable HTML5 elements in all browsers,	and fix IE10 viewport on Windows 8 -->
-  <script src="./docs/test/js/vendor/html5shiv.js?v3.7.3"></script>
-  <script src="./docs/test/js/vendor/ie10-viewport-bug-workaround.js?v1..0"></script>
 </head>
 
 <body class="bf-responsive-typography bf-reduced-motion">
@@ -34,7 +30,7 @@
   <div class="bf-container bf-container--break-md">
     <header class="bf-t-center bf-m-b-3">
       <h1>bullframe<span>.css</span></h1>
-      <p class="bf-lead">Solid, fluid, IE-friendly Sass (SCSS) framework</p>
+      <p class="bf-lead">Solid, fluid, cross-browser Sass (SCSS) framework</p>
       <a class="bf-btn bf-btn--primary" href="https://github.com/marcop135/bullframe.css/archive/master.zip"
         role="button">Download</a>
       <a class="bf-btn" href="https://github.com/marcop135/bullframe.css" role="button">GitHub</a>
@@ -50,11 +46,6 @@
         CSS build in use:<br />
         <mark><code>bullframe-dark-prefers.min.css</code></mark>
       </p>
-      <p class="bf-t-center">
-        Polyfills:<br />
-        <code>html5shiv.js v3.7.3</code><br />
-        <code>ie10-viewport-bug-workaround.js v1..0</code>
-      </p>
       <p class="bf-t-center">
         <code>&lt;body&gt;</code> classes:<br />
         <code>.bf-responsive-typography</code><br />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "3.8.2",
+  "version": "4.0.0",
   "description": "Solid, fluid, IE-friendly Sass (SCSS) framework",
   "jsdelivr": "dist/css/bullframe.css",
   "unpkg": "dist/css/bullframe.css",
@@ -44,14 +44,20 @@
   },
   "homepage": "https://marcop135.github.io/bullframe.css/",
   "devDependencies": {
-    "browser-sync": "^2.26.14",
-    "cssnano": "^5.0.6",
+    "browser-sync": "^2.27.10",
+    "cssnano": "^5.1.12",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^8.0.0",
-    "gulp-postcss": "^9.0.0",
+    "gulp-postcss": "^9.0.1",
     "gulp-rename": "2.0.0",
     "gulp-replace": "^1.1.3",
-    "gulp-sass": "^4.1.0"
+    "gulp-sass": "^5.1.0",
+    "sass": "^1.54.4",
+    "stylelint": "^14.10.0",
+    "stylelint-config-recommended": "^9.0.0",
+    "stylelint-config-sass-guidelines": "^9.0.1"
   },
-  "dependencies": {}
+  "dependencies": {
+    "stylelint-scss": "^4.3.0"
+  }
 }

package/src/scss/bullframe-classless-dark-prefers.scss

@@ -1,5 +1,5 @@
-/*! custom build: bullframe-classless-dark-prefers */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-prefers-classless';
+/*! custom build: bullframe-classless-dark-prefers */
+// https://css-tricks.com/no-class-css-frameworks/
+
+@import 'bullframe-classless';
+@import 'utilities/utility-global-dark-prefers-classless';

package/src/scss/bullframe-classless-dark.scss

@@ -1,5 +1,5 @@
-/*! custom build: bullframe-classless-dark */
-// https://css-tricks.com/no-class-css-frameworks/
-
-@import 'bullframe-classless';
-@import 'utilities/utility-global-dark-classless';
+/*! custom build: bullframe-classless-dark */
+// https://css-tricks.com/no-class-css-frameworks/
+
+@import 'bullframe-classless';
+@import 'utilities/utility-global-dark-classless';

package/src/scss/bullframe-classless.scss

@@ -30,21 +30,13 @@
 // all about form elements
 @import 'forms/forms-normalization';
 @import 'forms/forms-styling';
-@import 'forms/forms-styling-ie-hacks';
 @import 'forms/forms-styling-select';
-@import 'forms/forms-styling-select-ie-hacks';
 @import 'forms/forms-styling-radio-checkbox';
+@import 'forms/forms-styling-range';
 
 // <table> and his elements
 @import 'miscellaneous/misc-tables';
 
-// improve several ARIA roles appearance
-@import 'miscellaneous/misc-accessibility';
-
-// shamy quick fixes...
-// https://csswizardry.com/2013/04/shame-css/
-@import 'miscellaneous/misc-shame';
-
 // this is just quick way to customise your styles
 // below these styles, you shouldn't override nothing but remove them
 // commented by default

package/src/scss/bullframe-dark-prefers.scss

@@ -1,4 +1,4 @@
-/*! custom build: bullframe-dark-prefers */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark-prefers';
+/*! custom build: bullframe-dark-prefers */
+
+@import 'bullframe';
+@import 'utilities/utility-global-dark-prefers';

package/src/scss/bullframe-dark.scss

@@ -1,4 +1,4 @@
-/*! custom build: bullframe-dark */
-
-@import 'bullframe';
-@import 'utilities/utility-global-dark';
+/*! custom build: bullframe-dark */
+
+@import 'bullframe';
+@import 'utilities/utility-global-dark';

package/src/scss/bullframe-utilities.scss

@@ -1,4 +1,4 @@
-/*! bullframe.css v3.8.2 | MIT License | https://github.com/marcop135/bullframe.css */
+/*! bullframe.css v4.0.0 | MIT License | https://github.com/marcop135/bullframe.css */
 /* custom build: bullframe-utilities */
 
 // colors, spacing and breakpoint variables

package/src/scss/bullframe.scss

@@ -30,9 +30,7 @@
 // all about form elements
 @import 'forms/forms-normalization';
 @import 'forms/forms-styling';
-@import 'forms/forms-styling-ie-hacks';
 @import 'forms/forms-styling-select';
-@import 'forms/forms-styling-select-ie-hacks';
 @import 'forms/forms-styling-radio-checkbox';
 @import 'forms/forms-styling-range';
 
@@ -61,11 +59,6 @@
 // clearfix, sr-only, float, inline/block/flex, and more
 @import 'utilities/utility-layout';
 
-// CSS filters 
-// https://developer.mozilla.org/en-US/docs/Web/CSS/filter
-// https://caniuse.com/css-filters
-@import 'utilities/utility-filters';
-
 @import 'utilities/utility-z-index';
 
 // reset margins and paddings adding a class

package/src/scss/forms/_forms-normalization.scss

@@ -150,8 +150,10 @@ select {
   word-wrap: normal;
 }
 
-[list]::-webkit-calendar-picker-indicator {
-  display: none;
+// Taken from Bootstrap Reboot v5.2
+// https://unpkg.com/browse/bootstrap@5.2.0/dist/css/bootstrap-reboot.css
+[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not([type='time'])::-webkit-calendar-picker-indicator {
+  display: none !important;
 }
 
 optgroup {

package/src/scss/forms/_forms-styling-radio-checkbox.scss

@@ -1,85 +1,84 @@
-// heavily inspired by '2020 toggles' by Aaron Iker
-// https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
-// https://codepen.io/aaroniker/pen/ZEYoxEY?editors=0100
-//
-// currently (June 2020), a few modern browsers support the "@supports" media rules
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-// https://caniuse.com/#feat=mdn-css_at-rules_supports_selector
-//
-// Anyway are safe and future-friendly because more browser compatibility
-// will come
-
-@supports (appearance: none) {
-  [type='checkbox'],
-  [type='radio'] {
-    appearance: none;
-
-    height: 1.8rem;
-    width: 1.8rem;
-
-    vertical-align: top;
-    position: relative;
-
-    border: 1px solid $bf-gray;
-
-    + label {
-      line-height: 1.8rem;
-      vertical-align: top;
-      margin-left: $bf-spacing-md-px;
-      margin-left: $bf-spacing-md-rem;
-    }
-
-    // add support for RTL languages
-    // Read more
-    // 1. http://bootstrap.rtlcss.com
-    // 2. https://rtlstyling.com/
-    *[dir='rtl'] & + label,
-    &[dir='rtl'] + label {
-      margin-left: 0;
-      margin-right: $bf-spacing-md-px;
-      margin-right: $bf-spacing-md-rem;
-    }
-
-    &:after {
-      content: '';
-      display: block;
-      position: absolute;
-    }
-
-    &:checked {
-      background-color: $bf-blue;
-      border-color: $bf-black;
-    }
-  }
-
-  [type='radio'] {
-    &:after {
-      width: 1.8rem;
-      height: 1.8rem;
-
-      left: -.05rem;
-      top: -.05rem;
-
-      border-radius: 50%;
-      background: $bf-white;
-
-      transform: scale(.35);
-    }
-  }
-
-  [type='checkbox'] {
-    &:after {
-      width: .6rem;
-      height: .8rem;
-
-      border: 2px solid $bf-white;
-      border-top: 0;
-      border-left: 0;
-
-      left: 35%;
-      top: 20%;
-
-      transform: rotate(43deg);
-    }
-  }
-}
+// heavily inspired by '2020 toggles' by Aaron Iker
+// https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
+// https://codepen.io/aaroniker/pen/ZEYoxEY?editors=0100
+//
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
+// https://caniuse.com/#feat=mdn-css_at-rules_supports_selector
+//
+// Anyway are safe and future-friendly because more browser compatibility
+// will come
+
+@supports (appearance: none) {
+  [type='checkbox'],
+  [type='radio'] {
+    appearance: none;
+
+    height: 1.8rem;
+    width: 1.8rem;
+
+    vertical-align: top;
+    position: relative;
+
+    border: 1px solid $bf-gray;
+
+    + label {
+      line-height: 1.8rem;
+      vertical-align: top;
+      margin-left: $bf-spacing-md-px;
+      margin-left: $bf-spacing-md-rem;
+    }
+
+    // add support for RTL languages
+    // Read more
+    // 1. http://bootstrap.rtlcss.com
+    // 2. https://rtlstyling.com/
+    *[dir='rtl'] & + label,
+    &[dir='rtl'] + label {
+      margin-left: 0;
+      margin-right: $bf-spacing-md-px;
+      margin-right: $bf-spacing-md-rem;
+    }
+
+    &:after {
+      content: '';
+      display: block;
+      position: absolute;
+    }
+
+    &:checked {
+      background-color: $bf-blue;
+      border-color: $bf-black;
+    }
+  }
+
+  [type='radio'] {
+    &:after {
+      width: 1.8rem;
+      height: 1.8rem;
+
+      left: -0.05rem;
+      top: -0.05rem;
+
+      border-radius: 50%;
+      background: $bf-white;
+
+      transform: scale(0.35);
+    }
+  }
+
+  [type='checkbox'] {
+    &:after {
+      width: 0.6rem;
+      height: 0.8rem;
+
+      border: 2px solid $bf-white;
+      border-top: 0;
+      border-left: 0;
+
+      left: 35%;
+      top: 20%;
+
+      transform: rotate(43deg);
+    }
+  }
+}

package/src/scss/forms/_forms-styling-range.scss

@@ -1,103 +1,99 @@
-// styling input range in modern browsers safely using the @supports CSS-at-rule
-// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
-//
-// standalone CodePen demo https://codepen.io/marcop135/pen/JjGrNMx
-
-@supports (appearance: none) {
-  [type='range'] {
-    appearance: none;
-    width: 100%;
-    height: 1.4rem;
-  }
-
-  [type='range']::-webkit-slider-thumb {
-    border: 0;
-    appearance: none;
-
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-top: -.25rem;
-    background-color: $bf-blue;
-    border-radius: 1.5rem;
-    transition: background-color .15s ease-in-out,
-      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &:active {
-      background-color: $bf-blue;
-    }
-  }
-
-  [type='range']::-moz-range-thumb {
-    border: 0;
-    appearance: none;
-
-    width: 1.5rem;
-    height: 1.5rem;
-    background-color: $bf-blue;
-    border-radius: 1.5rem;
-    transition: background-color .15s ease-in-out,
-      border-color .15s ease-in-out, box-shadow .15s ease-in-out;
-
-    &:active {
-      background-color: $bf-blue;
-    }
-  }
-
-  [type='range']::-webkit-slider-runnable-track {
-    color: transparent;
-    border-color: transparent;
-
-    width: 100%;
-    height: .65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
-
-  [type='range']::-moz-range-track {
-    color: transparent;
-    border-color: transparent;
-
-    width: 100%;
-    height: .65rem;
-    cursor: pointer;
-    background-color: $bf-gray-light-extra;
-  }
-
-  [type='range']:focus {
-    outline: none;
-
-    &::-webkit-slider-thumb {
-      box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-    }
-
-    &::-moz-slider-thumb {
-      box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-    }
-  }
-
-  [type='range']::-moz-focus-outer {
-    border: 0;
-  }
-
-  [type='range']:focus::-webkit-slider-thumb {
-    box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-  }
-
-  [type='range']:focus::-moz-range-thumb {
-    box-shadow: 0 0 0 .1rem $bf-white, 0 0 0 .2rem rgba(0, 123, 255, .25);
-  }
-
-  // disabled
-
-  [type='range']:disabled {
-    pointer-events: none;
-
-    &::-webkit-slider-thumb {
-      background-color: $bf-gray-light;
-    }
-
-    &::-moz-slider-thumb {
-      background-color: $bf-gray-light;
-    }
-  }
-}
+// styling input range in modern browsers safely using the @supports CSS-at-rule
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
+//
+// standalone CodePen demo https://codepen.io/marcop135/pen/JjGrNMx
+
+@supports (appearance: none) {
+  [type='range'] {
+    appearance: none;
+    width: 100%;
+    height: 1.4rem;
+  }
+
+  [type='range']::-webkit-slider-thumb {
+    border: 0;
+    appearance: none;
+
+    width: 1.5rem;
+    height: 1.5rem;
+    margin-top: -0.25rem;
+    background-color: $bf-blue;
+    border-radius: 1.5rem;
+    transition: background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:active {
+      background-color: $bf-blue;
+    }
+  }
+
+  [type='range']::-moz-range-thumb {
+    border: 0;
+    appearance: none;
+
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: $bf-blue;
+    border-radius: 1.5rem;
+    transition: background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+    &:active {
+      background-color: $bf-blue;
+    }
+  }
+
+  [type='range']::-webkit-slider-runnable-track {
+    color: transparent;
+    border-color: transparent;
+
+    width: 100%;
+    height: 0.65rem;
+    cursor: pointer;
+    background-color: $bf-gray-light-extra;
+  }
+
+  [type='range']::-moz-range-track {
+    color: transparent;
+    border-color: transparent;
+
+    width: 100%;
+    height: 0.65rem;
+    cursor: pointer;
+    background-color: $bf-gray-light-extra;
+  }
+
+  [type='range']:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
+
+    &::-moz-slider-thumb {
+      box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
+  }
+
+  [type='range']::-moz-focus-outer {
+    border: 0;
+  }
+
+  [type='range']:focus::-moz-range-thumb {
+    box-shadow: 0 0 0 0.1rem $bf-white, 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+  }
+
+  // disabled
+
+  [type='range']:disabled {
+    pointer-events: none;
+
+    &::-webkit-slider-thumb {
+      background-color: $bf-gray-light;
+    }
+
+    &::-moz-slider-thumb {
+      background-color: $bf-gray-light;
+    }
+  }
+}