bullframe.css 3.8.1 → 4.0.1

package/.browserslistrc

@@ -1,6 +1,10 @@
-# https://github.com/browserslist/browserslist#readme
-
-last 2 major versions
-not dead
-ie 6-8
-iOS 7
+# https://github.com/browserslist/browserslist#readme
+
+>= 0.5%
+last 2 major versions
+not dead
+Chrome >= 60
+Firefox >= 60
+Firefox ESR
+iOS >= 12
+Safari >= 12

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,19 +1,35 @@
 # Changes to bullframe.css
 
+## 4.0.1 (August 12, 2022)
+
+* Updated `.browserlistrc`
+* Updated `package.json` description and tags
+
+## 4.0.0 (August 11, 2022)
+
+* [breaking changes] **Dropped support for I8, IE9, and IE10**
+* [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)
+
+* 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)
 
 * [bug fixes] Add missing compiled CSS files
 
 ## 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

@@ -3,7 +3,6 @@
 <p>
   <a href="https://www.npmjs.com/package/bullframe.css"><img src="https://img.shields.io/npm/v/bullframe.css.svg?style=flat-square" alt="NPM page"></a>
   <a href="https://github.com/marcop135/bullframe.css/commits"><img src="https://img.shields.io/github/last-commit/marcop135/bullframe.css?style=flat-square" alt="GitHub last commit"></a>
-  <a href="https://snyk.io/test/npm/bullframe.css"><img src="https://snyk.io/test/npm/bullframe.css/badge.svg?style=flat-square" alt="Known Vulnerabilities" data-canonical-src="https://snyk.io/test/npm/bullframe.css" style="max-width:100%;"></a>
   <a href="https://github.com/marcop135/bullframe.css/blob/master/LICENSE"><img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT license"></a>
 </p>
 
