Merge branch 'release/v5.4.0'

.github/FUNDING.yml

@@ -1,2 +1,2 @@
 github: [bramsmulders]
-custom: ["https://www.paypal.me/smuldersbram/EUR"]
+custom: ['https://www.paypal.me/smuldersbram/EUR']

.github/ISSUE_TEMPLATE/bug-report.md

@@ -4,25 +4,27 @@ about: Create a report to help us improve
 title: ''
 labels: bug
 assignees: ''
-
 ---
 
 <!-- You must use the issue template below when submitting a bug -->
 
 **Describe The Bug:**
+
 <!-- A clear and concise description of what the bug is. -->
 
 **To Reproduce:**
+
 <!-- Steps to reproduce the behavior. -->
 
 **Expected behavior:**
+
 <!-- A clear and concise description of what you expected to happen. -->
 
 **Environment:**
 
-* **Supple CSS Version**:
-* **Node.js Version**: <!-- node -v -->
-* **NPM Version**: <!-- npm -v -->
-* **Browser**:
+- **Supple CSS Version**:
+- **Node.js Version**: <!-- node -v -->
+- **NPM Version**: <!-- npm -v -->
+- **Browser**:
 
 <!-- Click the "Preview" tab before you submit to ensure the formatting is correct. -->

.github/ISSUE_TEMPLATE/feature-request.md

@@ -4,20 +4,22 @@ about: Suggest an idea for this project
 title: ''
 labels: enhancement
 assignees: ''
-
 ---
 
 **Is your feature request related to a problem? Please describe:**
+
 <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
 
 **Describe the solution you'd like:**
+
 <!-- A clear and concise description of what you want to happen. -->
 
 **Describe alternatives you've considered:**
+
 <!-- A clear and concise description of any alternative solutions or features you've considered. -->
 
 **Additional context:**
-<!-- Add any other context or screenshots about the feature request here. -->
 
+<!-- Add any other context or screenshots about the feature request here. -->
 
 <!-- Click the "Preview" tab before you submit to ensure the formatting is correct. -->

.github/ISSUE_TEMPLATE/support-request.md

@@ -4,23 +4,23 @@ about: Need help?
 title: ''
 labels: question
 assignees: ''
-
 ---
 
 <!-- You must use the issue template below when submitting a support request -->
 
 **Describe Your Problem:**
-<!-- A clear and concise description of what problem you are trying to solve. -->
 
+<!-- A clear and concise description of what problem you are trying to solve. -->
 
 **Screenshots:**
+
 <!-- If applicable, add screenshots to help explain your problem. -->
 
 **Environment:**
 
-* **Supple CSS Version**:
-* **Node.js Version**: <!-- node -v -->
-* **NPM Version**: <!-- npm -v -->
-* **Browser**:
+- **Supple CSS Version**:
+- **Node.js Version**: <!-- node -v -->
+- **NPM Version**: <!-- npm -v -->
+- **Browser**:
 
 <!-- Click the "Preview" tab before you submit to ensure the formatting is correct. -->

.stylelintrc

@@ -1,4 +1,7 @@
 {
-  "extends": "@supple-kit/stylelint-config-supple",
+  "extends": [
+    "@supple-kit/stylelint-config-supple",
+    "stylelint-config-prettier"
+  ],
   "ignoreFiles": ["_test/css/*", "vendor/**/*"]
 }

CHANGELOG.md

@@ -2,6 +2,11 @@
 
 All notable changes to this project will be documented in this file.
 
+## 5.4.0 - 11-february-2022
+
+- Fixed a bug where `responsive.lock` didn't work on any root element.
+- General housekeeping by including prettier & upgrade stylelint
+
 ## 5.3.0 - 10-november-2021
 
 - Fixed a bug where `px` based media queries were not converted to `em`

CONTRIBUTING.md

@@ -8,20 +8,19 @@ the developers managing and developing this open source project. In return,
 they should reciprocate that respect in addressing your issue or assessing
 patches and features.
 
