diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index ea5b6f5..a283798 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,2 +1,2 @@
github: [bramsmulders]
-custom: ["https://www.paypal.me/smuldersbram/EUR"]
+custom: ['https://www.paypal.me/smuldersbram/EUR']
diff --git a/.github/ISSUE_TEMPLATE/bug-report.md b/.github/ISSUE_TEMPLATE/bug-report.md
index 9fc1b89..bbbf788 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.md
+++ b/.github/ISSUE_TEMPLATE/bug-report.md
@@ -4,25 +4,27 @@ about: Create a report to help us improve
title: ''
labels: bug
assignees: ''
-
---
**Describe The Bug:**
+
**To Reproduce:**
+
**Expected behavior:**
+
**Environment:**
-* **Supple CSS Version**:
-* **Node.js Version**:
-* **NPM Version**:
-* **Browser**:
+- **Supple CSS Version**:
+- **Node.js Version**:
+- **NPM Version**:
+- **Browser**:
diff --git a/.github/ISSUE_TEMPLATE/feature-request.md b/.github/ISSUE_TEMPLATE/feature-request.md
index f974b3b..8b86230 100644
--- a/.github/ISSUE_TEMPLATE/feature-request.md
+++ b/.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:**
+
**Describe the solution you'd like:**
+
**Describe alternatives you've considered:**
+
**Additional context:**
-
+
diff --git a/.github/ISSUE_TEMPLATE/support-request.md b/.github/ISSUE_TEMPLATE/support-request.md
index e2af2bd..0cddf64 100644
--- a/.github/ISSUE_TEMPLATE/support-request.md
+++ b/.github/ISSUE_TEMPLATE/support-request.md
@@ -4,23 +4,23 @@ about: Need help?
title: ''
labels: question
assignees: ''
-
---
**Describe Your Problem:**
-
+
**Screenshots:**
+
**Environment:**
-* **Supple CSS Version**:
-* **Node.js Version**:
-* **NPM Version**:
-* **Browser**:
+- **Supple CSS Version**:
+- **Node.js Version**:
+- **NPM Version**:
+- **Browser**:
diff --git a/.stylelintrc b/.stylelintrc
index faa26c1..b13d6e4 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -1,4 +1,7 @@
{
- "extends": "@supple-kit/stylelint-config-supple",
+ "extends": [
+ "@supple-kit/stylelint-config-supple",
+ "stylelint-config-prettier"
+ ],
"ignoreFiles": ["_test/css/*", "vendor/**/*"]
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 412bd1b..0000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "[scss]": {
- "editor.formatOnSave": false
- }
-}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f027cf..0ff733a 100644
--- a/CHANGELOG.md
+++ b/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`
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 6f0f22c..f0d64c4 100644
--- a/CONTRIBUTING.md
+++ b/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.
-
+
## 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).
-
+
## 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.
-
+
## Pull requests
Good pull requests - patches, improvements, new features - are a fantastic
@@ -134,14 +133,14 @@ project:
git push origin
```
-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.
-
+
## Maintainers
If you have commit access, please follow this process for merging patches and
diff --git a/LICENSE b/LICENSE
index d08166a..94a451f 100644
--- a/LICENSE
+++ b/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
diff --git a/README.md b/README.md
index b0418d0..03489c7 100644
--- a/README.md
+++ b/README.md
@@ -8,11 +8,11 @@ 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
@@ -20,35 +20,36 @@ Supple CSS is a reliable and testable [Sass](https://sass-lang.com/) framework i
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,25 +143,29 @@ 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.
@@ -168,18 +173,20 @@ Elements are most likely the last layer in which we'd find element-based selecto
**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-`.
@@ -187,20 +194,22 @@ 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:
[](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…
diff --git a/generic/reset/README.md b/generic/reset/README.md
index 45b587d..d734698 100644
--- a/generic/reset/README.md
+++ b/generic/reset/README.md
@@ -6,28 +6,28 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Use
+
Import this reset before any other stylesheets that generate CSS like this:
```scss
@use 'node_modules/@supple-kit/supple-css/generic/reset';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/generic/reset/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/generic/reset/test.html).
## Browser support
-* 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)
diff --git a/generic/reset/_index.scss b/generic/reset/_index.scss
index ca87abb..3aeec46 100644
--- a/generic/reset/_index.scss
+++ b/generic/reset/_index.scss
@@ -1,20 +1,13 @@
-/* =========================================================================
+/* ==========================================================================
generic.reset
- A thin layer on top of `@csstools/normalize.css` that provides a starting
- point more suitable for web applications.
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+ A reset of sensible defaults, roughly based on Andy Bell's excellent
+ Modern CSS Reset(https://hankchizljaw.com/wrote/a-modern-css-reset/).
+/ =========================================================================== */
@use 'sass:math';
@use '../../settings/defaults';
@use '../../tools/space';
-
-
/**
* Set the global `box-sizing` state to `border-box`. As per:
* paulirish.com/2012/box-sizing-border-box-ftw
@@ -28,7 +21,6 @@
}
}
-
/**
* 1. Ensure the page always fills at least the entire height of the viewport.
* 2. Always add the vertical scrollbar to prevent layout shifting
@@ -36,14 +28,13 @@
* 4. Apply the `$font-size` & `$line-height-ratio`
*/
html {
- min-block-size: 100vh; /* [1] */
+ min-block-size: 100vh; /* [1] */
overflow-y: scroll; /* [2] */
scroll-behavior: smooth; /* [3] */
font-size: #{math.div(defaults.$font-size, 16px) * 1em}; /* [4] */
line-height: #{defaults.$line-height-ratio}; /* [4] */
}
-
/**
* Remove default margins from elements
*/
@@ -73,7 +64,6 @@ input {
margin: 0;
}
-
/**
* Default indentation value for lists
*/
@@ -86,7 +76,6 @@ dd {
margin-inline-start: space.get();
}
-
/**
* Strip unwanted paddings & styling from elements
*/
@@ -105,7 +94,6 @@ fieldset {
border: 0;
}
-
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
@@ -117,7 +105,6 @@ textarea {
font: inherit;
}
-
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
@@ -127,7 +114,6 @@ pre {
font-size: 1em; /* 2 */
}
-
/**
* Suppress the focus outline on links that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
@@ -137,17 +123,15 @@ pre {
outline: none !important;
}
-
/**
* Gets rid of the annoying outline for mouse users but preserves it for
* keyboard users, and is ignored by browsers that don’t support :focus-visible.
* As per: https://twitter.com/LeaVerou/status/1045768279753666562
*/
-:focus:not(:focus-visible) { // stylelint-disable-line selector-pseudo-class-no-unknown
+:focus:not(:focus-visible) {
outline: none;
}
-
/**
* Image
*
@@ -161,14 +145,13 @@ img {
font-style: italic; /* [2] */
}
-
/**
* Remove all animations and transitions for people that prefer not to see them
* 1. Do not remove the animation altogether, but make it super-fast. This has
* several benefits:
* - Preserves the end state of an animation/transition
* - Preserves the possibility to listen to `animationend` and
- * `transitionend` events.
+ * `transitionend` events.
* 2. Only one animation cycle
*/
@media (prefers-reduced-motion: reduce) {
diff --git a/generic/reset/test.html b/generic/reset/test.html
index 6089930..998e124 100644
--- a/generic/reset/test.html
+++ b/generic/reset/test.html
@@ -1,111 +1,136 @@
-
-
-
- Test generic.reset - Supple CSS
-
-
-
+
+
+
+ Test generic.reset - Supple CSS
+
+
+
+
scales perfectly between 20px & 30px between desk & wall breakpoints
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias labore fugiat, placeat doloribus ea rerum debitis reiciendis molestiae in impedit dolores natus iure ducimus a odio soluta dignissimos consequuntur perspiciatis?
+
[tabindex="-1"]:focus
+
+ has no focus outline (try clicking to trigger focus)
+
Switches between dark and light modes based on user preference
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias labore fugiat, placeat doloribus ea rerum debitis reiciendis molestiae in impedit dolores natus iure ducimus a odio soluta dignissimos consequuntur perspiciatis?
+
CSS-Lock
+
+ scales perfectly between 20px & 30px between desk & wall breakpoints
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
+ labore fugiat, placeat doloribus ea rerum debitis reiciendis
+ molestiae in impedit dolores natus iure ducimus a odio soluta
+ dignissimos consequuntur perspiciatis?
+
+
-
+
-
-
+
Color scheme
+
+ Switches between dark and light modes based on user preference
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias
+ labore fugiat, placeat doloribus ea rerum debitis reiciendis
+ molestiae in impedit dolores natus iure ducimus a odio soluta
+ dignissimos consequuntur perspiciatis?
+
+
+
+
+
+
+
diff --git a/index.scss b/index.scss
index 405affb..de0c42f 100644
--- a/index.scss
+++ b/index.scss
@@ -1,38 +1,35 @@
-/* =========================================================================
+/* ==========================================================================
Supple
In-browser CSS framework; Fluid, Variable, supple if you will
- ========================================================================= */
+/ =========================================================================== */
-/* Settings
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Settings
+/ --------------------------------------------------------------------------- */
@use 'settings/defaults';
-
-
-/* Tools
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Tools
+/ --------------------------------------------------------------------------- */
// Import your tools in the modules you need them
-
-
-/* Generic
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Generic
+/ --------------------------------------------------------------------------- */
@use 'generic/reset';
-
-
-/* Elements
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Elements
+/ --------------------------------------------------------------------------- */
/* Add your own, yo */
-
-
-/* Objects
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Objects
+/ --------------------------------------------------------------------------- */
@use 'objects/list-clean';
@use 'objects/layout';
@@ -41,17 +38,15 @@
@use 'objects/aspect-ratio';
@use 'objects/flow';
-
-
-/* Components
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Components
+/ --------------------------------------------------------------------------- */
/* Add your own, yo */
-
-
-/* Utilities
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Utilities
+/ --------------------------------------------------------------------------- */
@use 'utilities/columns';
@use 'utilities/colspan';
diff --git a/objects/aspect-ratio/README.md b/objects/aspect-ratio/README.md
index 6194a73..74bd18b 100644
--- a/objects/aspect-ratio/README.md
+++ b/objects/aspect-ratio/README.md
@@ -6,22 +6,22 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Features
-* Fluid multi-media embeds.
-* Retains to a specific aspect ratio.
-* Configurable with custom properties.
-
+- Fluid multi-media embeds.
+- Retains to a specific aspect ratio.
+- Configurable with custom properties.
## Use
+
By default the aspect ratio container has a ratio of 1:1, a perfect square.
**Note** `.o-aspect-ratio` only accepts `.o-aspect-ratio__item` as direct descendant.
@@ -35,7 +35,9 @@ By default the aspect ratio container has a ratio of 1:1, a perfect square.
### Modifiers on `.o-aspect-ratio`
```html
-
+
```
@@ -54,23 +56,24 @@ By default the aspect ratio container has a ratio of 1:1, a perfect square.
**On the `.o-aspect-ratio` block**
-* `.o-aspect-ratio`: core aspect ratio block
-* `.o-aspect-ratio--4by3`: creates a embed with an aspect ratio of 4 by 3 (configurable in `$ratios` SCSS variable)
-* `.o-aspect-ratio--16by9`: creates a embed with an aspect ratio of 16 by 9 (configurable in `$ratios` SCSS variable)
-* `.o-aspect-ratio--2by1`: creates a embed with an aspect ratio of 2 by 1 (configurable in `$ratios` SCSS variable)
+- `.o-aspect-ratio`: core aspect ratio block
+- `.o-aspect-ratio--4by3`: creates a embed with an aspect ratio of 4 by 3 (configurable in `$ratios` SCSS variable)
+- `.o-aspect-ratio--16by9`: creates a embed with an aspect ratio of 16 by 9 (configurable in `$ratios` SCSS variable)
+- `.o-aspect-ratio--2by1`: creates a embed with an aspect ratio of 2 by 1 (configurable in `$ratios` SCSS variable)
## Configurable variables
+
There are multiple ways to configure the aspect-ratio object. The Custom properties are calculated at run-time, the SCSS variables will allow you to change things at build-time.
### Custom properties
**On the `.o-aspect-ratio` block**
-* `--ratio`: The aspect ratio you want to have, defaults to `(1:1)`
+- `--ratio`: The aspect ratio you want to have, defaults to `(1:1)`
### SCSS variables
-* `$ratios`: a list of ratios where `.o-aspect-ratio--XbyX` is generated for, defaults to: `((2:1), (4:3), (16:9))`
+- `$ratios`: a list of ratios where `.o-aspect-ratio--XbyX` is generated for, defaults to: `((2:1), (4:3), (16:9))`
You can overwrite the SCSS variables the following ways:
@@ -78,36 +81,37 @@ You can overwrite the SCSS variables the following ways:
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/aspect-ratio' with (
$ratios: (
- (4:3),
- (16:9),
- ),
+ (4: 3),
+ (16: 9),
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/objects/aspect-ratio/variables' with (
$ratios: (
- (4:3),
- (16:9),
- ),
+ (4: 3),
+ (16: 9),
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/aspect-ratio';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/aspect-ratio/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/aspect-ratio/test.html).
## Browser support
-* 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)
diff --git a/objects/aspect-ratio/_index.scss b/objects/aspect-ratio/_index.scss
index 6f1bdae..c9b4a77 100644
--- a/objects/aspect-ratio/_index.scss
+++ b/objects/aspect-ratio/_index.scss
@@ -1,21 +1,15 @@
-/* =========================================================================
+/* ==========================================================================
objects.aspect-ratio
For use with multi-media embeds such as videos, images or slideshows,
that need to retain a specific aspect ratio but adapt to elements
of variable widths.
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -23,20 +17,18 @@
@use './variables';
@use '../../settings/defaults';
-
-
-/* Internal variables
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Internal variables
+/ --------------------------------------------------------------------------- */
$selector: '> *';
@if defaults.$css-modules {
$selector: ':global(#{$selector})';
}
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
/**
* 1. Default cropping is a perfect square, in you own modules you can override
@@ -56,11 +48,10 @@ $selector: '> *';
}
}
-
-
-/* Common ratio modifiers, for use in browsers without
+/* --------------------------------------------------------------------------
+ Common ratio modifiers, for use in browsers without
custom-property support
- ========================================================================= */
+/ --------------------------------------------------------------------------- */
@each $ratio in variables.$ratios {
@each $a, $b in $ratio {
diff --git a/objects/aspect-ratio/_variables.scss b/objects/aspect-ratio/_variables.scss
index e48b870..1af2f69 100644
--- a/objects/aspect-ratio/_variables.scss
+++ b/objects/aspect-ratio/_variables.scss
@@ -1,30 +1,26 @@
-/* =========================================================================
+/* ==========================================================================
objects.aspect-ratio.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Ratio's
* Define ’em like this:
- * $ratios: (
- * (2:1),
- * (4:3),
- * (16:9),
- * );
+$ratios: (
+ (2:1),
+ (4:3),
+ (16:9),
+);
*/
$ratios: (
- (2:1),
- (4:3),
- (16:9)
+ (
+ 2: 1,
+ ),
+ (
+ 4: 3,
+ ),
+ (
+ 16: 9,
+ )
) !default;
diff --git a/objects/aspect-ratio/test.html b/objects/aspect-ratio/test.html
index a9a4299..8685a4c 100644
--- a/objects/aspect-ratio/test.html
+++ b/objects/aspect-ratio/test.html
@@ -1,84 +1,124 @@
-
-
-
- Test objects.aspect-ratio - Supple CSS
-
-
-
+
+
+
+ Test objects.aspect-ratio - Supple CSS
+
+
+
+
+
Supple CSS: objects.aspect-ratio tests
-
-
Supple CSS: objects.aspect-ratio tests
+
.o-aspect-ratio
-
.o-aspect-ratio
-
-
renders 1:1 (iframe)
-
-
-
+
renders 1:1 (iframe)
+
+
+
+
-
+
-
renders 1:1 (img)
-
-
-
+
renders 1:1 (img)
+
+
+
+
-
+
-
supports aspect ratio custom proptery (eg.: --ratio: (560/315))
-
-
-
+
+ supports aspect ratio custom proptery (eg.: --ratio: (560/315))
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda temporibus numquam repellendus repellat eaque
- illum, praesentium facere iure fugiat obcaecati? Facere, reprehenderit recusandae quae ea numquam id ut doloribus
- adipisci.
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus asperiores minima porro nemo, perferendis magni
- molestias rem illum, inventore fuga sunt! Amet, quisquam voluptatum hic modi doloribus rerum eveniet sint?
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
+ temporibus numquam repellendus repellat eaque illum, praesentium facere iure
+ fugiat obcaecati? Facere, reprehenderit recusandae quae ea numquam id ut
+ doloribus adipisci.
+
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus
+ asperiores minima porro nemo, perferendis magni molestias rem illum,
+ inventore fuga sunt! Amet, quisquam voluptatum hic modi doloribus rerum
+ eveniet sint?
+
List item 1
@@ -35,25 +42,28 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
**On the `.o-flow` block**
-* `.o-flow`: core flow object
-* `.o-flow--[GAP-SIZE]`: size modifier, generated by `$gap-sizes` SCSS variable.
+- `.o-flow`: core flow object
+- `.o-flow--[GAP-SIZE]`: size modifier, generated by `$gap-sizes` SCSS variable.
## Configurable variables
+
There are multiple ways to configure the flow object. The Custom properties are calculated at run-time, the SCSS variables will allow you to change things at build-time.
### Custom properties
**On the `.o-flow` block**
-* `--gap`: Amount of space you want to have, defaults to `space.get('base')`.
-* `--flow-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
+- `--gap`: Amount of space you want to have, defaults to `space.get('base')`.
+- `--flow-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
### SCSS variables
#### `$gap`
+
The mount of spacing you want to generate on the main block axis.
**Defaults to:**
+
```scss
$gap: 'base';
```
@@ -63,12 +73,13 @@ $gap: 'base';
And which size modifiers you want to generate?
**Example:**
+
```scss
-$gap-sizes: (
- 'tiny'
-);
+$gap-sizes: ('tiny');
```
+
**Defaults to:**
+
```scss
$gap-sizes: ();
```
@@ -78,31 +89,32 @@ You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/flow' with (
- $gap: 'tiny',
+ $gap: 'tiny'
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/objects/flow/variables' with (
- $gap: 'tiny',
+ $gap: 'tiny'
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/flow';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/flow/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/flow/test.html).
## Browser support
-* 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)
diff --git a/objects/flow/_index.scss b/objects/flow/_index.scss
index bb76fe2..84bf401 100644
--- a/objects/flow/_index.scss
+++ b/objects/flow/_index.scss
@@ -1,20 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
objects.flow
Create a rule that sibling elements apply a common margin that is either
globally defined or contextually set.
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -22,20 +16,9 @@
@use '../../settings/defaults';
@use '../../tools/space';
-
-
-/* Variables
- ========================================================================= */
-
-
-
-/* Functions/Mixins
- ========================================================================= */
-
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
.o-flow {
$selector: '> * + *';
@@ -51,7 +34,6 @@
}
}
-
@each $gap in variables.$gaps {
.o-flow--#{$gap} {
--flow-gap: #{space.get($gap)};
diff --git a/objects/flow/_variables.scss b/objects/flow/_variables.scss
index b119c2d..eb1ea9c 100644
--- a/objects/flow/_variables.scss
+++ b/objects/flow/_variables.scss
@@ -1,16 +1,9 @@
-/* =========================================================================
+/* ==========================================================================
objects.flow.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
/* Variables
========================================================================= */
@@ -20,14 +13,13 @@
*/
$gap: 'base' !default;
-
/**
* Which gap modifiers you want to generate?
*
* Example
- $gap-sizes: (
- 'tiny'
- );
+$gap-sizes: (
+ 'tiny'
+);
*
* By default the map is empty
*/
diff --git a/objects/flow/test.html b/objects/flow/test.html
index 58dc9b6..c74f788 100644
--- a/objects/flow/test.html
+++ b/objects/flow/test.html
@@ -1,58 +1,75 @@
-
-
-
- Test object.flow - Supple CSS
-
-
-
+
+
+
+ Test object.flow - Supple CSS
+
+
+
+
+
Supple CSS: object.flow tests
-
-
Supple CSS: object.flow tests
+
.u-flow
-
.u-flow
+
renders consistent margins between elements
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
+ excepturi totam obcaecati quibusdam repellat, magni iusto,
+ laboriosam assumenda nam porro veritatis tenetur quas explicabo
+ neque quasi sequi numquam. Quasi, reprehenderit!
+
+
+
List item 1
+
List item 2
+
List item 3
+
+ List item 4
+
+
List item 1
+
List item 2
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
-
renders consistent margins between elements
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia excepturi totam obcaecati quibusdam repellat, magni iusto, laboriosam assumenda nam porro veritatis tenetur quas explicabo neque quasi sequi numquam. Quasi, reprehenderit!
-
-
List item 1
-
List item 2
-
List item 3
-
- List item 4
-
-
List item 1
-
List item 2
-
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
-
-
-
-
Accepts `--flow-gap` custom property to adjust spacings, eg. `--flow-gap: 3rem`
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia excepturi totam obcaecati quibusdam repellat, magni iusto, laboriosam assumenda nam porro veritatis tenetur quas explicabo neque quasi sequi numquam. Quasi, reprehenderit!
-
-
List item 1
-
List item 2
-
List item 3
-
- List item 4
-
-
List item 1
-
List item 2
-
-
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
+ excepturi totam obcaecati quibusdam repellat, magni iusto,
+ laboriosam assumenda nam porro veritatis tenetur quas explicabo
+ neque quasi sequi numquam. Quasi, reprehenderit!
+
+
+
List item 1
+
List item 2
+
List item 3
+
+ List item 4
+
+
List item 1
+
List item 2
+
+
+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit.
+
+
+
+
+
+
diff --git a/objects/layout/README.md b/objects/layout/README.md
index 125c9d7..4619bd0 100644
--- a/objects/layout/README.md
+++ b/objects/layout/README.md
@@ -1,6 +1,6 @@
# Supple CSS | objects.layout
-Layout makes use of `flexbox` & Custom Properties to provide for a flexible, fluid & extensible layout system. You can horizontally(on the inline axis) arrange items or even use it as a full fledged traditional grid system.
+Layout makes use of `flexbox` & Custom Properties to provide for a flexible, fluid & extensible layout system. You can horizontally(on the inline axis) arrange items or even use it as a full fledged traditional grid system.
If you want to arrange items over 2 dimensions (horizontal & vertical) we recommend using [objects.mesh](../mesh).
@@ -8,25 +8,24 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Features
-* Configurable with custom properties.
-* Fluid layout.
-* Intelligent cell wrapping.
-* Evenly fill cell spacing.
-* Equal height columns.
-* Horizontal/vertical centering of cells.
-* Cell width is controlled independently of layout gap.
-* Infinite nesting.
-
+- Configurable with custom properties.
+- Fluid layout.
+- Intelligent cell wrapping.
+- Evenly fill cell spacing.
+- Equal height columns.
+- Horizontal/vertical centering of cells.
+- Cell width is controlled independently of layout gap.
+- Infinite nesting.
## Use
@@ -46,7 +45,9 @@ For more granular control over layout make use of modifiers, custom properties o
### Modifiers on `o-layout`
```html
-
+
@@ -92,17 +93,11 @@ For more granular control over layout make use of modifiers, custom properties o
```html
-
- Spans 4 of 10 columns
-
+
Spans 4 of 10 columns
-
- Spans 1 of 10 columns
-
+
Spans 1 of 10 columns
-
- Spans 3 of 10 columns
-
+
Spans 3 of 10 columns
Spans 2 of 10 columns and offsets 2 of 10 columns
@@ -127,6 +122,7 @@ You can nest layouts in any context. Keep in mind that the dimensions will be re
```
### responsive elements
+
When you set queries in `$fill-in-query` or `$fit-in-query` you can use them like this:
```html
@@ -141,103 +137,107 @@ When you set queries in `$fill-in-query` or `$fit-in-query` you can use them lik
```
### If anything in the above fails
+
By default, the cell styling is applied to the direct child. If for any reason that doesn't work, wrap the direct child in an `o-layout__cell` and apply the `o-layout__[fit|fill], u-colspan, u-offset, etc.` logic there. Stuff should start working.
```html
-
- // your component
-
-
- // your component
-
+
// your component
+
// your component
```
-
## Available classes
**On the `.o-layout` block**
-* `.o-layout`: core layout block
-* `.o-layout--align-inline-center`: center align _all_ layout cells over the inline axis
-* `.o-layout--align-inline-end`: align all layout cells to the end of the inline axis
-* `.o-layout--align-block-center`: center-align layout cells on the block axis
-* `.o-layout--align-block-end`: end-align layout cells on the block axis
-* `.o-layout--reverse`: reverse all cells in order
-* `.o-layout--fill`: evenly distribute space amongst all child cells
-* `.o-layout--fit`: fit all cells to their content
-* `.o-layout--stretch`: All cells match the size of tallest cell in a row on the block axis
-* `.o-layout--gap-[SPACE]`: adds a base gutter between cells
+- `.o-layout`: core layout block
+- `.o-layout--align-inline-center`: center align _all_ layout cells over the inline axis
+- `.o-layout--align-inline-end`: align all layout cells to the end of the inline axis
+- `.o-layout--align-block-center`: center-align layout cells on the block axis
+- `.o-layout--align-block-end`: end-align layout cells on the block axis
+- `.o-layout--reverse`: reverse all cells in order
+- `.o-layout--fill`: evenly distribute space amongst all child cells
+- `.o-layout--fit`: fit all cells to their content
+- `.o-layout--stretch`: All cells match the size of tallest cell in a row on the block axis
+- `.o-layout--gap-[SPACE]`: adds a base gutter between cells
**On the flex item**
-* `.o-layout__align-inline-center`: Center one cell on the inline axis
-* `.o-layout__fit`: Make a cell shrink wrap its content
-* `.o-layout__fill`: Make a cell fill the remaining space.
-* `.o-layout__[fit|fill]@[QUERY-NAME]`: applies `fit` or `fill` at the given media query. (available in `$[fit|fill]-in-query` SCSS setting)
-* `.o-layout__cell`: Wrap the child component to fix some super specific bugs. Only use this when all of the above somehow not works.
+- `.o-layout__align-inline-center`: Center one cell on the inline axis
+- `.o-layout__fit`: Make a cell shrink wrap its content
+- `.o-layout__fill`: Make a cell fill the remaining space.
+- `.o-layout__[fit|fill]@[QUERY-NAME]`: applies `fit` or `fill` at the given media query. (available in `$[fit|fill]-in-query` SCSS setting)
+- `.o-layout__cell`: Wrap the child component to fix some super specific bugs. Only use this when all of the above somehow not works.
## Configurable variables
+
There are multiple ways to configure the layout object. The Custom properties are calculated at run-time, the SCSS variables will allow you to change things at build-time.
### Custom properties
**On the `.o-layout` block**
-* `--columns`: The number of columns you want to have, defaults to `12`
-* `--gap`: The width of the gutter applied between the cells, defaults to `0`
-* `--layout-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
+- `--columns`: The number of columns you want to have, defaults to `12`
+- `--gap`: The width of the gutter applied between the cells, defaults to `0`
+- `--layout-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
**On the flex item element**
-* `--colspan`: The amount of columns this cell will span, defaults to `--columns`
-* `--offset`: The amount of columns this cell will offset, defaults to `0`
+- `--colspan`: The amount of columns this cell will span, defaults to `--columns`
+- `--offset`: The amount of columns this cell will offset, defaults to `0`
### SCSS variables
-* `$gaps`: a list of gaps where possible `.o-layout--gap-X` are generated from, defaults to `('base')`
-* `$fit-in-query`: a list of queries where `o-layout__fit` is generated for, defaults to `()`
-* `$fill-in-query`: a list of queries where `o-layout__fill` is generated for, defaults to `()`
+- `$gaps`: a list of gaps where possible `.o-layout--gap-X` are generated from, defaults to `('base')`
+- `$fit-in-query`: a list of queries where `o-layout__fit` is generated for, defaults to `()`
+- `$fill-in-query`: a list of queries where `o-layout__fill` is generated for, defaults to `()`
You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/layout' with (
- $fit-in-query: (lap, desk),
+ $fit-in-query: (
+ lap,
+ desk,
+ ),
$gaps: (
'base',
'tiny',
- ),
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/objects/layout/variables' with (
- $fit-in-query: (lap, desk),
+ $fit-in-query: (
+ lap,
+ desk,
+ ),
$gaps: (
'tiny',
'huge',
- ),
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/layout';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/layout/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/layout/test.html).
## Browser support
-* 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)
diff --git a/objects/layout/_index.scss b/objects/layout/_index.scss
index f510777..10a7013 100644
--- a/objects/layout/_index.scss
+++ b/objects/layout/_index.scss
@@ -1,19 +1,13 @@
-/* =========================================================================
+/* ==========================================================================
objects.layout
Fluid and nestable layout system based on flexbox.
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -22,20 +16,18 @@
@use '../../tools/space';
@use '../../tools/responsive';
-
-
-/* Internal variables
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Internal variables
+/ --------------------------------------------------------------------------- */
$selector: '> *';
@if defaults.$css-modules {
$selector: ':global(#{$selector})';
}
-
-
-/* Module code
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module code
+/ --------------------------------------------------------------------------- */
/**
* Block: layout
@@ -59,32 +51,35 @@ $selector: '> *';
list-style: none; /* [1] */
/**
- * Flex item
- * No explicit width by default. Rely on combining the item with a
- * dimension utility or a component class that extends 'layout'.
- *
- * 1. Set flex items to full width by default, minus the gap
- * 2. Fix issue where elements with overflow extend past the
- * item's container. As per:
- * http://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
- * 3. Calculate the offset + the layout gap
- * 4. We need to reset our margins if the direct child is `o-layout__cell`
- * but our gap variables need to be available. So we map our variables to
- * internal variables.
- */
+ * Flex item
+ * No explicit width by default. Rely on combining the item with a
+ * dimension utility or a component class that extends 'layout'.
+ *
+ * 1. Set flex items to full width by default, minus the gap
+ * 2. Fix issue where elements with overflow extend past the
+ * item's container. As per:
+ * http://weblog.west-wind.com/posts/2016/Feb/15/Flexbox-Containers-PRE-tags-and-managing-Overflow
+ * 3. Calculate the offset + the layout gap
+ * 4. We need to reset our margins if the direct child is `o-layout__cell`
+ * but our gap variables need to be available. So we map our variables to
+ * internal variables.
+ */
#{$selector} {
--colspan: var(--columns);
--offset: 0;
- --layout-inline-gap-internal: var(--layout-inline-gap); /* [4] */
- --layout-block-gap-internal: var(--layout-block-gap); /* [4] */
- flex-basis: calc((100% / var(--columns) * var(--colspan)) - var(--layout-inline-gap-internal)); /* [1] */
+ --layout-igi: var(--layout-inline-gap); /* [4] */
+ --layout-bgi: var(--layout-block-gap); /* [4] */
+ flex-basis: calc(
+ (100% / var(--columns) * var(--colspan)) - var(--layout-igi)
+ ); /* [1] */
min-inline-size: 0; /* [2] */
- margin-block-start: var(--layout-block-gap-internal);
- margin-inline-start: calc(100% / var(--columns) * var(--offset) + var(--layout-inline-gap-internal)); /* [3] */
+ margin-block-start: var(--layout-bgi);
+ margin-inline-start: calc(
+ 100% / var(--columns) * var(--offset) + var(--layout-igi)
+ ); /* [3] */
}
}
-
/**
* Modifier: inline-center
* center align all layout cells over the inline axis
@@ -93,7 +88,6 @@ $selector: '> *';
justify-content: center;
}
-
/**
* Modifier: align-inline-end
* align all layout cells to the end of the inline axis
@@ -102,7 +96,6 @@ $selector: '> *';
justify-content: flex-end;
}
-
/**
* Modifier: align-block-center
* center-align layout cells on the block axis
@@ -111,7 +104,6 @@ $selector: '> *';
align-items: center;
}
-
/**
* Modifier: align-block-end
* end-align layout cells on the block axis
@@ -120,7 +112,6 @@ $selector: '> *';
align-items: flex-end;
}
-
/**
* Modifier: stretch
* All cells match the size of tallest cell in a row
@@ -129,7 +120,6 @@ $selector: '> *';
align-items: stretch;
}
-
/**
* Modifier: reverse
* reverse all cells
@@ -138,14 +128,13 @@ $selector: '> *';
flex-direction: row-reverse;
}
-
/**
* Element: cell
* Only use cell wrapper element when everything else fails 😅
*/
.o-layout__cell {
- --layout-inline-gap-internal: 0px; // stylelint-disable-line
- --layout-block-gap-internal: 0px; // stylelint-disable-line
+ --layout-igi: 0px; // stylelint-disable-line
+ --layout-bgi: 0px; // stylelint-disable-line
padding-block-start: var(--layout-block-gap);
padding-inline-start: var(--layout-inline-gap);
@@ -159,7 +148,6 @@ $selector: '> *';
}
}
-
/**
* Modifier: fill
* allow cells to equal distribute width
@@ -180,7 +168,6 @@ $selector: '> *';
}
}
-
/**
* Modifier: gap-X
*/
@@ -190,9 +177,9 @@ $selector: '> *';
}
}
-
-/* Elements
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Elements
+/ --------------------------------------------------------------------------- */
/**
* Element: fit
@@ -204,7 +191,6 @@ $selector: '> *';
}
}
-
/**
* Element: fill
* Make an item fill the remaining space.
@@ -219,7 +205,6 @@ $selector: '> *';
}
}
-
/**
* Element: align-inline-center
* Center one flex item on the inline axis
@@ -228,4 +213,3 @@ $selector: '> *';
margin-inline-start: auto;
margin-inline-end: auto;
}
-
diff --git a/objects/layout/_variables.scss b/objects/layout/_variables.scss
index 096d6d8..af8bb46 100644
--- a/objects/layout/_variables.scss
+++ b/objects/layout/_variables.scss
@@ -1,33 +1,19 @@
-/* =========================================================================
+/* ==========================================================================
objects.layout.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Number of default columns, can be overwritten per component with custom
* properties.
*/
$columns: defaults.$columns !default;
-
/**
* The `gap` map
*/
-$gaps: (
- 'base',
-) !default;
-
+$gaps: ('base') !default;
/**
* Define which namespaced queries you would like to generate
@@ -35,11 +21,10 @@ $gaps: (
* This is handy if you only need `fit` on, say, desk, or you only need `fill`
* at mobile sizes. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will:
- *
- * $X-in-query: (lap, desk);
+$X-in-query: (lap, desk);
*
* Note: the name of the query must exist in the list of `$queries`
- * in `settings/responsive`
+ * in `settings/responsive`
*/
$fit-in-query: () !default;
$fill-in-query: () !default;
diff --git a/objects/layout/test.html b/objects/layout/test.html
index a3896a9..484ae1a 100644
--- a/objects/layout/test.html
+++ b/objects/layout/test.html
@@ -1,365 +1,481 @@
-
-
-
- Test objects.layout - Supple CSS
-
-
-
-
-
-
Supple CSS: objects.layout tests
-
-
.o-layout
-
-
renders cells at full-width by default
-
-
-
1
-
2
-
-
-
-
removes inter-cell whitespace
-
-
-
1
-
2
-
3
-
4
+
+
+
+ Test objects.layout - Supple CSS
+
+
+
+
+
Supple CSS: objects.layout tests
+
+
.o-layout
+
+
renders cells at full-width by default
+
+
+
1
+
2
+
-
-
-
handles overflowing elements
-
-
-
-
This is some really long content that should be scrolled when the container is too small.
+
+
+
removes inter-cell whitespace
+
+
+
1
+
2
+
3
+
4
-
-
-
automatically wraps cells across multiple lines when they don't fit a single row
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
+
+
+
handles overflowing elements
+
+
+
+
+This is some really long content that should be scrolled when the container is too small.
+
+
-
-
-
arranges cells of different heights into clear rows
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
+
+
+
+ automatically wraps cells across multiple lines when they don't fit a
+ single row
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
-
-
-
supports nested layouts
-
-
-
- 1
-
-
1
-
2
-
3
-
4
+
+
+
+ arranges cells of different heights into clear rows
+
+
+
+
+ 1
+
+
2
+
+ 3
+
+
4
+
5
+
+ 6
+
+
7
+
+ 8
-
-
-
supports .o-layout__fill on cells with no width
-
-
-
1/4
-
fill
+
+
+
supports nested layouts
+
+
+
+ 1
+
+
1
+
2
+
3
+
4
+
+
+
+
+
+
+ supports .o-layout__fill on cells with no width
+
+
+
+
1/4
+
fill
+
-
+
2/12
-
fill
+
fill
2/12
-
-
-
-
supports o-layout__fit and o-layout__fill
-
-
-
shrink to content width
-
fill remaining space: This is some really long content that should be wrapped when the container is too small.
-
-
-
-
supports u-columns-X
-
-
-
colspan 2 of 10
-
colspan 3 of 10
-
colspan 5 of 10
-
colspan 2 of 10
-
-
-
-
supports u-colspan-X
-
-
-
colspan 2
-
colspan 3
-
colspan 5
-
colspan 2
-
-
-
-
supports u-offset-X
-
-
-
colspan 2, offset 3
-
colspan 3, offset 1
-
colspan 5, offset 2
-
colspan 2
-
-
-
-
.o-layout--align-inline-center
-
center-aligns all cells on the inline axis but not their content
-
-
-
1
-
2
-
3
-
+
-
.o-layout--align-inline-end
-
end-aligns all cells on the inline axis but not their content
-
-
-
1
-
2
-
3
+
supports o-layout__fit and o-layout__fill
+
+
+
+ shrink to content width
+
+
+ fill remaining space: This is some really long content that should
+ be wrapped when the container is too small.
+
+
-
-
-
.o-layout--align-block-center
-
centers-aligns all cells on the block axis
-
-
-
1
-
2
-
3
-
3
+
+
+
supports u-columns-X
+
+
+
colspan 2 of 10
+
colspan 3 of 10
+
colspan 5 of 10
+
colspan 2 of 10
+
-
-
-
.o-layout--align-block-end
-
end-aligns all cells on the block axis
-
-
-
1
-
2
-
3
-
3
+
+
+
supports u-colspan-X
+
+
+
colspan 2
+
colspan 3
+
colspan 5
+
colspan 2
+
-
+
-
.o-layout--fill
-
evenly distribute space between cells without sizing classes or colspan properties
-
-
-
1
-
2
-
3
+
supports u-offset-X
+
+
+
+ colspan 2, offset 3
+
+
+ colspan 3, offset 1
+
+
+ colspan 5, offset 2
+
+
colspan 2
+
-
-
1
-
2 This is some really long content that should be scrolled when the container is too small.
-
3
-
4
-
5
-
6
+
+
+
.o-layout--align-inline-center
+
+ center-aligns all cells on the inline axis but not their content
+
+
+
+
1
+
2
+
3
+
-
-
-
.o-layout--fit
-
fit all cells to their content
-
-
-
1
-
2
-
3
+
+
+
.o-layout--align-inline-end
+
+ end-aligns all cells on the inline axis but not their content
+
+
+
+
1
+
2
+
3
+
-
-
1
-
2 a bit longer
-
3
-
4
-
5
-
6
+
+
+
.o-layout--align-block-center
+
centers-aligns all cells on the block axis
+
+
+
1
+
+ 2
+
+
3
+
3
+
-
-
-
.o-layout--stretch
-
equal size columns based on the talles cell in the block axis
-
-
-
1
-
2 line 2
-
3
+
+
+
.o-layout--align-block-end
+
end-aligns all cells on the block axis
+
+
+
1
+
+ 2
+
+
3
+
3
+
-
-
-
also with .layout__cell child elements
-
-
-
+
+
+
.o-layout--fill
+
+ evenly distribute space between cells without sizing classes or colspan
+ properties
+
+
+
1
+
2
+
3
-
-
2 line 2
-
-
+
+
1
+
+
+2 This is some really long content that should be scrolled when the container is too small.
+
3
+
4
+
5
+
6
-
+
-
.o-layout__align-inline-center
-
centers an individual layout cell on the inline axis but not its content
-
-
-
1
-
2
-
3: centered cell
+
.o-layout--fit
+
fit all cells to their content
+
+
+
1
+
2
+
3
+
+
+
1
+
2 a bit longer
+
3
+
4
+
5
+
6
+
-
-
-
-
.o-layout--gap-X
-
supports gap (.o-layout--gap-base)
-
-
-
1
-
2
-
3
-
4
-
5
+
+
+
.o-layout--stretch
+
+ equal size columns based on the talles cell in the block axis
+
+
+
+
1
+
2 line 2
+
3
+
-
-
-
doesn't apply gaps to nested layouts
-
-
-
- 1
-
-
1
-
2
+
+
+
+ also with .layout__cell child elements
+
+
+
+
+
1
+
+
+
2 line 2
+
+
+
3
-
- 2
-
-
1
-
2
+
+
+
+
.o-layout__align-inline-center
+
+ centers an individual layout cell on the inline axis but not its content
+
+
+
+
1
+
2
+
+ 3: centered cell
-
-
-
correctly aligns gaps within nested layouts
-
-
-
- 1
-
-
1
-
2
+
+
+
.o-layout--gap-X
+
supports gap (.o-layout--gap-base)
+
+
+
1
+
2
+
3
+
4
+
5
+
+
+
+
+
doesn't apply gaps to nested layouts
+
+
+
+ 1
+
+
1
+
2
+
+
+
+ 2
+
+
1
+
2
+
-
- 2
-
-
1
-
2
+
+
+
+
correctly aligns gaps within nested layouts
+
+
+
+ 1
+
+
1
+
2
+
+
+
+ 2
+
+
1
+
2
+
-
+
-
correctly adds gaps with o-layout--fill
-
-
-
1
-
2
-
3
-
-
-
1
-
2
-
3
-
4
-
5
-
6
+
correctly adds gaps with o-layout--fill
+
+
+
1
+
2
+
3
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
-
-
-
correctly adds gaps with o-layout__fit and o-layout__fill
-
-
-
shrink to content width
-
fill remaining space: This is some really long content that should be wrapped when the container is too small.
+
+
+
+ correctly adds gaps with o-layout__fit and o-layout__fill
+
+
+
+
shrink to content width
+
+ fill remaining space: This is some really long content that should
+ be wrapped when the container is too small.
+
+
-
-
-
correctly adds gaps with u-colspan-X and o-layout__fill
-
-
-
shrink to content width
-
fill remaining space: This is some really long content that should be wrapped when the container is too small.
+
+
+
+ correctly adds gaps with u-colspan-X and o-layout__fill
+
+
+
+
shrink to content width
+
+ fill remaining space: This is some really long content that should
+ be wrapped when the container is too small.
+
+
-
-
-
Correctly calculates cell alignment when a .o-layout__fit is used in a .o-layout__fit when using .o-layout__cell
-
-
-
-
-
-
Item 1
-
-
-
Item 2
-
-
-
Item 3
-
-
-
Item 4
-
-
-
Item 5
+
+
+
+ Correctly calculates cell alignment when a
+ .o-layout__fit is used in a
+ .o-layout__fit when using .o-layout__cell
+
+
+
+
+
+
+
Item 1
+
+
+
Item 2
+
+
+
Item 3
+
+
+
Item 4
+
+
+
Item 5
+
-
-
-
-
+
+
+
+
diff --git a/objects/list-clean/README.md b/objects/list-clean/README.md
index a196821..c5a3322 100644
--- a/objects/list-clean/README.md
+++ b/objects/list-clean/README.md
@@ -6,11 +6,10 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Installation](#installation)
-* [Browser support](#browser-support)
-
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Use
@@ -22,16 +21,15 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Available classes
-* `.o-list-clean`: core list clean block
-* `.o-list-clean__item`: cleans list style properties from a single item
-
+- `.o-list-clean`: core list clean block
+- `.o-list-clean__item`: cleans list style properties from a single item
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/objects/list-clean/_index.scss b/objects/list-clean/_index.scss
index 783a6f4..f6f9e05 100644
--- a/objects/list-clean/_index.scss
+++ b/objects/list-clean/_index.scss
@@ -1,24 +1,13 @@
-/* =========================================================================
+/* ==========================================================================
objects.list-clean
Strip appearance from lists by removing their bullets and indents
- ========================================================================= */
-
-/* Variables
- ========================================================================= */
-
-
-
-
-
-/* Module
- ========================================================================= */
+/ =========================================================================== */
.o-list-clean {
list-style: none;
padding-inline-start: 0;
}
-
/**
* Item specific class
* declaring this might for instance only be necessary on `dd` childs
diff --git a/objects/mesh/README.md b/objects/mesh/README.md
index fc78475..97ef5a4 100644
--- a/objects/mesh/README.md
+++ b/objects/mesh/README.md
@@ -8,23 +8,22 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Features
-* Configurable with custom properties.
-* Fluid grid system.
-* Intelligent cell wrapping.
-* Evenly fill cell spacing.
-* Fluid width columns that break into more or less columns as space is available.
-* Masonry layout
-
+- Configurable with custom properties.
+- Fluid grid system.
+- Intelligent cell wrapping.
+- Evenly fill cell spacing.
+- Fluid width columns that break into more or less columns as space is available.
+- Masonry layout
## Use
@@ -72,7 +71,9 @@ For more granular control over mesh make use of modifiers, custom properties or
```html
-
Spans 5 of 12 columns and starts at column 2
+
+ Spans 5 of 12 columns and starts at column 2
+
```
@@ -80,21 +81,15 @@ For more granular control over mesh make use of modifiers, custom properties or
```html
-
- Spans 4 of 10 columns
-
+
Spans 4 of 10 columns
Spans 1 of 10 columns starts at column 5
-
- Spans 3 of 10 columns
-
+
Spans 3 of 10 columns
-
- Spans 2 of 10 columns
-
+
Spans 2 of 10 columns
```
@@ -107,13 +102,13 @@ You can nest mesh in any context. Keep in mind that the dimensions will be relat
```html
-
-
+
```
### responsive modifiers
+
When you set breakpoints in `$row-in-query` you can use it like this:
```html
@@ -124,86 +119,93 @@ When you set breakpoints in `$row-in-query` you can use it like this:
```
-
## Available classes
**On the `.o-mesh` block**
-* `.o-mesh`: core mesh block
-* `.o-mesh--flow`: Fluid width columns that break into more or less columns as space is available, with no media queries.
-* `.o-mesh--dense`: Attempt to fill in holes earlier in the grid if smaller items come up later.
-* `.o-mesh--gap-base`: adds a base gutter between cells
+- `.o-mesh`: core mesh block
+- `.o-mesh--flow`: Fluid width columns that break into more or less columns as space is available, with no media queries.
+- `.o-mesh--dense`: Attempt to fill in holes earlier in the grid if smaller items come up later.
+- `.o-mesh--gap-base`: adds a base gutter between cells
**On the grid item element**
-* `.o-mesh__row`: Spans a full row
-* `.o-mesh__row@[QUERY-NAME]`: Spans full row on a certain media query (available in `$row-in-query` SCSS setting)
+- `.o-mesh__row`: Spans a full row
+- `.o-mesh__row@[QUERY-NAME]`: Spans full row on a certain media query (available in `$row-in-query` SCSS setting)
## Configurable variables
+
There are multiple ways to configure the mesh object. The Custom properties are calculated at run-time, the SCSS variables will allow you to change things at build-time.
### Custom properties
**On the `.o-mesh` block**
-* `--columns`: The number of columns you want to have, defaults to `12`
-* `--gap`: The width of the gutter applied between the cells, defaults to `0`
-* `--layout-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
-* `--block-gap`: The space of the gutter applied between the cells on the block axis, defaults to `var(--layout-gap)`
-* `--inline-gap`: The space of the gutter applied between the cells on the inline axis, defaults to `var(--layout-gap)`
+- `--columns`: The number of columns you want to have, defaults to `12`
+- `--gap`: The width of the gutter applied between the cells, defaults to `0`
+- `--layout-gap`: Actual gap variable to be used when in conflict with other objects, defaults to `var(--gap)`.
+- `--block-gap`: The space of the gutter applied between the cells on the block axis, defaults to `var(--layout-gap)`
+- `--inline-gap`: The space of the gutter applied between the cells on the inline axis, defaults to `var(--layout-gap)`
**On the `.o-mesh--flow` modifier**
-* `--min-inline-size`: minimum size that a cell needs to have
+- `--min-inline-size`: minimum size that a cell needs to have
**On the grid item element**
-* `--colspan`: The amount of columns this cell will span, defaults to `--columns`
-* `--colstart`: Startpoint of the cell
+- `--colspan`: The amount of columns this cell will span, defaults to `--columns`
+- `--colstart`: Startpoint of the cell
### SCSS variables
-* `$gaps`: a list of gaps where possible `.o-mesh--gap-X` are generated from, defaults to `('base')`
-* `$row-in-query`: a list of queries where `o-mesh__row` is generated for, defaults to `()`
+- `$gaps`: a list of gaps where possible `.o-mesh--gap-X` are generated from, defaults to `('base')`
+- `$row-in-query`: a list of queries where `o-mesh__row` is generated for, defaults to `()`
You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/mesh' with (
- $row-in-query: (lap, desk),
+ $row-in-query: (
+ lap,
+ desk,
+ ),
$gaps: (
'base',
'tiny',
- ),
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/objects/mesh/variables' with (
- $row-in-query: (lap, desk),
+ $row-in-query: (
+ lap,
+ desk,
+ ),
$gaps: (
'tiny',
'huge',
- ),
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/mesh';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/mesh/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/mesh/test.html).
## Browser support
-* 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)
diff --git a/objects/mesh/_index.scss b/objects/mesh/_index.scss
index 55c8786..5b26414 100644
--- a/objects/mesh/_index.scss
+++ b/objects/mesh/_index.scss
@@ -1,18 +1,12 @@
-/* =========================================================================
+/* ==========================================================================
objects.mesh
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -22,20 +16,18 @@
@use '../../tools/rem';
@use '../../tools/responsive';
-
-
-/* Internal variables
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Internal variables
+/ --------------------------------------------------------------------------- */
$selector: '> *';
@if defaults.$css-modules {
$selector: ':global(#{$selector})';
}
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
/**
* Block: mesh
@@ -64,7 +56,6 @@ $selector: '> *';
}
}
-
/**
* Modifier: flow
* Fluid width columns that break into more or less columns as space is available, with no media queries
@@ -74,7 +65,6 @@ $selector: '> *';
grid-template-columns: repeat(auto-fill, minmax(var(--min-inline-size), 1fr));
}
-
/**
* Modifier: dense
* Attempt to fill in holes earlier in the grid if smaller items come up later
@@ -83,7 +73,6 @@ $selector: '> *';
grid-auto-flow: dense;
}
-
/**
* Modifier: gap-X
*/
@@ -93,7 +82,6 @@ $selector: '> *';
}
}
-
/**
* Element modifier: row
* 1. Overwrite any previously set column start
diff --git a/objects/mesh/_variables.scss b/objects/mesh/_variables.scss
index 64ca91e..b715fb3 100644
--- a/objects/mesh/_variables.scss
+++ b/objects/mesh/_variables.scss
@@ -1,49 +1,33 @@
-/* =========================================================================
+/* ==========================================================================
objects.mesh.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Number of default columns, can be overwritten per component with custom
* properties.
*/
$columns: defaults.$columns !default;
-
/**
* The `gap` map
*/
-$gaps: (
- 'base',
-) !default;
-
+$gaps: ('base') !default;
/**
* Flow inline-size
*/
$flow-min-inline-size: 200px !default;
-
/**
* Define which namespaced queries you would like to generate for `row`.
* This is handy if you only need `row` on, say, desk, or you only need `row`
* at mobile sizes. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will:
- *
- * $row-in-query: (lap, desk);
+$row-in-query: (lap, desk);
*
* Note: the name of the query must exist in the list of `$queries`
- * in `settings/responsive`
+ * in `settings/responsive`
*/
$row-in-query: () !default;
diff --git a/objects/mesh/test.html b/objects/mesh/test.html
index f195918..ebc1923 100644
--- a/objects/mesh/test.html
+++ b/objects/mesh/test.html
@@ -1,180 +1,372 @@
-
-
-
- Test objects.mesh - Supple CSS
-
-
-
+
+
+
+ Test objects.mesh - Supple CSS
+
+
+
+
+
+
diff --git a/objects/retain/README.md b/objects/retain/README.md
index 33906cd..bbb3b09 100644
--- a/objects/retain/README.md
+++ b/objects/retain/README.md
@@ -6,21 +6,22 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Features
-* Creates a wrapper
-* Multiple sizes
-* Configurable with custom properties
+- Creates a wrapper
+- Multiple sizes
+- Configurable with custom properties
## Use
+
By default the retain container has a width of 100% and is padded on both sides.
```html
@@ -29,16 +30,16 @@ By default the retain container has a width of 100% and is padded on both sides.
```
-
### Modifiers on `.o-retain`
```html
-
+
```
-
### Custom properties
```html
@@ -51,26 +52,26 @@ By default the retain container has a width of 100% and is padded on both sides.
## Available classes
-* `.o-retain`: core retain block
-* `.o-retain--no-padding`: removes the padding
-* `.o-retain--lap`: retains the size to the `lap` size in `defaults.$breakpoints`
-* `.o-retain--desk`: retains the size to the `desk` size in `defaults.$breakpoints`
-* `.o-retain--wall`: retains the size to the `wall` size in `defaults.$breakpoints`
+- `.o-retain`: core retain block
+- `.o-retain--no-padding`: removes the padding
+- `.o-retain--lap`: retains the size to the `lap` size in `defaults.$breakpoints`
+- `.o-retain--desk`: retains the size to the `desk` size in `defaults.$breakpoints`
+- `.o-retain--wall`: retains the size to the `wall` size in `defaults.$breakpoints`
## Configurable variables
+
There are multiple ways to configure the retain object. The Custom properties are calculated at run-time, the SCSS variables will allow you to change things at build-time.
### Custom properties
**On the `.o-retain` block**
-* `--size`: The size where you want to retain to, defaults to `100%`
-
+- `--size`: The size where you want to retain to, defaults to `100%`
### SCSS variables
-* `$space`: wich spacing name you want to use for the padding, defaults to `base`
-* `$sizes`: list of sizes you want to create `o-retain--X` for, defaults to `(lap: 640px, desk: 960px, wall: 1280px)`
+- `$space`: wich spacing name you want to use for the padding, defaults to `base`
+- `$sizes`: list of sizes you want to create `o-retain--X` for, defaults to `(lap: 640px, desk: 960px, wall: 1280px)`
You can overwrite the SCSS variables the following ways:
@@ -80,34 +81,35 @@ You can overwrite the SCSS variables the following ways:
$sizes: (
lap: 640px,
desk: 960px,
- ),
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/objects/retain/variables' with (
$sizes: (
lap: 640px,
desk: 960px,
- ),
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/objects/retain';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/retain/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/objects/retain/test.html).
## Browser support
-* 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)
diff --git a/objects/retain/_index.scss b/objects/retain/_index.scss
index 5f50a89..f109d8b 100644
--- a/objects/retain/_index.scss
+++ b/objects/retain/_index.scss
@@ -1,19 +1,13 @@
-/* =========================================================================
+/* ==========================================================================
objects.retain
Page-level constraining and wrapping elements.
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -21,10 +15,9 @@
@use '../../tools/space';
@use '../../tools/rem';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
/**
* Block: retain
@@ -39,7 +32,6 @@
margin-inline-start: auto; /* [1] */
}
-
/**
* Modifier: no-padding
*/
@@ -48,11 +40,9 @@
padding-inline-start: 0;
}
-
-
-/* Common width modifiers, for use in browsers without
- custom-property support
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Common width modifiers
+/ --------------------------------------------------------------------------- */
@each $key, $value in variables.$sizes {
.o-retain--#{$key} {
diff --git a/objects/retain/_variables.scss b/objects/retain/_variables.scss
index 7f64de3..543db3f 100644
--- a/objects/retain/_variables.scss
+++ b/objects/retain/_variables.scss
@@ -1,27 +1,16 @@
-/* =========================================================================
+/* ==========================================================================
objects.retain.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
$space: 'base' !default;
-
/**
* Sizes
*/
$sizes: (
lap: 640px,
desk: 960px,
- wall: 1280px
+ wall: 1280px,
) !default;
diff --git a/objects/retain/test.html b/objects/retain/test.html
index a923c8b..68016c4 100644
--- a/objects/retain/test.html
+++ b/objects/retain/test.html
@@ -1,64 +1,63 @@
-
-
-
- Test objects.retain - Supple CSS
-
-
-
-
-
diff --git a/test/scss/components/_css-lock.scss b/test/scss/components/_css-lock.scss
index 50bc822..8f4929b 100644
--- a/test/scss/components/_css-lock.scss
+++ b/test/scss/components/_css-lock.scss
@@ -1,30 +1,10 @@
-/* =========================================================================
- components.css-lock
+/* ==========================================================================
+ test.components.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);
}
diff --git a/test/scss/components/_fixture-box.scss b/test/scss/components/_fixture-box.scss
index 36ede24..008adfa 100644
--- a/test/scss/components/_fixture-box.scss
+++ b/test/scss/components/_fixture-box.scss
@@ -1,30 +1,10 @@
-/* =========================================================================
- components.fixture-box
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/* ==========================================================================
+ test.components.fixture-box
+/ =========================================================================== */
@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');
diff --git a/test/scss/components/_preformatted.scss b/test/scss/components/_preformatted.scss
index de674de..6f6b46e 100644
--- a/test/scss/components/_preformatted.scss
+++ b/test/scss/components/_preformatted.scss
@@ -1,26 +1,6 @@
-/* =========================================================================
+/* ==========================================================================
components.preformatted
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
-
-
-
-/* Variables
- ========================================================================= */
-
-
-
-/* Functions/Mixins
- ========================================================================= */
-
-
-
-/* Module
- ========================================================================= */
+/ =========================================================================== */
.c-preformatted {
overflow: auto;
diff --git a/test/scss/components/_test.scss b/test/scss/components/_test.scss
index 05bfd38..14d0b80 100644
--- a/test/scss/components/_test.scss
+++ b/test/scss/components/_test.scss
@@ -1,31 +1,11 @@
-/* =========================================================================
- components.test
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- Variables, mixins & other includes.
- ========================================================================= */
+/* ==========================================================================
+ test.components.test
+/ =========================================================================== */
@use '../../../tools/space';
@use '../../../tools/typography';
@use '../../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
-
-
-/* Functions/Mixins
- ========================================================================= */
-
-
-
-/* Module
- ========================================================================= */
-
.c-test {
counter-reset: test__describe;
}
@@ -74,7 +54,6 @@
}
}
-
.c-test__describe::before,
.c-test__it::before {
display: inline-block;
@@ -84,7 +63,6 @@
color: #999999;
}
-
.c-test__run {
// empty for reference
}
diff --git a/test/scss/elements/_toplevel.scss b/test/scss/elements/_toplevel.scss
index 5f9aded..19c0b96 100644
--- a/test/scss/elements/_toplevel.scss
+++ b/test/scss/elements/_toplevel.scss
@@ -1,32 +1,13 @@
-/* =========================================================================
- elements.toplevel
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/* ==========================================================================
+ test.elements.toplevel
+/ =========================================================================== */
@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; // stylelint-disable-line max-line-length
+ font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen-Sans,
+ Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}
body {
diff --git a/test/scss/settings/_theme.scss b/test/scss/settings/_theme.scss
index b4379f3..e5733e7 100644
--- a/test/scss/settings/_theme.scss
+++ b/test/scss/settings/_theme.scss
@@ -1,29 +1,9 @@
-/* =========================================================================
+/* ==========================================================================
test.settings.theme
-/ ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
-/ ========================================================================= */
+/ =========================================================================== */
@use '../../../tools/responsive';
-
-
-/* Variables
-/ ========================================================================= */
-
-
-
-/* Functions/Mixins
-/ ========================================================================= */
-
-
-
-/* Module
-/ ========================================================================= */
-
:root {
// Light theme colors
--color-slate: #cccccc;
diff --git a/test/scss/test.scss b/test/scss/test.scss
index 371b9db..ef5beed 100644
--- a/test/scss/test.scss
+++ b/test/scss/test.scss
@@ -1,55 +1,55 @@
-/* =========================================================================
- Supple
- In-browser CSS framework; Fluid, Variable, supple if you will
- ========================================================================= */
+/* ==========================================================================
+ Supple test file
+/ =========================================================================== */
-/* Settings
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Settings
+/ --------------------------------------------------------------------------- */
@use '../../settings/defaults';
+/* --------------------------------------------------------------------------
+ Tools
+/ --------------------------------------------------------------------------- */
-
-/* Tools
- ========================================================================= */
-
-// @import '../../tools/functions';
-// @use '../../tools/mixins';
@use '../../tools/responsive';
-
-
-/* Generic
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Generic
+/ --------------------------------------------------------------------------- */
@use '../../generic/reset';
-
-
-/* Elements
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Elements
+/ --------------------------------------------------------------------------- */
@use 'elements/toplevel';
-
-
-/* Objects
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Objects
+/ --------------------------------------------------------------------------- */
@use '../../objects/list-clean';
@use '../../objects/layout' with (
- $fit-in-query: (lap, desk),
+ $fit-in-query: (
+ lap,
+ desk,
+ ),
$fill-in-query: lap,
$gaps: (
'base',
- 'tiny'
+ 'tiny',
)
);
@use '../../objects/mesh' with (
- $row-in-query: (lap, desk),
+ $row-in-query: (
+ lap,
+ desk,
+ ),
$gaps: (
'base',
- 'tiny'
+ 'tiny',
)
);
@use '../../objects/retain' with (
@@ -57,64 +57,79 @@
lap: 640px,
desk: 960px,
wall: 1280px,
- billboard: 1440px
+ billboard: 1440px,
)
);
@use '../../objects/aspect-ratio' with (
$ratios: (
- (2:1),
- (4:3),
- (16:9),
- (21:9)
+ (2: 1),
+ (4: 3),
+ (16: 9),
+ (21: 9),
)
);
@use '../../objects/flow' with (
$gaps: (
- 'tiny'
+ 'tiny',
)
);
-
-
-/* Components
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Components
+/ --------------------------------------------------------------------------- */
@use 'components/test';
@use 'components/fixture-box';
@use 'components/preformatted';
@use 'components/css-lock';
-
-
-/* Theme
-/ ========================================================================= */
+/* --------------------------------------------------------------------------
+ Theme
+/ --------------------------------------------------------------------------- */
@use 'settings/theme';
-
-
-/* Utilities
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Utilities
+/ --------------------------------------------------------------------------- */
@use '../../utilities/columns' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
@use '../../utilities/colspan' with (
- $in-query: lap,
+ $in-query: lap
);
@use '../../utilities/colstart' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
@use '../../utilities/offset' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
@use '../../utilities/clearfix';
@use '../../utilities/spacing' with (
- $in-query: (lap, desk)
+ $in-query: (
+ lap,
+ desk,
+ )
);
@use '../../utilities/visually-hidden' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
@use '../../utilities/hidden' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
diff --git a/tools/README.md b/tools/README.md
index 42d26d3..d064823 100644
--- a/tools/README.md
+++ b/tools/README.md
@@ -22,12 +22,12 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
Supple’s tools are categorised so you only need to `@use` the tools you want:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/space";
-@use "node_modules/@supple-kit/supple-css/tools/responsive";
+@use 'node_modules/@supple-kit/supple-css/tools/space';
+@use 'node_modules/@supple-kit/supple-css/tools/responsive';
.your-module {
- @include responsive.mq("lap") {
- margin-inline-start: space.get("tiny");
+ @include responsive.mq('lap') {
+ margin-inline-start: space.get('tiny');
}
}
```
@@ -37,7 +37,7 @@ Supple’s tools are categorised so you only need to `@use` the tools you want:
This layer contains everything space related. You can `@use` this tool in your own component like this:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/space";
+@use 'node_modules/@supple-kit/supple-css/tools/space';
```
### function: `space.get()`
@@ -54,8 +54,8 @@ Returns the spacing value converted to `rem` units. The `$name` must be present
```scss
.selector {
- margin-inline-start: space.get("tiny");
- margin-inline-end: space.get("large");
+ margin-inline-start: space.get('tiny');
+ margin-inline-end: space.get('large');
}
// with default settings becomes
.selector {
@@ -79,7 +79,7 @@ Returns the spacing-factor value. The `$name` must be present in `defaults.$spac
```scss
.selector {
margin-inline-start: calc(
- #{space.get-factor("small")} * #{defaults.$baseline}
+ #{space.get-factor('small')} * #{defaults.$baseline}
);
}
// with default settings becomes
@@ -93,7 +93,7 @@ Returns the spacing-factor value. The `$name` must be present in `defaults.$spac
This layer is used to convert any `px` value to `rem`. You can `@use` this tool in your own component like this:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/rem";
+@use 'node_modules/@supple-kit/supple-css/tools/rem';
```
### function: `rem.convert()`
@@ -127,7 +127,7 @@ Converts `px` values to `rem`. If you pass in another format instead of `px` it
This layer contains some accessibility helper mixins. You can `@use` this tool in your own component like this:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/a11y";
+@use 'node_modules/@supple-kit/supple-css/tools/a11y';
```
### Mixin: `a11y.visually-hidden`
@@ -161,7 +161,7 @@ This layer contains all the functions & mixins regarding to typography.
You can `@use` this tool in your own component like this:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/typography";
+@use 'node_modules/@supple-kit/supple-css/tools/typography';
```
### Mixin `typography.font-size`
@@ -213,7 +213,7 @@ This layer contains all the tools for responsive web design.
You can `@use` this tool in your own component like this:
```scss
-@use "node_modules/@supple-kit/supple-css/tools/responsive";
+@use 'node_modules/@supple-kit/supple-css/tools/responsive';
```
### Mixin: `responsive.color-scheme()`
@@ -245,7 +245,7 @@ Apply a media query defined in `defaults.$queries`.
```scss
.selector {
- @include responsive.mq("lap") {
+ @include responsive.mq('lap') {
outline: 1px solid #ff0000;
}
}
diff --git a/tools/_a11y.scss b/tools/_a11y.scss
index 01cddc3..bc09159 100644
--- a/tools/_a11y.scss
+++ b/tools/_a11y.scss
@@ -1,13 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
tools.a11y
Helpers to create more accessible sites
- ========================================================================= */
+/ =========================================================================== */
-/* Visually-hidden
+/* --------------------------------------------------------------------------
+ Visually-hidden
Hides an element visually while still allowing the content to be accessible
to assistive technology, e.g. screen readers.
Usage: @include visually-hidden();
- ========================================================================= */
+/ --------------------------------------------------------------------------- */
@mixin visually-hidden {
border: 0 !important;
diff --git a/tools/_internal/_functions.scss b/tools/_internal/_functions.scss
index 9d9f05f..01c209a 100644
--- a/tools/_internal/_functions.scss
+++ b/tools/_internal/_functions.scss
@@ -1,6 +1,6 @@
-/* =========================================================================
+/* ==========================================================================
tools.functions
-/ ========================================================================= */
+/ =========================================================================== */
@use 'sass:list';
@use 'sass:math';
@@ -9,10 +9,9 @@
@use 'sass:string';
@use '../../settings/defaults';
-
-
-/* Functions
-/ ========================================================================= */
+/* --------------------------------------------------------------------------
+ Functions
+/ --------------------------------------------------------------------------- */
/**
* A small, internally-used function to remove the units from a given value.
@@ -52,9 +51,9 @@
@return $res;
}
-
-/* Responsive functions
-/ ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive functions
+/ --------------------------------------------------------------------------- */
@function get-breakpoints($query) {
$media-string: ();
@@ -63,9 +62,15 @@
@each $key, $value in $media-map {
@if $value and $value != 0 {
@if $media-string == (()) {
- $media-string: list.append($media-string, string.unquote('(#{$key}: #{$value})'));
+ $media-string: list.append(
+ $media-string,
+ string.unquote('(#{$key}: #{$value})')
+ );
} @else {
- $media-string: list.append($media-string, string.unquote('and (#{$key}: #{$value})'));
+ $media-string: list.append(
+ $media-string,
+ string.unquote('and (#{$key}: #{$value})')
+ );
}
}
}
@@ -119,7 +124,12 @@
$resolved-value: value-to-em($parsed-value);
}
- $return: map.merge($return, ($key: $resolved-value));
+ $return: map.merge(
+ $return,
+ (
+ $key: $resolved-value,
+ )
+ );
}
@return $return;
diff --git a/tools/_rem.scss b/tools/_rem.scss
index fd249f5..bb47fa0 100644
--- a/tools/_rem.scss
+++ b/tools/_rem.scss
@@ -1,42 +1,36 @@
-/* =========================================================================
+/* ==========================================================================
tools.rem
functions an mixins to make life with `rem` units easy
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
@use 'sass:math';
@use 'sass:meta';
@use 'sass:list';
@use '../settings/defaults';
-
-
-/* Module
- ========================================================================= */
-
/**
* to-rem
* Converts a single px value to a rem unit based on the current browser context
*/
-@function to-rem($value) {
- @if meta.type-of($value) == string or math.is-unitless($value) == true or math.unit($value) != 'px' {
+@function to-rem($value, $font-size-override: false) {
+ @if (meta.type-of($value) == string) or
+ (math.is-unitless($value) == true) or
+ (math.unit($value) != 'px')
+ {
@return $value;
+ } @else if $font-size-override and math.unit($font-size-override) == 'px' {
+ @return (math.div($value, $font-size-override) * 1rem);
} @else {
@return (math.div($value, defaults.$font-size) * 1rem);
}
}
-
/**
* Rem
* Converts all `px` values in a set of values to `rem` values.
* Usage:
- rem.convert(0 auto 300px);
- rem.convert(26px);
+rem.convert(0 auto 300px);
+rem.convert(26px);
*/
@function convert($value) {
@if meta.type-of($value) == list {
diff --git a/tools/_responsive.scss b/tools/_responsive.scss
index 2170882..096fcef 100644
--- a/tools/_responsive.scss
+++ b/tools/_responsive.scss
@@ -1,12 +1,7 @@
-/* =========================================================================
+/* ==========================================================================
tools.responsive
As per: https://web.dev/new-responsive/#conclusion
-/ ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
-/ ========================================================================= */
+/ =========================================================================== */
@use 'sass:list';
@use 'sass:math';
@@ -17,27 +12,25 @@
@use '_internal/functions';
@use 'rem';
-
-/* =========================================================================
+/* --------------------------------------------------------------------------
User preference
-/ ========================================================================= */
-
-/* Mixin: color-scheme
- A little wrapper that lets you define your dark mode custom
- properties in a way that supports a toggle component.
- Usage:
-
- :root {
- // Light theme colors
- --color-slate: #cccccc;
-
- @include responsive.color-scheme() {
- // Dark theme colors
- --color-slate: #000000;
- }
- }
-/ ========================================================================= */
-
+/ --------------------------------------------------------------------------- */
+
+/**
+ * Mixin: color-scheme
+ * A little wrapper that lets you define your dark mode custom
+ * properties in a way that supports a toggle component.
+ * Usage:
+:root {
+ // Light theme colors
+ --color-slate: #cccccc;
+
+ @include responsive.color-scheme() {
+ // Dark theme colors
+ --color-slate: #000000;
+ }
+}
+ */
@mixin color-scheme($dark: true, $attribute: data-user-color-scheme) {
$mode: 'dark';
@if $dark == true {
@@ -61,24 +54,23 @@
}
}
-/* =========================================================================
+/* --------------------------------------------------------------------------
Viewport & formfactor
-/ ========================================================================= */
-
-/* Query
- Apply a media query defined in `defaults.$queries`.
-
- Example usage:
- @include responsive.mq(wall) {
- outline: 1px solid #ff0000;
- }
-
- Or you can pass in a type:
- @include responsive.mq(wall, print) {
- outline: 1px solid #ff0000;
- }
-/ ========================================================================= */
+/ --------------------------------------------------------------------------- */
+
+/**
+ * Query
+ * Apply a media query defined in `defaults.$queries`.
+ * Example usage:
+@include responsive.mq(wall) {
+ outline: 1px solid #ff0000;
+}
+// Or you can pass in a type:
+@include responsive.mq(wall, print) {
+ outline: 1px solid #ff0000;
+}
+ */
@mixin mq($name, $type: all) {
@if not map.has-key(defaults.$queries, $name) {
@error '"defaults.$queries" does not contain "#{$name}", expects one of the following: #{map.keys(defaults.$queries)}'; // stylelint-disable-line max-line-length
@@ -89,19 +81,18 @@
}
}
-/* in-query
- A little helper mixin to quickly create responsive variants of a certain
- selector. The mixin's `@content` will be also applied to the parent selector.
-
- Example usage:
- $in-query-YOURMODULE: (lap, desk);
- .your-module {
- @include responsive.in-query($in-query-YOURMODULE) {
- outline: 1px solid #ff0000;
- }
- }
-/ ========================================================================= */
-
+/**
+ * in-query
+ * A little helper mixin to quickly create responsive variants of a certain
+ * selector. The mixin's `@content` will be also applied to the parent selector.
+ * Example usage:
+$in-query-YOURMODULE: (lap, desk);
+.your-module {
+ @include responsive.in-query($in-query-YOURMODULE) {
+ outline: 1px solid #ff0000;
+ }
+}
+ */
@mixin in-query($queries) {
@content;
@@ -122,35 +113,60 @@
}
}
-/* Lock
- Basic usage:
+/**
+ * Lock
+ * Basic usage:
+font-size: responsive.lock(18px, 24px);
- font-size: responsive.lock(18px, 24px);
+// This will scale the property perfectly and smooth from 18px
+// on `lap` breakpoint to 24px on `desk` breakpoint.
- This will scale the property perfectly and smooth from 18px
- on `lap` breakpoint to 24px on `desk` breakpoint.
-
- You can also redefine the min- and max breakpoints like this:
-
- padding: responsive.lock(18px, 24px, desk, wall);
-/ ========================================================================= */
+// You can also redefine the min- and max breakpoints like this:
+padding: responsive.lock(18px, 24px, desk, wall);
+ */
@function lock($size-min: 16px, $size-max: 20px, $min-bp: lap, $max-bp: desk) {
$return: $size-min;
+ $root-font-size: defaults.$font-size;
+
+ /**
+ * Check if responsive lock is used on a root element only, then set the root
+ * font-size to browser default 16px
+ */
+ @if (list.length(&) == 1) and
+ (
+ (string.unquote(list.nth(list.nth(&, 1), 1)) == 'html') or
+ (string.unquote(list.nth(list.nth(&, 1), 1)) == ':root') or
+ (string.unquote(list.nth(list.nth(&, 1), 1)) == ':host')
+ )
+ {
+ $root-font-size: 16px;
+ }
- @if map.has-key(defaults.$breakpoints, $min-bp) and map.has-key(defaults.$breakpoints, $max-bp) {
- @if math.unit($size-min) == 'px' and math.unit($size-max) == 'px' and math.unit(map.get(defaults.$breakpoints, $min-bp)) == 'px' and math.unit(map.get(defaults.$breakpoints, $max-bp)) == 'px' { // stylelint-disable-line max-line-length
+ @if map.has-key(defaults.$breakpoints, $min-bp) and
+ map.has-key(defaults.$breakpoints, $max-bp)
+ {
+ @if (math.unit($size-min) == 'px') and
+ (math.unit($size-max) == 'px') and
+ (math.unit(map.get(defaults.$breakpoints, $min-bp)) == 'px') and
+ (math.unit(map.get(defaults.$breakpoints, $max-bp)) == 'px')
+ {
+ // stylelint-disable-line max-line-length
$min-bp-value: map.get(defaults.$breakpoints, $min-bp);
$max-bp-value: map.get(defaults.$breakpoints, $max-bp);
// Breakpoints
- $min-bp-rem-unitless: functions.strip-units(rem.convert($min-bp-value));
- $max-bp-rem-unitless: functions.strip-units(rem.convert($max-bp-value));
+ $min-bp-rem-unitless: functions.strip-units(
+ rem.to-rem($min-bp-value, $root-font-size)
+ );
+ $max-bp-rem-unitless: functions.strip-units(
+ rem.to-rem($max-bp-value, $root-font-size)
+ );
// Sizes
- $size-min-rem: rem.convert($size-min);
+ $size-min-rem: rem.to-rem($size-min, $root-font-size);
$size-min-rem-unitless: functions.strip-units($size-min-rem);
- $size-max-rem: rem.convert($size-max);
+ $size-max-rem: rem.to-rem($size-max, $root-font-size);
$size-max-rem-unitless: functions.strip-units($size-max-rem);
// Calculations
@@ -158,10 +174,16 @@
($size-max-rem-unitless - $size-min-rem-unitless),
($max-bp-rem-unitless - $min-bp-rem-unitless)
);
- $y-axis-intersection: -($min-bp-rem-unitless) * $slope + $size-min-rem-unitless;
+ $y-axis-intersection: (
+ (-($min-bp-rem-unitless) * $slope) + $size-min-rem-unitless
+ );
// fill up return
- $return: clamp(#{$size-min-rem}, #{$y-axis-intersection * 1rem} + #{($slope * 100) * 1vw}, #{$size-max-rem});
+ $return: clamp(
+ #{$size-min-rem},
+ #{$y-axis-intersection * 1rem} + #{($slope * 100) * 1vw},
+ #{$size-max-rem}
+ );
} @else {
@error '$size-min, $size-max, $min-bp and $max-bp should be defined in px.';
}
diff --git a/tools/_space.scss b/tools/_space.scss
index 9d0c4b4..71ab75b 100644
--- a/tools/_space.scss
+++ b/tools/_space.scss
@@ -1,20 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
tools.space
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use 'sass:map';
@use '../settings/defaults';
@use './rem';
-
-
-/* Functions
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Functions
+/ --------------------------------------------------------------------------- */
/**
* Get space-factor
@@ -26,7 +20,6 @@
@return map.get(defaults.$space-factors, $name);
}
-
/**
* Get `rem`mified space
*/
diff --git a/tools/_typography.scss b/tools/_typography.scss
index d79cbbd..f482b4d 100644
--- a/tools/_typography.scss
+++ b/tools/_typography.scss
@@ -1,43 +1,36 @@
-/* =========================================================================
+/* ==========================================================================
tools.typography
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
@use 'sass:meta';
@use 'sass:math';
@use '../settings/defaults';
@use 'rem';
+/**
+ * Font size
+ * Generates a rem font-size and a baseline-compatible unitless line-height
+ * from a pixel font-size value. Basic usage is simply:
+@include typography.font-size(18px);
+ * You can force a specific line-height by passing it as the second argument:
+@include typography.font-size(16px, 1);
+ * You can also modify the line-height by increments, while staying in the
+ * baseline grid, by setting the `$modifier` parameter. It takes a positive
+ * or negative integer, and it will add or remove 'lines' to the generated
+ * line-height. This is the recomended way to do it, unless you really need
+ * an absolute value. i.e.:
+// add 2 lines:
+@include typography.font-size(24px, $modifier: +2);
-
-/* Font size
- Generates a rem font-size and a baseline-compatible unitless line-height
- from a pixel font-size value. Basic usage is simply:
-
- @include typography.font-size(18px);
-
- You can force a specific line-height by passing it as the second argument:
-
- @include typography.font-size(16px, 1);
-
- You can also modify the line-height by increments, while staying in the
- baseline grid, by setting the `$modifier` parameter. It takes a positive
- or negative integer, and it will add or remove 'lines' to the generated
- line-height. This is the recomended way to do it, unless you really need
- an absolute value. i.e.:
-
- // add 2 lines:
- @include typography.font-size(24px, $modifier: +2);
-
- // subtract 1 line:
- @include typography.font-size(24px, $modifier: -1);
- ========================================================================= */
-
-@mixin font-size($font-size, $line-height: auto, $modifier: 0, $important: false) {
+// subtract 1 line:
+@include typography.font-size(24px, $modifier: -1);
+ */
+@mixin font-size(
+ $font-size,
+ $line-height: auto,
+ $modifier: 0,
+ $important: false
+) {
@if meta.type-of($font-size) == number {
@if math.unit($font-size) != 'px' {
@error '`#{$font-size}` needs to be a pixel value.';
@@ -64,7 +57,10 @@
$line-height: $lines * defaults.$baseline;
line-height: math.div($line-height, $font-size) $important;
} @else {
- @if meta.type-of($line-height) == number or $line-height == 'inherit' or $line-height == 'normal' {
+ @if (meta.type-of($line-height) == number) or
+ ($line-height == 'inherit') or
+ ($line-height == 'normal')
+ {
line-height: $line-height $important;
} @else if $line-height != 'none' and $line-height != false {
@error 'Oh noes! `#{$line-height}` is not a valid value for `$line-height`.';
diff --git a/utilities/clearfix/README.md b/utilities/clearfix/README.md
index 8214de8..0379b77 100644
--- a/utilities/clearfix/README.md
+++ b/utilities/clearfix/README.md
@@ -6,18 +6,23 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Use
```html
-
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda temporibus numquam repellendus repellat eaque illum, praesentium facere iure fugiat obcaecati? Facere, reprehenderit recusandae quae ea numquam id ut doloribus adipisci.
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
+ temporibus numquam repellendus repellat eaque illum, praesentium facere iure
+ fugiat obcaecati? Facere, reprehenderit recusandae quae ea numquam id ut
+ doloribus adipisci.
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda temporibus numquam repellendus repellat eaque illum, praesentium facere iure fugiat obcaecati? Facere, reprehenderit recusandae quae ea numquam id ut doloribus adipisci.
-
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus asperiores minima porro nemo, perferendis magni molestias rem illum, inventore fuga sunt! Amet, quisquam voluptatum hic modi doloribus rerum eveniet sint?
+
.u-clearfix
+
the container should clear the floated images
+
+
+
+
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Assumenda
+ temporibus numquam repellendus repellat eaque illum, praesentium
+ facere iure fugiat obcaecati? Facere, reprehenderit recusandae quae
+ ea numquam id ut doloribus adipisci.
+
+
+
+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Temporibus
+ asperiores minima porro nemo, perferendis magni molestias rem illum,
+ inventore fuga sunt! Amet, quisquam voluptatum hic modi doloribus
+ rerum eveniet sint?
+
+
-
-
-
-
+
+
+
+
diff --git a/utilities/colspan/README.md b/utilities/colspan/README.md
index 9c92936..453bd23 100644
--- a/utilities/colspan/README.md
+++ b/utilities/colspan/README.md
@@ -6,57 +6,47 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Features
-* Easy & flexible colspans in your objects & components
-* Works nicely with `objects.layout` and `objects.mesh`
+- Easy & flexible colspans in your objects & components
+- Works nicely with `objects.layout` and `objects.mesh`
## Use
```html
-
- spans 7 of 12 columns
-
-
- spans 5 of 12 columns
-
+
spans 7 of 12 columns
+
spans 5 of 12 columns
```
```html
-
- spans 7 of 12 columns
-
-
- spans 5 of 12 columns
-
+
spans 7 of 12 columns
+
spans 5 of 12 columns
```
-
## Available classes
-By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
-* `.u-colspan-X`, spans over the designated number of columns
-* `.u-colspan-X@[QUERY-NAME]`: applies colspan at the given media query. (available in `$in-query` SCSS setting)
+By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
+- `.u-colspan-X`, spans over the designated number of columns
+- `.u-colspan-X@[QUERY-NAME]`: applies colspan at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
-
### SCSS variables
-* `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
-* `$in-query`: a list of queries where `.u-colspan-X@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
+- `$in-query`: a list of queries where `.u-colspan-X@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
@@ -64,27 +54,34 @@ You can overwrite the SCSS variables the following ways:
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colspan' with (
$columns: 10,
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colspan/variables' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colspan';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/utilities/colspan/_index.scss b/utilities/colspan/_index.scss
index fadeceb..909328f 100644
--- a/utilities/colspan/_index.scss
+++ b/utilities/colspan/_index.scss
@@ -1,20 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colspan
Classes provide a colspan custom property for use in objects or
components which can handle colspans eg. `object.layout` or `object.mesh`.
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -25,17 +19,15 @@
@use '../../tools/responsive';
@use './tools';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
@include tools.build;
-
-
-/* Responsive
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive
+/ --------------------------------------------------------------------------- */
@if meta.type-of(variables.$in-query) == 'list' {
@each $query in variables.$in-query {
@@ -45,6 +37,8 @@
}
} @else {
@include responsive.mq(variables.$in-query) {
- @include tools.build('#{defaults.$responsive-modifier}#{variables.$in-query}');
+ @include tools.build(
+ '#{defaults.$responsive-modifier}#{variables.$in-query}'
+ );
}
}
diff --git a/utilities/colspan/_tools.scss b/utilities/colspan/_tools.scss
index feea200..5449017 100644
--- a/utilities/colspan/_tools.scss
+++ b/utilities/colspan/_tools.scss
@@ -1,28 +1,10 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colspan.tools
Functions and/or mixins used in this module
- ========================================================================= */
+/ =========================================================================== */
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
-
-/**
- * Use the settings & tools in this sheet
- */
@use './variables';
-
-
-/* Functions
- ========================================================================= */
-
-
-
-/* Mixins
- ========================================================================= */
-
@mixin build($modifier: '') {
@for $i from 1 through variables.$columns {
.u-colspan-#{$i}#{$modifier} {
diff --git a/utilities/colspan/_variables.scss b/utilities/colspan/_variables.scss
index d5f79ac..8effc60 100644
--- a/utilities/colspan/_variables.scss
+++ b/utilities/colspan/_variables.scss
@@ -1,33 +1,21 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colspan.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Columns, makes it easy to create several proportional columns
*/
$columns: defaults.$columns !default;
-
/**
* Define which namespaced queries you would like to generate for each
* of the colspans. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will.
- *
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the breakpoint must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/colstart/README.md b/utilities/colstart/README.md
index 49d5be0..f70a21f 100644
--- a/utilities/colstart/README.md
+++ b/utilities/colstart/README.md
@@ -6,46 +6,40 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Features
-* Easy & flexible column starts in your objects & components
-* Works nicely with `objects.mesh`
+- Easy & flexible column starts in your objects & components
+- Works nicely with `objects.mesh`
## Use
```html
-
- starts at column 3
-
-
- starts at column 7
-
+
starts at column 3
+
starts at column 7
```
-
## Available classes
-By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
-* `.u-colstart-X`, spans over the designated number of columns
-* `.u-colstart-X@[QUERY-NAME]`: applies colstart at the given media query. (available in `$in-query` SCSS setting)
+By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
+- `.u-colstart-X`, spans over the designated number of columns
+- `.u-colstart-X@[QUERY-NAME]`: applies colstart at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
-
### SCSS variables
-* `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
-* `$in-query`: a list of breakpoints where `.u-colstart-X@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
+- `$in-query`: a list of breakpoints where `.u-colstart-X@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
@@ -53,27 +47,34 @@ You can overwrite the SCSS variables the following ways:
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colstart' with (
$columns: 10,
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colstart/variables' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/colstart';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/utilities/colstart/_index.scss b/utilities/colstart/_index.scss
index 8827c70..3641bf3 100644
--- a/utilities/colstart/_index.scss
+++ b/utilities/colstart/_index.scss
@@ -1,20 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colstart
Classes provide a column-start custom property for use in objects
or components which can handle column-starts eg. `object.mesh`.
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -25,17 +19,15 @@
@use '../../tools/responsive';
@use './tools';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
@include tools.build;
-
-
-/* Responsive
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive
+/ --------------------------------------------------------------------------- */
@if meta.type-of(variables.$in-query) == 'list' {
@each $query in variables.$in-query {
@@ -45,6 +37,8 @@
}
} @else {
@include responsive.mq(variables.$in-query) {
- @include tools.build('#{defaults.$responsive-modifier}#{variables.$in-query}');
+ @include tools.build(
+ '#{defaults.$responsive-modifier}#{variables.$in-query}'
+ );
}
}
diff --git a/utilities/colstart/_tools.scss b/utilities/colstart/_tools.scss
index a4f3cd6..3385b2e 100644
--- a/utilities/colstart/_tools.scss
+++ b/utilities/colstart/_tools.scss
@@ -1,28 +1,10 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colstart.tools
Functions and/or mixins used in this module
- ========================================================================= */
+/ =========================================================================== */
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
-
-/**
- * Use the settings & tools in this sheet
- */
@use './variables';
-
-
-/* Functions
- ========================================================================= */
-
-
-
-/* Mixins
- ========================================================================= */
-
@mixin build($modifier: '') {
@for $i from 1 through variables.$columns {
.u-colstart-#{$i}#{$modifier} {
diff --git a/utilities/colstart/_variables.scss b/utilities/colstart/_variables.scss
index fbf7a6c..cdd2a4e 100644
--- a/utilities/colstart/_variables.scss
+++ b/utilities/colstart/_variables.scss
@@ -1,33 +1,21 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colstart.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Columns, makes it easy to create several proportional columns
*/
$columns: defaults.$columns !default;
-
/**
* Define which namespaced queries you would like to generate for each
* of the colstarts. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will.
- *
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the query must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/columns/README.md b/utilities/columns/README.md
index 398d31c..f695082 100644
--- a/utilities/columns/README.md
+++ b/utilities/columns/README.md
@@ -6,46 +6,40 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Features
-* Easy & flexible columns in your objects & components
-* Works nicely with `objects.mesh` and `objects.layout`
+- Easy & flexible columns in your objects & components
+- Works nicely with `objects.mesh` and `objects.layout`
## Use
```html
-
- spans 3 of 10 columns
-
-
- spans 7 of 10 columns
-
+
spans 3 of 10 columns
+
spans 7 of 10 columns
```
-
## Available classes
-By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
-* `.u-columns-X`, spans over the designated number of columns
-* `.u-columns-X@[QUERY-NAME]`: applies colums at the given media query. (available in `$in-query` SCSS setting)
+By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
+- `.u-columns-X`, spans over the designated number of columns
+- `.u-columns-X@[QUERY-NAME]`: applies colums at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
-
### SCSS variables
-* `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
-* `$in-query`: a list of breakpoints where `.u-columns-X@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
+- `$in-query`: a list of breakpoints where `.u-columns-X@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
@@ -53,27 +47,34 @@ You can overwrite the SCSS variables the following ways:
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns' with (
$columns: 10,
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns/variables' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/columns';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/utilities/columns/_index.scss b/utilities/columns/_index.scss
index 2b3c1a4..5b01cba 100644
--- a/utilities/columns/_index.scss
+++ b/utilities/columns/_index.scss
@@ -1,21 +1,15 @@
-/* =========================================================================
+/* ==========================================================================
utilities.columns
Classes provide a column custom property for use in objects
or components which can handle columns eg. `object.mesh` and
`objects.layout`.
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -26,17 +20,15 @@
@use '../../tools/responsive';
@use './tools';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
@include tools.build;
-
-
-/* Responsive
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive
+/ --------------------------------------------------------------------------- */
@if meta.type-of(variables.$in-query) == 'list' {
@each $query in variables.$in-query {
@@ -46,6 +38,8 @@
}
} @else {
@include responsive.mq(variables.$in-query) {
- @include tools.build('#{defaults.$responsive-modifier}#{variables.$in-query}');
+ @include tools.build(
+ '#{defaults.$responsive-modifier}#{variables.$in-query}'
+ );
}
}
diff --git a/utilities/columns/_tools.scss b/utilities/columns/_tools.scss
index 884be78..1a0ab37 100644
--- a/utilities/columns/_tools.scss
+++ b/utilities/columns/_tools.scss
@@ -1,28 +1,10 @@
-/* =========================================================================
+/* ==========================================================================
utilities.colums.tools
Functions and/or mixins used in this module
- ========================================================================= */
+/ =========================================================================== */
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
-
-/**
- * Use the settings & tools in this sheet
- */
@use './variables';
-
-
-/* Functions
- ========================================================================= */
-
-
-
-/* Mixins
- ========================================================================= */
-
@mixin build($modifier: '') {
@for $i from 1 through variables.$columns {
.u-columns-#{$i}#{$modifier} {
diff --git a/utilities/columns/_variables.scss b/utilities/columns/_variables.scss
index 4715420..8b94f52 100644
--- a/utilities/columns/_variables.scss
+++ b/utilities/columns/_variables.scss
@@ -1,33 +1,21 @@
-/* =========================================================================
+/* ==========================================================================
utilities.columns.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Columns, makes it easy to create several proportional columns
*/
$columns: defaults.$columns !default;
-
/**
* Define which namespaced queries you would like to generate for each
* of the colstarts. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will.
- *
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the query must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/hidden/README.md b/utilities/hidden/README.md
index a18b0da..9d96d79 100644
--- a/utilities/hidden/README.md
+++ b/utilities/hidden/README.md
@@ -6,29 +6,34 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Use
```html
```
### responsive modifiers
+
When you set media queries in `$in-query` you can use them like this:
```html
```
@@ -36,47 +41,51 @@ When you set media queries in `$in-query` you can use them like this:
**On the `.u-hidden` block**
-* `.u-hidden`: core visually hidden block
-* `.u-hidden@[QUERY-NAME]`: applies hidden at the given media query. (available in `$in-query` SCSS setting)
+- `.u-hidden`: core visually hidden block
+- `.u-hidden@[QUERY-NAME]`: applies hidden at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
### SCSS variables
-* `$in-query`: a list of media queries where `.u-hidden@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$in-query`: a list of media queries where `.u-hidden@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden/variables' with (
$in-query: (
- lap
- ),
+ lap,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/hidden';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/utilities/hidden/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/utilities/hidden/test.html).
## Browser support
-* 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)
diff --git a/utilities/hidden/_index.scss b/utilities/hidden/_index.scss
index fded823..375564f 100644
--- a/utilities/hidden/_index.scss
+++ b/utilities/hidden/_index.scss
@@ -1,29 +1,22 @@
-/* =========================================================================
+/* ==========================================================================
utilities.hidden
Completely remove from the flow and hide it from screenreaders
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@use './variables';
@use '../../tools/responsive';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
.u-hidden {
@include responsive.in-query(variables.$in-query) {
diff --git a/utilities/hidden/_variables.scss b/utilities/hidden/_variables.scss
index dd4394a..49b7b47 100644
--- a/utilities/hidden/_variables.scss
+++ b/utilities/hidden/_variables.scss
@@ -1,19 +1,15 @@
-/* =========================================================================
+/* ==========================================================================
utilities.hidden.variables
- ========================================================================= */
-
-/* Variables
- ========================================================================= */
+/ =========================================================================== */
/**
* Define which namespaced queries you would like to generate for `hidden`.
* This is handy if you only need `hidden` on, say, desk, or you only need it
* at mobile sizes. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will.
- *
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the query must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/hidden/test.html b/utilities/hidden/test.html
index 74b2884..4f1cd49 100644
--- a/utilities/hidden/test.html
+++ b/utilities/hidden/test.html
@@ -1,23 +1,27 @@
-
-
-
- Test utilities.hidden - Supple CSS
-
-
-
+
+
+
+ Test utilities.hidden - Supple CSS
+
+
+
+
+
Supple CSS: utilities.hidden tests
-
-
Supple CSS: utilities.hidden tests
+
.u-hidden
-
.u-hidden
-
-
renders "with some hidden text" as totally hidden.
-
-
-
-
-
-
+
+ renders "with some hidden text" as totally hidden.
+
+
+
+
+
+
+
+
diff --git a/utilities/offset/README.md b/utilities/offset/README.md
index fab18e7..f12d1b1 100644
--- a/utilities/offset/README.md
+++ b/utilities/offset/README.md
@@ -6,46 +6,40 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Features](#features)
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Browser support](#browser-support)
+- [Features](#features)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Features
-* Easy & flexible offsets in your objects & components
-* Works nicely with `objects.layout`
+- Easy & flexible offsets in your objects & components
+- Works nicely with `objects.layout`
## Use
```html
-
- starts a column 3
-
-
- starts a column 7
-
+
starts a column 3
+
starts a column 7
```
-
## Available classes
-By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
-* `.u-offset-X`, spans over the designated number of columns
-* `.u-offset-X@[QUERY-NAME]`: applies offset at the given media query. (available in `$in-query` SCSS setting)
+By default we generate classes for 12 columns but it can be configured with the `$columns` setting.
+- `.u-offset-X`, spans over the designated number of columns
+- `.u-offset-X@[QUERY-NAME]`: applies offset at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
-
### SCSS variables
-* `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
-* `$in-query`: a list of media queries where `.u-offset-X@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$columns`, number of columns we generate classes for, defaults to `defaults.$columns`
+- `$in-query`: a list of media queries where `.u-offset-X@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
@@ -53,27 +47,34 @@ You can overwrite the SCSS variables the following ways:
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/offset' with (
$columns: 10,
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/offset/variables' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/offset';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/utilities/offset/_index.scss b/utilities/offset/_index.scss
index cdfe76f..edd8fb4 100644
--- a/utilities/offset/_index.scss
+++ b/utilities/offset/_index.scss
@@ -1,20 +1,14 @@
-/* =========================================================================
+/* ==========================================================================
utilities.offset
Classes provide a offset custom property for use in objects
or components which can handle offsets eg. `object.layout`.
- ========================================================================= */
-
-/* Use/Forward rules
- `@use` or `@forward` everything you need here from other files.
- These can include variables, mixins & other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -25,17 +19,15 @@
@use '../../tools/responsive';
@use './tools';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
@include tools.build;
-
-
-/* Responsive
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive
+/ --------------------------------------------------------------------------- */
@if meta.type-of(variables.$in-query) == 'list' {
@each $query in variables.$in-query {
@@ -45,6 +37,8 @@
}
} @else {
@include responsive.mq(variables.$in-query) {
- @include tools.build('#{defaults.$responsive-modifier}#{variables.$in-query}');
+ @include tools.build(
+ '#{defaults.$responsive-modifier}#{variables.$in-query}'
+ );
}
}
diff --git a/utilities/offset/_tools.scss b/utilities/offset/_tools.scss
index 58672fd..b0438a9 100644
--- a/utilities/offset/_tools.scss
+++ b/utilities/offset/_tools.scss
@@ -1,28 +1,10 @@
-/* =========================================================================
+/* ==========================================================================
utilities.offset.tools
Functions and/or mixins used in this module
- ========================================================================= */
+/ =========================================================================== */
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
-
-/**
- * Use the settings & tools in this sheet
- */
@use './variables';
-
-
-/* Functions
- ========================================================================= */
-
-
-
-/* Mixins
- ========================================================================= */
-
@mixin build($modifier: '') {
@for $i from 1 through variables.$columns {
.u-offset-#{$i}#{$modifier} {
diff --git a/utilities/offset/_variables.scss b/utilities/offset/_variables.scss
index 6ae93db..96a2822 100644
--- a/utilities/offset/_variables.scss
+++ b/utilities/offset/_variables.scss
@@ -1,33 +1,21 @@
-/* =========================================================================
+/* ==========================================================================
utilities.offset.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* Columns, makes it easy to create several proportional columns
*/
$columns: defaults.$columns !default;
-
/**
* Define which namespaced queries you would like to generate for each
* of the offsets. It allows you to only compile as much CSS as you need.
* All are empty by default, but you can add queries at will.
- *
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the breakpoint must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/spacing/README.md b/utilities/spacing/README.md
index 2553047..f581212 100644
--- a/utilities/spacing/README.md
+++ b/utilities/spacing/README.md
@@ -6,13 +6,14 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Browser support](#browser-support)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Browser support](#browser-support)
## Use
+
This utility generates set of classes mostly used by Supple's users. You can add classes to your liking by adding them to the configuration variables. Below you find some examples of how you can use this utility.
```html
@@ -21,32 +22,38 @@ This utility generates set of classes mostly used by Supple's users. You can add
- Applies margin at the start of the inline axis with the value of `space.get('base')`
+ Applies margin at the start of the inline axis with the value of
+ `space.get('base')`
- Applies margin at the start of the inline axis with the value of `space.get('large')`
+ Applies margin at the start of the inline axis with the value of
+ `space.get('large')`
- Applies padding at the start and end of the block axis with the value of `space.get('base')`
+ Applies padding at the start and end of the block axis with the value of
+ `space.get('base')`
```
+
The are a lot more combinations possible, please check [the variables SCSS file](./_variables.scss) for more options.
### responsive modifiers
+
When you set media queries in `$in-query` you can use them like this:
```html
- Applies padding at the start of the block axis with the `tiny` spacing value until `palm` breakpoint.
- Applies padding at the start of the block axis with the value of `base` spacing value from `palm` breakpoint.
+ Applies padding at the start of the block axis with the `tiny` spacing value
+ until `palm` breakpoint. Applies padding at the start of the block axis with
+ the value of `base` spacing value from `palm` breakpoint.
```
## Available classes
-* `.u-[PROPERTY]--[SIZE]`: core spacing block
+- `.u-[PROPERTY]--[SIZE]`: core spacing block
## Configurable variables
@@ -57,21 +64,29 @@ When you set media queries in `$in-query` you can use them like this:
The properties that you want to generate spacings for. `key` is the classname, `value` is the property name.
**example:**
+
```scss
$properties: (
- 'padding': 'padding', // generates `u-padding`
- 'margin': 'margin', // generates `u-margin`
+ 'padding': 'padding',
+ // generates `u-padding`
+ 'margin': 'margin',
+ // generates `u-margin`
);
// or
$properties: (
- 'p': 'padding', // generates `u-p`
- 'm': 'margin', // generates `u-m`
- 'i': 'inset', // generates `u-i`
+ 'p': 'padding',
+ // generates `u-p`
+ 'm': 'margin',
+ // generates `u-m`
+ 'i': 'inset',
+ // generates `u-i`
);
```
+
**defaults to:**
+
```scss
$properties: (
'margin-block-end': 'margin-block-end',
@@ -83,20 +98,19 @@ $properties: (
And which sizes you want to generate? The names must be present in `defaults.$space-factors` in `settings/_defaults.scss`.
**Example:**
+
```scss
-$sizes: (
- 'tiny',
- 'base'
-);
+$sizes: ('tiny', 'base');
```
+
**Defaults to:**
+
```scss
-$sizes: (
- 'base'
-);
+$sizes: ('base');
```
#### `$in-query`
+
a list of media queries where `.u-[PROPERTY]--[SIZE]@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
@@ -104,7 +118,10 @@ You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/spacing' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ ),
$properties: (
'm': 'margin',
'p': 'padding',
@@ -114,7 +131,9 @@ You can overwrite the SCSS variables the following ways:
)
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/spacing/variables' with (
@@ -129,13 +148,12 @@ or
@use 'node_modules/@supple-kit/supple-css/utilities/spacing';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Browser support
-* 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)
diff --git a/utilities/spacing/_index.scss b/utilities/spacing/_index.scss
index 6374e8c..a7e3dd4 100644
--- a/utilities/spacing/_index.scss
+++ b/utilities/spacing/_index.scss
@@ -1,4 +1,4 @@
-/* =========================================================================
+/* ==========================================================================
utilities.spacing
Utility classes to put specific spacing values onto elements.
The loop can generate us a suite of classes like:
@@ -6,19 +6,13 @@
.u-padding-inline-start--large {}
.u-margin-inline-end--small {}
.u-padding-block--base {}
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -29,17 +23,15 @@
@use '../../tools/responsive';
@use './tools';
-
-
-/* Module
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Module
+/ --------------------------------------------------------------------------- */
@include tools.build;
-
-
-/* Responsive
- ========================================================================= */
+/* --------------------------------------------------------------------------
+ Responsive
+/ --------------------------------------------------------------------------- */
@if meta.type-of(variables.$in-query) == 'list' {
@each $query in variables.$in-query {
@@ -49,6 +41,8 @@
}
} @else {
@include responsive.mq(variables.$in-query) {
- @include tools.build('#{defaults.$responsive-modifier}#{variables.$in-query}');
+ @include tools.build(
+ '#{defaults.$responsive-modifier}#{variables.$in-query}'
+ );
}
}
diff --git a/utilities/spacing/_tools.scss b/utilities/spacing/_tools.scss
index b2306fc..fc5b228 100644
--- a/utilities/spacing/_tools.scss
+++ b/utilities/spacing/_tools.scss
@@ -1,29 +1,11 @@
-/* =========================================================================
+/* ==========================================================================
utilities.spacing.tools
Functions and/or mixins used in this module
- ========================================================================= */
+/ =========================================================================== */
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
-
-/**
- * Use the settings & tools in this sheet
- */
@use './variables';
@use '../../tools/space';
-
-
-/* Functions
- ========================================================================= */
-
-
-
-/* Mixins
- ========================================================================= */
-
@mixin build($modifier: '') {
@each $property-namespace, $property in variables.$properties {
@each $size in variables.$sizes {
diff --git a/utilities/spacing/_variables.scss b/utilities/spacing/_variables.scss
index f4fa4e3..b2fea8c 100644
--- a/utilities/spacing/_variables.scss
+++ b/utilities/spacing/_variables.scss
@@ -1,65 +1,51 @@
-/* =========================================================================
+/* ==========================================================================
utilities.spacing.variables
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
@use '../../settings/defaults';
-
-
-/* Variables
- ========================================================================= */
-
/**
* The properties that you want to generate spacings for
* `key` is the classname, `value` is the property name
*
* Example
- $properties: (
- 'padding': 'padding', // generates `u-padding`
- 'margin': 'margin', // generates `u-margin`
- );
+$properties: (
+ 'padding': 'padding', // generates `u-padding`
+ 'margin': 'margin', // generates `u-margin`
+);
*
* or
- $properties: (
- 'p': 'padding', // generates `u-p`
- 'm': 'margin', // generates `u-m`
- 'i': 'inset', // generates `u-i`
- );
+$properties: (
+ 'p': 'padding', // generates `u-p`
+ 'm': 'margin', // generates `u-m`
+ 'i': 'inset', // generates `u-i`
+);
* By default it's only margins we generate
*/
$properties: (
'margin-block-end': 'margin-block-end',
) !default;
-
/**
* And which sizes you want to generate?
*
* Example
- $sizes: (
- 'tiny',
- );
+$sizes: (
+ 'tiny',
+);
*
* By default it's only `base` we generate
*/
-$sizes: (
- 'base',
-) !default;
-
+$sizes: ('base') !default;
/**
* Define which namespaced queries you would like to generate for
* your spacings.
* All are empty by default, but you can add queries at will.
*
- $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the media query must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/visually-hidden/README.md b/utilities/visually-hidden/README.md
index 12817f8..165f316 100644
--- a/utilities/visually-hidden/README.md
+++ b/utilities/visually-hidden/README.md
@@ -6,29 +6,35 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Use](#use)
-* [Available classes](#available-classes)
-* [Configurable variables](#configurable-variables)
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Use](#use)
+- [Available classes](#available-classes)
+- [Configurable variables](#configurable-variables)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Use
```html
```
### responsive modifiers
+
When you set media queries in `$in-query` you can use them like this:
```html
```
@@ -36,47 +42,52 @@ When you set media queries in `$in-query` you can use them like this:
**On the `.u-visually-hidden` block**
-* `.u-visually-hidden`: core visually hidden block
-* `.u-visually-hidden@[QUERY-NAME]`: applies visually-hidden at the given media query. (available in `$in-query` SCSS setting)
+- `.u-visually-hidden`: core visually hidden block
+- `.u-visually-hidden@[QUERY-NAME]`: applies visually-hidden at the given media query. (available in `$in-query` SCSS setting)
## Configurable variables
### SCSS variables
-* `$in-query`: a list of breakpoints where `.u-visually-hidden@[QUERY-NAME]` is generated for, defaults to: `()`
+- `$in-query`: a list of breakpoints where `.u-visually-hidden@[QUERY-NAME]` is generated for, defaults to: `()`
You can overwrite the SCSS variables the following ways:
```scss
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden' with (
- $in-query: (lap, desk),
+ $in-query: (
+ lap,
+ desk,
+ )
);
```
+
or
+
```scss
// in your own variable file, eg. `_vars.scss`
-@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden/variables' with (
+@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden/variables'
+ with (
$in-query: (
- lap
- ),
+ lap,
+ )
);
// in your manifest file, eg. `styles.scss`
@use 'node_modules/@supple-kit/supple-css/utilities/visually-hidden';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/utilities/visually-hidden/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/utilities/visually-hidden/test.html).
## Browser support
-* 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)
diff --git a/utilities/visually-hidden/_index.scss b/utilities/visually-hidden/_index.scss
index 7b619cf..921f240 100644
--- a/utilities/visually-hidden/_index.scss
+++ b/utilities/visually-hidden/_index.scss
@@ -1,21 +1,15 @@
-/* =========================================================================
+/* ==========================================================================
utilities.visually-hidden
Hides an element visually while still allowing the content to be accessible
to assistive technology, e.g. screen readers.
As per: https://a11yproject.com/posts/how-to-hide-content
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+/ =========================================================================== */
/**
* Forward the variables to the parent stylesheet
*/
@forward './variables';
-
/**
* Use the settings & tools in this sheet
*/
@@ -23,12 +17,6 @@
@use '../../tools/a11y';
@use '../../tools/responsive';
-
-
-
-/* Module
- ========================================================================= */
-
.u-visually-hidden {
@include responsive.in-query(variables.$in-query) {
@include a11y.visually-hidden;
diff --git a/utilities/visually-hidden/_variables.scss b/utilities/visually-hidden/_variables.scss
index cee6fa1..05815ca 100644
--- a/utilities/visually-hidden/_variables.scss
+++ b/utilities/visually-hidden/_variables.scss
@@ -1,9 +1,6 @@
-/* =========================================================================
+/* ==========================================================================
utilities.visually-hidden.variables
- ========================================================================= */
-
-/* Variables
- ========================================================================= */
+/ =========================================================================== */
/**
* Define which namespaced queries you would like to generate for
@@ -12,9 +9,9 @@
* as much CSS as you need.
* All are empty by default, but you can add queries at will.
*
- * $in-query: (lap, desk);
+$in-query: (lap, desk);
*
* Note: the name of the breakpoint must exist in the list of `$queries`
- * in `settings/defaults`
+ * in `settings/defaults`
*/
$in-query: () !default;
diff --git a/utilities/visually-hidden/test.html b/utilities/visually-hidden/test.html
index a3c5d66..969da6d 100644
--- a/utilities/visually-hidden/test.html
+++ b/utilities/visually-hidden/test.html
@@ -1,23 +1,29 @@
-
-
-
- Test utilities.visually-hidden - Supple CSS
-
-
-
+
+
+
+ Test utilities.visually-hidden - Supple CSS
+
+
+
+
+
Supple CSS: utilities.visually-hidden tests
-
-
Supple CSS: utilities.visually-hidden tests
+
.u-visually-hidden
-
.u-visually-hidden
-
-
renders "with some hidden text" as hidden visually but available for assistive technology.
-
-
-
-
-
-
+
+ renders "with some hidden text" as hidden visually but available for
+ assistive technology.
+
](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…
diff --git a/generic/reset/README.md b/generic/reset/README.md
index 45b587d..d734698 100644
--- a/generic/reset/README.md
+++ b/generic/reset/README.md
@@ -6,28 +6,28 @@ Read more about [Supple CSS](https://github.com/supple-css/supple).
## Table of contents
-* [Installation](#installation)
-* [Testing](#testing)
-* [Browser support](#browser-support)
+- [Installation](#installation)
+- [Testing](#testing)
+- [Browser support](#browser-support)
## Use
+
Import this reset before any other stylesheets that generate CSS like this:
```scss
@use 'node_modules/@supple-kit/supple-css/generic/reset';
```
-
## Installation
-Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
+Make sure you've installed/downloaded the Supple CSS library: [Supple CSS installation](../../#installation)
## Testing
-Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/generic/reset/test.html).
+Basic visual tests are in [test.html](https://supple-kit.github.io/supple-css/generic/reset/test.html).
## Browser support
-* 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)
diff --git a/generic/reset/_index.scss b/generic/reset/_index.scss
index ca87abb..3aeec46 100644
--- a/generic/reset/_index.scss
+++ b/generic/reset/_index.scss
@@ -1,20 +1,13 @@
-/* =========================================================================
+/* ==========================================================================
generic.reset
- A thin layer on top of `@csstools/normalize.css` that provides a starting
- point more suitable for web applications.
- ========================================================================= */
-
-/* Use rules
- `@use` everything you need here from other files. Variables, mixins &
- other includes.
- ========================================================================= */
+ A reset of sensible defaults, roughly based on Andy Bell's excellent
+ Modern CSS Reset(https://hankchizljaw.com/wrote/a-modern-css-reset/).
+/ =========================================================================== */
@use 'sass:math';
@use '../../settings/defaults';
@use '../../tools/space';
-
-
/**
* Set the global `box-sizing` state to `border-box`. As per:
* paulirish.com/2012/box-sizing-border-box-ftw
@@ -28,7 +21,6 @@
}
}
-
/**
* 1. Ensure the page always fills at least the entire height of the viewport.
* 2. Always add the vertical scrollbar to prevent layout shifting
@@ -36,14 +28,13 @@
* 4. Apply the `$font-size` & `$line-height-ratio`
*/
html {
- min-block-size: 100vh; /* [1] */
+ min-block-size: 100vh; /* [1] */
overflow-y: scroll; /* [2] */
scroll-behavior: smooth; /* [3] */
font-size: #{math.div(defaults.$font-size, 16px) * 1em}; /* [4] */
line-height: #{defaults.$line-height-ratio}; /* [4] */
}
-
/**
* Remove default margins from elements
*/
@@ -73,7 +64,6 @@ input {
margin: 0;
}
-
/**
* Default indentation value for lists
*/
@@ -86,7 +76,6 @@ dd {
margin-inline-start: space.get();
}
-
/**
* Strip unwanted paddings & styling from elements
*/
@@ -105,7 +94,6 @@ fieldset {
border: 0;
}
-
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
@@ -117,7 +105,6 @@ textarea {
font: inherit;
}
-
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
@@ -127,7 +114,6 @@ pre {
font-size: 1em; /* 2 */
}
-
/**
* Suppress the focus outline on links that cannot be accessed via keyboard.
* This prevents an unwanted focus outline from appearing around elements that
@@ -137,17 +123,15 @@ pre {
outline: none !important;
}
-
/**
* Gets rid of the annoying outline for mouse users but preserves it for
* keyboard users, and is ignored by browsers that don’t support :focus-visible.
* As per: https://twitter.com/LeaVerou/status/1045768279753666562
*/
-:focus:not(:focus-visible) { // stylelint-disable-line selector-pseudo-class-no-unknown
+:focus:not(:focus-visible) {
outline: none;
}
-
/**
* Image
*
@@ -161,14 +145,13 @@ img {
font-style: italic; /* [2] */
}
-
/**
* Remove all animations and transitions for people that prefer not to see them
* 1. Do not remove the animation altogether, but make it super-fast. This has
* several benefits:
* - Preserves the end state of an animation/transition
* - Preserves the possibility to listen to `animationend` and
- * `transitionend` events.
+ * `transitionend` events.
* 2. Only one animation cycle
*/
@media (prefers-reduced-motion: reduce) {
diff --git a/generic/reset/test.html b/generic/reset/test.html
index 6089930..998e124 100644
--- a/generic/reset/test.html
+++ b/generic/reset/test.html
@@ -1,111 +1,136 @@
-
-
-
- 
+ 
+ 
+ 
+ 
-