@@ -13,46 +12,27 @@
 
 [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, responsive, IE8+ collection of default HTML UI elements ([atoms](https://bradfrost.com/blog/post/atomic-web-design)) for your Sass project.
+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.
 
-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!_
+You could be easily use it for marketing pages, blog posts, e-commerce product listings, help and documentation.
 
-<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
 - Sass architecture
 - CSS BEM
 - Responsive typography
 - Dark mode
 - RTL support
-- Get utility classes (e.g. `<h2 class="bf-h1">`) or not (no-class / classless framework)
-- Isolated utility classes to avoid conflicts between frameworks' classes
-- [`bullframe-classless.min.css`](https://github.com/marcop135/bullframe.css/blob/master/dist/css/bullframe-classless.min.css) is just 10KB~ min+gzip 🎉
-
-## Internet Explorer usage and support
-
-Do people still use Internet Explorer?
-
-Short answer: **yes!** Enterprise-level companies, legacy business applications, accessibility-focused projects and some non-tech-savvy older people.
-[Long answer](https://www.quora.com/Do-people-still-use-Internet-Explorer-in-2020)
-
-[Browser worldwide usage comparison](https://gs.statcounter.com/browser-market-share/desktop/worldwide#monthly-201904-202004-bar)
-
-Read this [Lea Verou’s Twitter thread](https://twitter.com/LeaVerou/status/1246252696602128384) to get more developers' points of view.
-
-Bootstrap v5 [dropped IE10 and IE11 support](https://github.com/twbs/bootstrap/pull/30377). Read the [Hacker News thread](https://news.ycombinator.com/item?id=22802003).
+- Gulp-friendly
+- Get all utility classes (e.g. `<h2 class="bf-h1">`) or no classes at all (no-class / classless framework)
+- [`bullframe-classless.min.css`](https://github.com/marcop135/bullframe.css/blob/master/dist/css/bullframe-classless.min.css) is just 13KB~ minified 🎉
 
 ## What's included
 
@@ -67,8 +47,6 @@ bullframe.css/
     │   ├── ...
     │   ├── bullframe-dark.css
     │   ├── bullframe-dark.min.css
-    │   ├── bullframe-dark-prefers.css
-    │   ├── bullframe-dark-prefers.min.css
     │   ├── ...
     │   ├── bullframe-utilities.css
     │   ├── bullframe-utilities.min.css
@@ -98,10 +76,6 @@ bullframe.css/
 ...
 ```
 
-<br>
-
----
-
 ## Getting started
 
 ### Download
@@ -110,27 +84,24 @@ bullframe.css/
 
 ### CDN
 
-Get the latest release of the main build
-
-JSDelivr (latest release, ready for production)
+JSDelivr
 
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
 ```
 
-Skypack (latest release, ready for production)
+Skypack
 
 ```html
 <link rel="stylesheet" href="https://cdn.skypack.dev/bullframe.css/dist/css/bullframe.min.css">
 ```
 
-UNPKG (latest release, not ready for production)
+UNPKG
 
 ```html
 <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:
@@ -164,76 +135,24 @@ 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>
+    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 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">
-<head>
-  <meta charset="utf-8">
-  <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-ie10+.min.css"
-    integrity="sha384-EfcW9YC4HRjVRc1MalllL1YMixPPE9Uu47eUGKvM8mHU+u16QvYZeS5JzLa93lxm"
-    crossorigin="anonymous">
-</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>
@@ -252,15 +171,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.
@@ -268,14 +185,12 @@ Write semantic HTML and get nice styles and cross-browser normalization.
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-classless.min.css">
 
-<!-- (optional) center the page styling the <body> element -->
+<!-- Center the page (optional)  -->
 <style>
   body {
     margin-left: auto;
     margin-right: auto;
-    padding: 15px; /* for old IE only */
     padding: 1.5rem;
-    max-width: 800px; /* for old IE only */
     max-width: 80rem;
   }
 </style>
@@ -283,9 +198,9 @@ Write semantic HTML and get nice styles and cross-browser normalization.
 
 ### Dark themes
 
-There are two builds that enable a dark (dark mode) theme by default in all browsers.
+There are two builds: `bullframe-dark.css` enable a dark theme, and `bullframe-dark-prefers.css` follows the system default settings.
 
-`bullframe-dark.css`
+#### `bullframe-dark.css`
 
 CDN
 
@@ -293,9 +208,9 @@ CDN
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css/dist/css/bullframe-dark.min.css">
 ```
 
-`bullframe-dark-prefers.css`
+#### `bullframe-dark-prefers.css`
 
-Enables dark only if the user prefers it, in browsers that support the `prefers-color-scheme` media query.
+It enables the dark theme IONLY if the user prefers it, in browsers that support the `prefers-color-scheme` media query.
 Read more [on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
 
 CDN
@@ -304,24 +219,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 |
 | ------------- | ----------- |
@@ -345,40 +249,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         |
@@ -482,9 +352,9 @@ Add some `margin` as a gutter where needed.
 | `.bf-t-weight-700` | Sets `font-weight` to `700` (AKA bold) |
 | `.bf-t-weight-800` | Sets `font-weight` to `800` (AKA black) |
 | `.bf-text-break` | Sets `word-wrap` to a `break-word`, applied by default to the `body` |
-| `.bf-text-truncate` | Truncates a very long text and replaces the missing text with an ellipsis |
-| `.bf-text-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) |
-| `.bf-text-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) |
+| `.bf-t-truncate` | Truncates a very long text and replaces the missing text with an ellipsis |
+| `.bf-t-truncate--multiline-2` | Truncates a long doubled line text and replaces the missing text with an ellipsis (no IE) |
+| `.bf-t-truncate--multiline-3` | Truncates a long tripled line text and replaces the missing text with an ellipsis (no IE) |
 | `.bf-no-select` | Blocks user text selection |
 | `.bf-font-sans-serif` | Sets `font-family` to a `sans-serif`, and a combination of cross-browser system UI sans-serif font families  |
 | `.bf-font-serif` | Sets `font-family` to a `serif`, and a combination of cross-browser system UI serif font families |
@@ -496,7 +366,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
 
@@ -542,35 +412,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
 
@@ -578,10 +431,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!