-
 ## Using the issue tracker
 
 The issue tracker is the preferred channel for [bug reports](#bugs),
 [features requests](#features) and [submitting pull
 requests](#pull-requests), but please respect the following restrictions:
 
-* Please **do not** use the issue tracker for personal support requests.
+- Please **do not** use the issue tracker for personal support requests.
 
-* Please **do not** derail or troll issues. Keep the discussion on topic and
+- Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.
 
-
 <a name="bugs"></a>
+
 ## Bug reports
 
 A bug is a _demonstrable problem_ that is caused by the code in the repository.
@@ -63,17 +62,17 @@ Example:
 > causing the bug, and potential solutions (and your opinions on their
 > merits).
 
-
 <a name="features"></a>
+
 ## Feature requests
 
 Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
+fits with the scope and aims of the project. It's up to _you_ to make a strong
 case to convince the project's developers of the merits of this feature. Please
 provide as much detail and context as possible.
 
-
 <a name="pull-requests"></a>
+
 ## Pull requests
 
 Good pull requests - patches, improvements, new features - are a fantastic
@@ -134,14 +133,14 @@ project:
    git push origin <topic-branch-name>
    ```
 
-10. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
-    with a clear title and description.
+7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+   with a clear title and description.
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project owner to
 license your work under the same license as that used by the project.
 
-
 <a name="maintainers"></a>
+
 ## Maintainers
 
 If you have commit access, please follow this process for merging patches and

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Bram Smulders
+Copyright (c) 2017 - today Bram Smulders
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,47 +8,48 @@ Supple CSS is a reliable and testable [Sass](https://sass-lang.com/) framework i
 
 ## Table of contents
 
-* [Why use Supple](#why-use-supple)
-* [Features](#features)
-* [Browser support](#browser-support)
-* [Installation](#installation)
-* [Getting started](#getting-started)
+- [Why use Supple](#why-use-supple)
+- [Features](#features)
+- [Browser support](#browser-support)
+- [Installation](#installation)
+- [Getting started](#getting-started)
 
 ## Why use Supple
 
 > It is a small but powerful (S)CSS framework designed especially with modern browsers in mind. The framework is made with an eye on the future. It uses new CSS webstandards like custom properties, Grid layout, Flexbox, logical properties.
 
 Supple provides little to no design. This means that the style and design of your site are left entirely up to you. Because Supple gives you lots of customizable foundations you only need to add the final layer: **UI**.
 
-
 ## Features
+
 A grasp of Supple's features:
 
-* Sensible, powerful [CSS reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) for web applications.
-* Suite of functions and mixins for speedy development.
-* CSS Grid & Flexbox objects for creating layouts.
-* Objects for reusable solutions to common features.
-* Variety of utility classes for the most common needs like visually hiding, spacing, and more.
+- Sensible, powerful [CSS reset](https://hankchizljaw.com/wrote/a-modern-css-reset/) for web applications.
+- Suite of functions and mixins for speedy development.
+- CSS Grid & Flexbox objects for creating layouts.
+- Objects for reusable solutions to common features.
+- Variety of utility classes for the most common needs like visually hiding, spacing, and more.
 
 ### Size
 
 The framework including all modules weighs less than **1.6kB** (GZIP-ed). With this small payload, you have the power to build an entire website without even writing a single line of CSS. You can reduce the payload even further by only including the modules you need, and configure those modules to your needs.
 
 ## Browser support
+
 Supple supports all major browsers which can render the following features:
 
-* [CSS Variables (Custom Properties)](https://caniuse.com/css-variables)
-* [CSS Logical Properties](https://caniuse.com/css-logical-props)
-* [CSS Grid Layout](https://caniuse.com/css-grid)
-* [CSS Flexible Box Layout (Flexbox)](https://caniuse.com/flexbox)
+- [CSS Variables (Custom Properties)](https://caniuse.com/css-variables)
+- [CSS Logical Properties](https://caniuse.com/css-logical-props)
+- [CSS Grid Layout](https://caniuse.com/css-grid)
+- [CSS Flexible Box Layout (Flexbox)](https://caniuse.com/flexbox)
 
 Basically that comes down to:
 
-* Chromium-based browsers (Chrome, Edge, Brave, Opera)
-* WebKit-based browsers (Safari, iOS Safari)
-* Firefox (Gecko)
+- Chromium-based browsers (Chrome, Edge, Brave, Opera)
+- WebKit-based browsers (Safari, iOS Safari)
+- Firefox (Gecko)
 
-**Note**: Internet Explorer is *not* supported. Supple relies mostly on CSS Custom Properties, which are not supported and cannot be polyfilled.
+**Note**: Internet Explorer is _not_ supported. Supple relies mostly on CSS Custom Properties, which are not supported and cannot be polyfilled.
 
 ## Installation
 
@@ -58,7 +59,7 @@ Supple is built with the latest version of [Sass](https://sass-lang.com/) so you
 
 ### Install
 
-* npm: `npm install @supple-kit/supple-css`
+- npm: `npm install @supple-kit/supple-css`
 
 ## Getting started
 
@@ -84,11 +85,11 @@ Below are some examples of how to use and structure the framework:
   $breakpoints: (
     lap: 320px,
     desk: 960px,
-  ),
+  )
 );
 
 @use 'node_modules/@supple-kit/supple-css/objects/mesh/variables' with (
-  $columns: 24,
+  $columns: 24
 );
 ```
 
@@ -115,7 +116,7 @@ Below are some examples of how to use and structure the framework:
   $breakpoints: (
     lap: 320px,
     desk: 960px,
-  ),
+  )
 );
 ```
 
@@ -142,65 +143,73 @@ import './index.scss';
 All Supple's modules are created based on the [ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) methodology. It is advised you to read ITCSS documentation to fully grasp the ideas about the methodology.
 
 ### Settings
+
 This layer is the first layer and holds any global settings for your project. It should only house settings that need to be accessed from anywhere.
 
-* [settings/defaults](settings/defaults), Supple's core settings.
+- [settings/defaults](settings/defaults), Supple's core settings.
 
 **Note**: Any variable that does not need to be accessed globally should belong in the module to which it relates.
 
 ### Tools
+
 The tools layer houses your globally available tooling, mixins, and functions.
 
-* [tools](tools).
+- [tools](tools).
 
 **Note**: Any mixin or function that does not need to be accessed globally should belong in the module template to which it relates.
 
 ### Generic
+
 It contains ground-zero styles like global box-sizing rules, CSS resets, and so on.
 
-* [generic/reset](generic/reset), a reset of sensible defaults suitable for web applications.
+- [generic/reset](generic/reset), a reset of sensible defaults suitable for web applications.
 
 ### Elements
+
 These are bare, unclassed HTML elements. The Elements layer binds onto HTML element (or 'type') selectors only.
 
 Elements are most likely the last layer in which we'd find element-based selectors, and is very rarely added to or changed after initial setup. Once we have defined element-level styles, all additions and deviations should be implemented using classes.
 
 **Note**: Because Supple is a design-free framework this layer is empty.
 
 ### Objects
+
 This layer is concerned with styling non-cosmetic design patterns, or 'objects'.
 
-* [objects/list-clean](objects/list-clean), strip appearance from lists by removing their bullets and indents
-* [objects/retain](objects/retain), page-level constraining and wrapping elements
-* [objects/layout](objects/layout), arrange items horizontally on the inline-axis with flexbox.
-* [objects/mesh](objects/mesh), fluid & extensible grid system based on CSS grid.
-* [objects/aspect-ratio](objects/aspect-ratio), retain a specific aspect ratio but adapt to elements of variable widths
-* [objects/flow](objects/flow), create flow and rhythm between elements.
+- [objects/list-clean](objects/list-clean), strip appearance from lists by removing their bullets and indents
+- [objects/retain](objects/retain), page-level constraining and wrapping elements
+- [objects/layout](objects/layout), arrange items horizontally on the inline-axis with flexbox.
+- [objects/mesh](objects/mesh), fluid & extensible grid system based on CSS grid.
+- [objects/aspect-ratio](objects/aspect-ratio), retain a specific aspect ratio but adapt to elements of variable widths
+- [objects/flow](objects/flow), create flow and rhythm between elements.
 
 All Objects are prefixed with `o-`.
 
 ### Components
+
 This layer contains our recognizable components, chunks of UI.
 
 All Components are prefixed with `c-`.
 
 **Note**: Because Supple is a design-free framework this layer is empty. You can add your own components to your project.
 
 ### Utilities
+
 This layer contains some handy helpers & overrides. This is the most specific layer of the application which overrides everything defined before.
 
-* [utilities/columns](utilities/columns), provides a columns custom property for use in objects or components.
-* [utilities/colspan](utilities/colspan), provides a colspan custom property for use in objects or components.
-* [utilities/colstart](utilities/colstart), provides a column start custom property for use in objects or components.
-* [utilities/offset](utilities/offset), provides a offset custom property for use in objects or components.
-* [utilities/clearfix](utilities/clearfix), clears floats.
-* [utilities/spacing](utilities/spacing), utility classes to put specific spacing values onto elements.
-* [utilities/visually-hidden](utilities/visually-hidden), hides an element visually while still allowing the content to be accessible.
-* [utilities/hidden](utilities/hidden), completely remove from the flow and hide it from screenreaders.
+- [utilities/columns](utilities/columns), provides a columns custom property for use in objects or components.
+- [utilities/colspan](utilities/colspan), provides a colspan custom property for use in objects or components.
+- [utilities/colstart](utilities/colstart), provides a column start custom property for use in objects or components.
+- [utilities/offset](utilities/offset), provides a offset custom property for use in objects or components.
+- [utilities/clearfix](utilities/clearfix), clears floats.
+- [utilities/spacing](utilities/spacing), utility classes to put specific spacing values onto elements.
+- [utilities/visually-hidden](utilities/visually-hidden), hides an element visually while still allowing the content to be accessible.
+- [utilities/hidden](utilities/hidden), completely remove from the flow and hide it from screenreaders.
 
 All Utilities are prefixed with `u-`.
 
 ## Browserstack
+
 Every feature in Supple is extensively tested in Browserstack:
 
 [<img src="https://supple-kit.github.io/supple-css/browserstack-logo.png" alt="browserstack logo" width="152" height="80">](https://www.browserstack.com/)
@@ -209,11 +218,11 @@ Every feature in Supple is extensively tested in Browserstack:
 
 Supple is derived from the ideas of many other developers:
 
-* [Harry Roberts](https://twitter.com/csswizardry) for his awesome ideas with ITCSS and numerous other CSS stuff.
-* [Nicole Sullivan](https://twitter.com/stubbornella) for her work on OOCSS.
-* [Jonathan Snook](https://twitter.com/snookca) for his work on SMACSS.
-* [Nicolas Gallagher](https://twitter.com/necolas) for his work on numerous CSS things.
-* [Machiel Hulsbosch](http://www.hulsbos.ch/) for the supple logo.
-* [Joris Hulsbosch](https://me.portfolioris.nl/) for general advice and in-field testing.
+- [Harry Roberts](https://twitter.com/csswizardry) for his awesome ideas with ITCSS and numerous other CSS stuff.
+- [Nicole Sullivan](https://twitter.com/stubbornella) for her work on OOCSS.
+- [Jonathan Snook](https://twitter.com/snookca) for his work on SMACSS.
+- [Nicolas Gallagher](https://twitter.com/necolas) for his work on numerous CSS things.
+- [Machiel Hulsbosch](http://www.hulsbos.ch/) for the supple logo.
+- [Joris Hulsbosch](https://me.portfolioris.nl/) for general advice and in-field testing.
 
 And probably more…