Merge branch 'release/v5.0.0' into main

# Conflicts:
#	README.md
#	package.json

.gitignore

@@ -3,4 +3,4 @@
 node_modules
 npm-debug.log
 yarn.lock
-test/css/*
+_test/css/*

.stylelintrc

@@ -1,10 +1,7 @@
 {
- "extends": "stylelint-config-supple",
+ "extends": "@supple-kit/stylelint-config-supple",
  "ignoreFiles": [
- "test/css/*"
- ],
- "rules": {
- "scss/at-function-pattern": "supple-.+",
- "scss/at-mixin-pattern": "supple-.+"
- }
+ "_test/css/*",
+ "vendor/**/*"
+ ]
 }

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+ "[scss]": {
+ "editor.formatOnSave": false
+ }
+}

CHANGELOG.md

@@ -1,6 +1,19 @@
 # Changelog
 All notable changes to this project will be documented in this file.
 
+## 5.0.0 - 19-march-2021
+This is a massive overhaul opposed to v4.0.1, there is no simple upgrade path available.
+
+- Moved repository to [Supple Kit](https://github.com/supple-kit) as the first of the many to come tools for webdevelopment.
+- Removed [sass-mq](https://github.com/sass-mq/sass-mq) in favor of a new custom MQ system.
+- Added logical properties where possible so the framework is better suited for multilingual use.
+- Added mesh object, based on css-grid, to create simple grid systems.
+- Layout object can now be used without `o-layout__cell` child elements.
+- Added colspan, colstart, offset & columns utilities to use with layout & mesh objects.
+- Added better support for frameworks like svelte, react and the like.
+- More use of CSS custom properties.
+- Dropped IE11 support entirely
+
 ## 4.0.1 - 19-may-2020
 
 - Fixed a bug in `o-list-clean` where it resets margin-left but should reset padding-left.
@@ -67,7 +80,7 @@ Massive overhaul, v2 is by any means not compatible with v1 codebases.
 - Added vertical layout mode.
 - Formatted flexembed fallbacks a bit more consistent.
 - Removed `@apply` rules because the spec is abandoned.
-- Update readme with helpfull information.
+- Update readme with helpful information.
 
 First major release 🔥.
 

_test/scss/components/_css-lock.scss

@@ -0,0 +1,38 @@
+/* =========================================================================
+ components.css-lock
+ Test for creating fluid typography with CSS-lock mixin.
+ ========================================================================= */
+
+/* Use rules
+ `@use` everything you need here from other files. Variables, mixins &
+ other includes.
+ ========================================================================= */
+
+@use '../../../tools/responsive';
+
+
+
+/* Variables
+ ========================================================================= */
+
+
+
+/* Functions/Mixins
+ ========================================================================= */
+
+
+
+/* Module
+ ========================================================================= */
+
+.c-css-lock {
+ font-size: responsive.lock(20px, 30px, desk, wall);
+}
+
+.selector {
+ font-size: responsive.lock(18px, 24px);
+}
+// You can also redefine the min- and max breakpoints like this
+.selector-defined-breakpoints {
+ font-size: responsive.lock(20px, 30px, desk, wall);
+}

_test/scss/components/_fixture-box.scss

@@ -0,0 +1,45 @@
+/* =========================================================================
+ components.fixture-box
+ ========================================================================= */
+
+/* Use/Forward rules
+ `@use` or `@forward` everything you need here from other files.
+ These can include variables, mixins & other includes.
+ ========================================================================= */
+
+@use '../../../tools/space';
+@use '../../../settings/defaults';
+
+
+
+/* Variables
+ ========================================================================= */
+
+
+
+/* Functions/Mixins
+ ========================================================================= */
+
+
+
+/* Module
+ ========================================================================= */
+
+.c-fixture-box {
+ padding-inline-start: space.get('small');
+ padding-inline-end: space.get('small');
+ border: 1px solid #000000;
+ background: #ee4266;
+ line-height: 3rem;
+ text-indent: 0;
+ color: #ffffff;
+}
+
+.c-fixture-box--double-height {
+ line-height: space.get('huge');
+}
+
+.c-fixture-box--wrap {
+ border: 1px solid #000000;
+ background: rgba(238, 66, 102, 0.3);
+}

test/scss/components/_css-lock.scss → _test/scss/components/_preformatted.scss

@@ -1,8 +1,14 @@
 /* =========================================================================
- components.css-lock
- Test for creating fluid typography with CSS-lock mixin.
+ components.preformatted
  ========================================================================= */
 
+/* Use/Forward rules
+ `@use` or `@forward` everything you need here from other files.
+ These can include variables, mixins & other includes.
+ ========================================================================= */
+
+
+
 /* Variables
  ========================================================================= */
 
@@ -16,6 +22,8 @@
 /* Module
  ========================================================================= */
 
-.c-css-lock {
- @include supple-css-lock(font-size, 20px, 30px, desk, wall);
+.c-preformatted {
+ overflow: auto;
+ white-space: pre;
+ word-wrap: normal;
 }

_test/scss/components/_test.scss

@@ -0,0 +1,94 @@
+/* =========================================================================
+ components.test
+ ========================================================================= */
+
+/* Use/Forward rules
+ `@use` or `@forward` everything you need here from other files.
+ Variables, mixins & other includes.
+ ========================================================================= */
+
+@use '../../../tools/space';
+@use '../../../tools/typography';
+@use '../../../settings/defaults';
+
+
+
+/* Variables
+ ========================================================================= */
+
+
+
+/* Functions/Mixins
+ ========================================================================= */
+
+
+
+/* Module
+ ========================================================================= */
+
+.c-test {
+ counter-reset: test__describe;
+}
+
+.c-test__title {
+ @include typography.font-size(40px);
+ margin-block-start: space.get('base');
+ margin-block-end: space.get('base');
+ padding: space.get('base');
+ color: #999999;
+ background: #eeeeee;
+}
+
+.c-test__describe,
+.c-test__it {
+ padding-block-start: space.get('small');
+ padding-block-end: space.get('small');
+ padding-inline-start: space.get('base');
+ padding-inline-end: space.get('base');
+ border-left: 5px solid #666666;
+ font-weight: bold;
+ color: #666666;
+ background: #eeeeee;
+}
+
+.c-test__describe {
+ @include typography.font-size(32px);
+ margin-block-start: space.get('large');
+ margin-block-end: space.get('base');
+ counter-reset: test__it;
+
+ &::before {
+ content: counter(test__describe);
+ counter-increment: test__describe;
+ }
+}
+
+.c-test__it {
+ @include typography.font-size(24px);
+ margin-block-start: space.get('base');
+ margin-block-end: space.get('base');
+
+ &::before {
+ content: counter(test__describe) '.' counter(test__it);
+ counter-increment: test__it;
+ }
+}
+
+
+.c-test__describe::before,
+.c-test__it::before {
+ display: inline-block;
+ margin-inline-end: space.get('base');
+ min-inline-size: space.get('large');
+ text-transform: uppercase;
+ color: #999999;
+}
+
+
+.c-test__run {
+ // empty for reference
+}
+
+.c-test__run--retained {
+ max-inline-size: space.get('base') * 21;
+}

_test/scss/elements/_toplevel.scss

@@ -0,0 +1,35 @@
+/* =========================================================================
+ elements.toplevel
+ ========================================================================= */
+
+/* Use/Forward rules
+ `@use` or `@forward` everything you need here from other files.
+ These can include variables, mixins & other includes.
+ ========================================================================= */
+
+@use '../../../tools/space';
+@use '../../../settings/defaults';
+
+
+
+/* Variables
+ ========================================================================= */
+
+
+
+/* Functions/Mixins
+ ========================================================================= */
+
+
+
+/* Module
+ ========================================================================= */
+
+html {
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
+}
+
+body {
+ padding-inline-start: space.get('base');
+ padding-inline-end: space.get('base');
+}