bullframe.css 3.8.2 → 4.0.0

package/.browserslistrc

@@ -1,6 +1,6 @@
-# https://github.com/browserslist/browserslist#readme
-
-last 2 major versions
-not dead
-ie 6-8
+# https://github.com/browserslist/browserslist#readme
+
+last 2 major versions
+not dead
+ie 6-8
 iOS 7

package/.stylelintrc.json

@@ -0,0 +1,10 @@
+{
+  "extends": "stylelint-config-recommended",
+  "plugins": ["stylelint-scss"],
+  "rules": {
+    "at-rule-no-unknown": null,
+    "scss/at-rule-no-unknown": true,
+    "no-descending-specificity": null,
+    "no-invalid-position-at-import-rule": null
+  }
+}

package/CHANGELOG.md

@@ -1,9 +1,15 @@
 # Changes to bullframe.css
 
+## 4.0.0 (August 11, 2022)
+
+* [breaking changes] **Dropped support for I8, IE9, and IE10 support**
+* [breaking changes] Upgraded all npm packages to minor and major latest versions (e.g. gulp-sass v5 now in use)
+* Cleaned up `README.md`
+
 ## 3.8.2 (June 26, 2021)
 
-* Upgrade cssnano, autoprefixer and postcss plugins to major versions [(a6a9ecc)](https://github.com/marcop135/bullframe.css/commit/a6a9ecc3b52a30e1a5c4408967268d22f46a8e2c)
-* Clean up `README.md`
+* Upgraded cssnano, autoprefixer and postcss plugins to major versions [(a6a9ecc)](https://github.com/marcop135/bullframe.css/commit/a6a9ecc3b52a30e1a5c4408967268d22f46a8e2c)
+* Cleaned up `README.md`
 
 ## 3.8.1 (June 22, 2021)
 
@@ -11,14 +17,14 @@
 
 ## 3.8.0 (June 22, 2021)
 
-* [breaking changes] Revert html/body `height` and `body` `min-height` to `auto` (default value) to avoid web app scrollbar issues
-* Add support for Skypack CDN
-* Add Synk vuln badge in `README.md`
+* [breaking changes] Reverted html/body `height` and `body` `min-height` to `auto` (default value) to avoid web app scrollbar issues
+* Added support for Skypack CDN
+* Added Synk vuln badge in `README.md`
 
 ## 3.7.0 (April 24, 2021)
 
 * [breaking changes] Set html/body `height` and `body` `min-height` to `100%` to help with backgrounds and centering [(8239677)](https://github.com/marcop135/bullframe.css/)
-* [bug fixes] Add missing margin/padding spacing utilities to `utility-spacing.scss` [(e1cdf4c)](https://github.com/marcop135/bullframe.css/commit/e1cdf4ccfd70662a3d1babe2d5d0457b8ef6e569)
+* [bug fixes] Added missing margin/padding spacing utilities to `utility-spacing.scss` [(e1cdf4c)](https://github.com/marcop135/bullframe.css/commit/e1cdf4ccfd70662a3d1babe2d5d0457b8ef6e569)
 * [enhancements] Removed W3C-invalid CSS properties/values from SCSS files [(2791b83)](https://github.com/marcop135/bullframe.css/commit/2791b83eab872abe92a2fd6cc3b3bc8d684fcc36)
 * [enhancements] Added Sass [@debug](https://sass-lang.com/documentation/at-rules/debug) rule to debugging utility [(969fcf3c)](https://github.com/marcop135/bullframe.css/commit/969fcf3ccb474f5bc5888841d479216b3e54de0a)
 

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2021 Marco Pontili
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+MIT License
+
+Copyright (c) 2021 Marco Pontili
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.

package/README.md

@@ -12,25 +12,19 @@
 
 [https://github.com/marcop135/bullframe.css](https://github.com/marcop135/bullframe.css)
 
-bullframe.css is a Sass (SCSS) framework that works in all browsers, modern or not.
+bullframe.css is a Sass (SCSS) framework that works in a wide range of desktop and mobile browsers.
+It's a cross-browser and responsive collection of default HTML UI elements ([atoms](https://bradfrost.com/blog/post/atomic-web-design)) for your Sass project.
+It could be easily used for marketing pages, blog posts, e-commerce product listings, help and documentation.
 
-It's a cross-browser (blink/webkit/gecko/trident), responsive, IE8+ collection of default HTML UI elements ([atoms](https://bradfrost.com/blog/post/atomic-web-design)) for your Sass project.
-
-1. Add a good HTML template
-2. Write semantic HTML5
-3. Add a few utility classes (optional)
-4. Add JS polyfills (optional)
-5. _...ready to go everywhere!_
-
-<br>
+**Just add bullframe.css, write semantic HTML5, and you are ready to go everywhere!**
 
 ## Best features
 
-- IE8+ support and a wide range of desktop and mobile browsers
+- Wide range of desktop and mobile browsers support
 - Add responsive-ness and normalize as much as possible HTML elements *out-of-the-box*
 - Progressive responsive web design focused
 - Responsive, cross-browser, HTML5 form elements by default
-- A simple 12-columns fluid grid system with IE8+ support
+- A simple 12-columns fluid grid system
 - Sass architecture
 - CSS BEM
 - Responsive typography
@@ -84,10 +78,6 @@ bullframe.css/
 ...
 ```
 
-<br>
-
----
-
 ## Getting started
 
 ### Download
@@ -114,7 +104,6 @@ UNPKG (latest release, not ready for production)
 <link rel="stylesheet" href="https://unpkg.com/bullframe.css">
 ```
 
-
 ### npm
 
 Once you have installed [Node.js](https://nodejs.org/en/download/), you can run this command to install bullframe.css into your project:
@@ -148,55 +137,6 @@ gulp
 
 ### HTML
 
-Add some HTML markup, and two JS polyfills (if you need a wide cross-browser support).
-
-Tip: if you need min/max-width CSS3 Media Queries support in IE8 (e.g. mobile-first responsive design), you could polyfill it with [respond.js](https://github.com/scottjehl/Respond).
-
-Tip: Improve the JS polyfills security via the `integrity` and `crossorigin` attributes. [Read more](https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attributes)
-
-Caveats: [IE8 and Respond.js](https://getbootstrap.com/docs/3.4/getting-started/#support-ie8-respondjs) caveats.
-
-#### All browsers - IE8+
-
-```html
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <title>bullframe.css starter template</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  
-  <!-- bullframe.css: use latest compiled and minified version -->
-  <link
-    type="text/css"
-    rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe.min.css"
-    integrity="sha384-HpmTC4+Y1tpRsyC0caOaOtsqEfBQqC12iB2WOT0CAHGE116qurJw2PwlJI62SIUH"
-    crossorigin="anonymous">
-
-  <!-- polyfills: enable HTML5 elements in old browsers, and fix IE10 viewport on Windows 8 -->
-  <script
-    src="https://cdn.jsdelivr.net/combine/npm/html5shiv@3.7.3,npm/ie10-viewport-bug-workaround.js@1.0.0"
-    integrity="sha384-qBVh9Nh9vwp+qqJMBTOrfjBPwz5RMDGc4lscK3+4F6dtIUo89TeUhS9wiDPhgpi5"
-    crossorigin="anonymous"
-  ></script>
-</head>
-
-<body>
-  <div class="bf-container">
-    <!-- Add your site or application content here -->
-    <p>Hello world! This is a bullframe.css IE8+ starter template</p>
-  </div>
-  
-</body>
-</html>
-```
-
-#### IE11 and modern browsers
-
-Improve the JS polyfills security via the `integrity` and `crossorigin` attributes. [Read more](https://stackoverflow.com/questions/32039568/what-are-the-integrity-and-crossorigin-attributes)
-
 ```html
 <!doctype html>
 <html lang="en">
@@ -207,17 +147,14 @@ Improve the JS polyfills security via the `integrity` and `crossorigin` attribut
   
   <!-- bullframe.css: use latest compiled and minified version -->
   <link
-    type="text/css"
     rel="stylesheet"
-    href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-ie10+.min.css"
-    integrity="sha384-EfcW9YC4HRjVRc1MalllL1YMixPPE9Uu47eUGKvM8mHU+u16QvYZeS5JzLa93lxm"
-    crossorigin="anonymous">
+    href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-ie10+.min.css">
 </head>
 
 <body>
   <div class="bf-container">
     <!-- Add your site or application content here -->
-    <p>Hello world! This is a bullframe.css IE11+ starter template</p>
+    <p>Hello world! This is a bullframe.css starter template</p>
   </div>
   
 </body>
@@ -236,15 +173,13 @@ Click on the links below, and start a new pen in CodePen using bullframe.css.
 - [Dark theme](https://codepen.io/pen?template=ExPmzBV)
 - [Dark `prefers-color-scheme`](https://codepen.io/pen?template=NWxjVQO)
 
-<br>
-
----
-
 ## Customization
 
 ### No classes (class-less)
 
+What means "classless"?
 No classes, no utilities. Feel free to add yours and create your custom components.
+Read more on [css-tricks.com](https://css-tricks.com/no-class-css-frameworks/).
 
 Just drop the snippet below in the `<head>` of your webpage, and the job is done!
 Write semantic HTML and get nice styles and cross-browser normalization.
@@ -286,24 +221,13 @@ CDN
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-dark-prefers.min.css">
 ```
 
-### No IE hacks, IE10+
-
-I used some IE hacks to fix form elements in IE8 and IE9.
-If you don't like hacks in your (S)CSS code, there are six IE10+ builds (e.g. `bullframe-ie10+.css` or `bullframe-utilities-ie10+.css`) where IE8-9 hacks are removed.
-
-CDN
-
-```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-ie10+.min.css">
-```
-
 ### Utilities - Reference
 
 A set of utilities to create and customise bullframe.css:
 
 #### Grid system
 
-A simple but powerful IE8+ flexible Grid System (+ a Flexbox IE10+ alternative)
+*Breakpoints: 576, 768, 992 and 1200 pixels*
 
 | Utility class | Description |
 | ------------- | ----------- |
@@ -327,40 +251,6 @@ A simple but powerful IE8+ flexible Grid System (+ a Flexbox IE10+ alternative)
 | `.bf-col-12` | Sets a floated container with a custom padding and a `width` of `100%` |
 | `.no-gutters` | Set `margin-left`, `margin-right`, `padding-left` and `padding-right` to `0` — to be applied to row and column containers |
 
-Breakpoints: 576, 768, 992 and 1200 pixels
-
-##### Grid system with Flexbox (IE10+)
-
-You may use `/mixins/_mixin-grid-flex.scss` mixins to easily create a Grid System in Flexbox with no extra HTML classes.
-
-Add some `margin` as a gutter where needed.
-
-``` scss
-// create a Flexbox parent
-@mixin flex-container {
-  display: flex !important;
-  flex-wrap: wrap !important;
-}
-
-// Make a child 50% of the width
-@mixin flex-50 {
-  flex: 0 0 100% !important;
-}
-
-// Make a child 70% of the width
-@mixin flex-70 {
-  flex: 0 0 70% !important;
-}
-
-// Make a child 25% of the width
-@mixin flex-25 {
-  flex: 0 0 25% !important;
-}
-
-...
-...
-```
-
 #### Layout
 
 | Utility class       | Description         |
@@ -478,7 +368,7 @@ Add some `margin` as a gutter where needed.
 | `.bf-h5` | Matches the font styling of a `h5` |
 | `.bf-h6` | Matches the font styling of a `h6` |
 | `.bf-lead` | Sets `font-size` to `125%` |
-| `.bf-responsive-typography` | Scales `font-size` from a minimum of `1.6rem` (AKA 16px) to a maximum of `1.9rem` using `calc` and some `CSS custom properties`, **ignored in IE and Opera Mini**, [see a demo](https://codepen.io/marcop135/pen/eYmPmJm) |
+| `.bf-responsive-typography` | Scales `font-size` from a minimum of `1.6rem` (AKA 16px) to a maximum of `1.9rem` using `calc` and some `CSS custom properties` |
 
 #### Lists
 
@@ -524,35 +414,18 @@ Add some `margin` as a gutter where needed.
 | ------------- | ----------- |
 | `.bf-reduced-motion` | Adds a combinations of properties and values to an element (e.g. the `body`) removing all motion-based animations if preferred by the user, [read more](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) |
 
-<br>
-
----
-
 ## Browser compatibility
 
 ### Desktop browsers
 
-- IE 8+
 - Latest stable two: Firefox, Chrome, Edge, Safari, Opera
+- IE 11+
 
 ### Mobile browsers
 
-- Latest stable: Firefox, Chrome, Edge, Opera
-- Mobile Safari iOS 7+
-- IE Mobile 11
-
-### Proxy browsers
-
-- Latest Stable: Opera Mobile’s Turbo mode
-- Latest Stable: Opera Mini
-
-You can take a look at the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file for [Autoprefixer](https://github.com/postcss/autoprefixer)
+- Latest stable: Firefox, Chrome, Edge, Opera, Mobile Safari
 
-### Tested on real browsers
-
-This project is tested in a wide range of browsers using also [BrowserStack](https://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
-
-![BrowserStack Logo](./docs/images-readme/browserstack-logo.png)
+You might take a look at the [.browserslistrc](https://github.com/marcop135/bullframe.css/blob/master/.browserslistrc) file for [Autoprefixer](https://github.com/postcss/autoprefixer)
 
 ### Screenshots
 
@@ -560,10 +433,6 @@ How can I quickly see if every HTML element works well on all browsers?
 
 Take a look at some [screenshots and screencasts](https://github.com/marcop135/bullframe.css/tree/master/docs/screenshots-screencasts), organized by rendering engines (blink, gecko, trident, webkit).
 
-## Become a sponsor
-
-[Sponsor me](https://github.com/sponsors/marcop135) and support my front-end efforts and open source!
-
 ## Contributors
 
 [@englishextra](https://github.com/englishextra) the project is still live thanks to you!