Skip to content

Commit

Permalink
Merge branch 'v5'
Browse files Browse the repository at this point in the history
  • Loading branch information
@13twelve
13twelve committed Feb 6, 2025
2 parents 05f0e36 + 0463aae commit de02a8e
Show file tree
Hide file tree
Showing 87 changed files with 28,167 additions and 14,214 deletions.
17 changes: 0 additions & 17 deletions .eslintrc
View file

This file was deleted.

19 changes: 11 additions & 8 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,15 @@ AREA 17 strongly believes in design systems and then using these systems to buil

We also wanted to include a few utility classes that would simplify some common styling requirements.

## Documentation and demos

* [area17.github.io/tailwind-plugins/](https://area17.github.io/tailwind-plugins/)

## Requirements

* [TailwindCSS](https://tailwindcss.com/)
* tested in Tailwind <code>2.x.x</code> (with and without JIT) and <code>3.4.x</code>
* `v5.0.0` is tested with Tailwind `v4.0.0` and Tailwind `v3.4.17`
* Versions before `v5.0.0` (`<=4.0.6`) are tested with Tailwind `v`2.x.x` (with and without JIT) and `v3.x.x`</code>`

## Setup

Expand All @@ -26,16 +31,14 @@ Include plugins in `tailwind.config.js`:

## Sample set up files

* [tailwind.config.js](https://github.com/area17/tailwind-plugins/blob/main/docs/tailwind.config.js)
* [frontend.config.json](https://github.com/area17/tailwind-plugins/blob/main/docs/frontend.config.json)
* [tailwind.config.js](https://github.com/area17/tailwind-plugins/blob/main/docs/tailwind.config.js)
* [input.css](https://github.com/area17/tailwind-plugins/blob/main/docs/input.css)

## Documentation and demos

* [area17.github.io/tailwind-plugins/](https://area17.github.io/tailwind-plugins/)

### Breaking changes to Layout in `v3.0.0`
### Breaking changes to Layout in `v5-0-0`

The generated class names in the Layout plugin have been changed to align them closer to Tailwind. [See the migration notes](https://area17.github.io/tailwind-plugins/Layout.html#v3-0-0) and also [see the changelog](https://github.com/area17/tailwind-plugins/blob/main/changelog.md#300---2021-12-07).
The generated class names in the Layout plugin have been changed to align them closer to Tailwind. In `v3.x.x`/`v4.x.x` the format of the Layout class names was `.w-N-cols`, from `v5.x.x` it is `.w-cols-N`.
[See the migration notes](https://area17.github.io/tailwind-plugins/Layout.html#v5-0-0).

## Contribution

Expand Down
27 changes: 27 additions & 0 deletions changelog.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,33 @@ All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [5.0.0] - 2025-02-06

### Changed

Upon the release of Tailwind 4, many of our plugins became incompatible and so updates have been required to enable their continued use in the Tailwind ecosystem.

We leaned that styles added with `addBase` always appear in the CSS, even if not used and require to be purged. And the rules around what we can add are no longer the same, so selectors like `*[class*="scrollbars"]` are no longer allowed, utilities and components must begin with properly formed CSS class names, such as `.scrollbars`. CSS processing for previously allowed CSS from JS like `@screen` and `@apply` are no longer functioning in Tailwind 4. Tailwind 4 also removes the `e()` escape function.

`matchUtilities`/`matchComponents` turn out to be very handy for dynamically generating classes like `.foo-N` to `.foo { property: N }`, along with negative variants when `supportsNegativeValues: true,` is passed to the options.

- ColorTokens uses `addBase` to add its root variables to the CSS
- ColorTokens now prepends `color-` to the generated CSS properties to be more inline with Tailwind naming scheme
- Typography uses `addUtilities` to add the utility classes
- Typography now prepends `font--` to the generated CSS properties to be more inline with Tailwind naming scheme
- Container now uses `addUtilities`
- DevTools now uses `addComponents`
- GridGap now uses `addUtilities`
- Spacing now uses `matchUtilities`
- Layout now uses `matchUtilities` and `addComponents` (This requires a format change from `w-N-cols` to `w-cols-N`)
- GridLine now uses `addComponents` and `matchComponents` and produces less CSS than previous versions
- KeyLine now uses `matchComponents`
- BackgroundFill now uses `matchUtilities` and `addUtilities`
- StrokeFull now uses `matchUtilities` and `addUtilities`
- Underline now uses `matchUtilities` and refactored class structure
- FullBleedScroller now uses `addComponents`
- Scrollbar now uses `addBase`, `addComponents` and `matchComponents`

## [4.0.8] - 2025-02-05

Patch version to usurp older patch versions and include older changelog entries for `content` property fixes in `GridLine`, `Keyline` and `RatioBox`.
Expand Down
26 changes: 13 additions & 13 deletions docs/ColorTokens.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,19 +59,19 @@ <h2 id="output">Output</h2>
<figure class="code-example">
<figcaption class="code-example-filename">app.css</figcaption>
<pre class="code-example-code"><code class="language-css">:root {
--white: #fff;
--grey-5: #f2f2f2;
--grey-10: #e6e6e6;
--grey-15: #d9d9d9;
--grey-54: #757575;
--grey-90: #1a1a1a;
--black: #000;
--blue-01: #0A152B;
--blue-02: #001F5C;
--blue-03: #004F91;
--blue-04: #313BFB;
--blue-05: #81EEF3;
--red-01: #f00;
--color-white: #fff;
--color-grey-5: #f2f2f2;
--color-grey-10: #e6e6e6;
--color-grey-15: #d9d9d9;
--color-grey-54: #757575;
--color-grey-90: #1a1a1a;
--color-black: #000;
--color-blue-01: #0A152B;
--color-blue-02: #001F5C;
--color-blue-03: #004F91;
--color-blue-04: #313BFB;
--color-blue-05: #81EEF3;
--color-red-01: #f00;
}</code></pre>
</figure>

Expand Down
19 changes: 3 additions & 16 deletions docs/Container.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,13 @@ <h2 id="description">Description</h2>

<p>By default all components render across the full width of the viewport. You can use the <code>.container</code> class to create a contained layout. The container class uses the values set in <code>outerGutters</code> and <code>mainColWidths</code> in your <code>tailwind.config.js</code> to create a responsive container.</p>

<p>Note that the default Tailwind container plugin will need to be disabled.</p>

<p>Also includes a <code>.breakout</code> class to allow full 100vw elements inside a container.</p>

<p>From <code>v3.6.0</code> we have a <code>.container-reset</code>, <code>.breakout-reset</code> and there are changes to <code>.breakout</code> to make it more useful.</p>
<p>Note that the default Tailwind container plugin will need to be <a href="./tailwind-setup.html">overidden/disabled.</a></p>

<ul>
<li><code>.container</code> makes a container that conforms to your <code>theme.mainColWidths</code> taking into account your <code>theme.outerGutters</code></li>
<li><code>.breakout</code> breaks out of a <code>.container</code>, to make your element <code>100vw</code> wide</li>
<li><code>.container-reset</code> resets a <code>.container</code> (from <code>v3.6.0</code>)</li>
<li><code>.breakout-reset</code> resets a <code>.breakout</code> (from <code>v3.6.0</code>)</li>
<li><code>.container-reset</code> resets a <code>.container</code></li>
<li><code>.breakout-reset</code> resets a <code>.breakout</code></li>
</ul>

<h2 id="setup">Setup</h2>
Expand Down Expand Up @@ -68,9 +64,6 @@ <h3 id="container">Container</h3>
<p>This site has its content wrapped in <code>&lt;div class="container"></code>. You'll see it is fluid with outer margins set to the <code>frontend.config.json</code> <code>structure.gutters.outer</code> for each breakpoint. At then, when the window is wider than 1520px wide (<code>structure.breakpoints.xxl</code>) the main column is a fixed width of 1440px (<code>structure.breakpoints.container.xxl</code>) and centered within the window.</p>

<h4 id="container-nesting">Container nesting</h4>

<p>Introduced in <code>v3.6.0</code>.</p>

</div>

<div class="container bg-column mt-20 py-20">
Expand All @@ -95,8 +88,6 @@ <h4 id="container-nesting">Container nesting</h4>

<h3 id="container_reset">Container Reset</h3>

<p>Introduced in <code>v3.6.0</code>.</p>

<p>Instead of wrapping all your pages in <code>.container</code>, perhaps you wrap each of your components, and then perhaps at some breakpoint you want go full bleed. In which case <code>.container-reset</code> will be useful. Here, at the <code>lg</code> breakpoint, a <code>.container</code> resets to full bleed:</p>

</div>
Expand Down Expand Up @@ -143,8 +134,6 @@ <h3 id="breakout">Breakout</h3>

<h3 id="breakout_reset">Breakout Reset</h3>

<p>Introduced in <code>v3.6.0</code>.</p>

<p>Breaking out until a breakpoint, in this case <code>lg</code>, at which point the div is contained once again inside of the parent <code>&lt;div class="container"></code>:</p>
</div>

Expand All @@ -162,8 +151,6 @@ <h3 id="breakout_reset">Breakout Reset</h3>

<h3 id="container_inside_breakout">Container width elements inside of breakouts</h3>

<p>Introduced in <code>v3.6.0</code>.</p>

<p>You might want to use a breakout as a full bleed colour block, where some items are full bleed and some items within are constrained by the main container. There are a few ways to do this.</p>

<h4>Nest a <code>.container</code> in <code>.breakout</code>:</h4>
Expand Down
98 changes: 49 additions & 49 deletions docs/FullBleedScroller.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,14 +97,14 @@ <h3>A full bleed scroller, at all breakpoints:</h3>

<div class="breakout mt-20">
<ul class="full-bleed-scroller">
<li class="flex-none w-1-cols-vw h-40 bg-column"></li>
<li class="flex-none w-2-cols-vw h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw h-40 bg-column"></li>
<li class="flex-none w-4-cols-vw h-40 bg-column"></li>
<li class="flex-none w-5-cols-vw h-40 bg-column"></li>
<li class="flex-none w-6-cols-vw h-40 bg-column"></li>
<li class="flex-none w-7-cols-vw h-40 bg-column"></li>
<li class="flex-none w-8-cols-vw h-40 bg-column"></li>
<li class="flex-none w-cols-vw-1 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-2 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-4 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-5 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-6 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-7 h-40 bg-column"></li>
<li class="flex-none w-cols-vw-8 h-40 bg-column"></li>
</ul>
</div>

Expand All @@ -115,14 +115,14 @@ <h3>A full bleed scroller, at all breakpoints:</h3>
class="code-example-code"
><code class="language-html">&lt;div class="breakout">
&lt;ul class="full-bleed-scroller">
&lt;li class="flex-none w-1-cols-vw">&lt;/li>
&lt;li class="flex-none w-2-cols-vw">&lt;/li>
&lt;li class="flex-none w-3-cols-vw">&lt;/li>
&lt;li class="flex-none w-4-cols-vw">&lt;/li>
&lt;li class="flex-none w-5-cols-vw">&lt;/li>
&lt;li class="flex-none w-6-cols-vw">&lt;/li>
&lt;li class="flex-none w-7-cols-vw">&lt;/li>
&lt;li class="flex-none w-8-cols-vw">&lt;/li>
&lt;li class="flex-none w-cols-vw-1">&lt;/li>
&lt;li class="flex-none w-cols-vw-2">&lt;/li>
&lt;li class="flex-none w-cols-vw-3">&lt;/li>
&lt;li class="flex-none w-cols-vw-4">&lt;/li>
&lt;li class="flex-none w-cols-vw-5">&lt;/li>
&lt;li class="flex-none w-cols-vw-6">&lt;/li>
&lt;li class="flex-none w-cols-vw-7">&lt;/li>
&lt;li class="flex-none w-cols-vw-8">&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</figure>
Expand Down Expand Up @@ -152,14 +152,14 @@ <h3>

<div class="breakout md:breakout-reset mt-20">
<ul class="full-bleed-scroller md:before:hidden md:after:hidden">
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-3-cols h-40 bg-column"></li>
</ul>
</div>

Expand All @@ -170,14 +170,14 @@ <h3>
class="code-example-code"
><code class="language-html">&lt;div class="breakout md:breakout-reset">
&lt;ul class="full-bleed-scroller md:before:hidden md:after:hidden">
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-3-cols">&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</figure>
Expand All @@ -196,7 +196,7 @@ <h3>
</p>

<p>
And the children swap there <code>w-3-cols-vw</code> for
And the children swap there <code>w-cols-vw-3</code> for
<code>md:w-3-cols</code> at the <code>md</code> breakpoint (although this
isn't strictly necessary, it does serve to demonstrate when to use the
<code>.*-vw</code> Layout classes over the regular ones).
Expand All @@ -212,14 +212,14 @@ <h3>
<ul
class="full-bleed-scroller md:full-bleed-scroller-reset md:grid md:gap-gutter md:grid-cols-2 lg:grid-cols-3"
>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-3-cols-vw md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
<li class="flex-none w-cols-vw-3 md:w-auto h-40 bg-column"></li>
</ul>
</div>

Expand All @@ -230,14 +230,14 @@ <h3>
class="code-example-code"
><code class="language-html">&lt;div class="breakout md:breakout-reset">&lt;div class="breakout md:unbreakout">
&lt;ul class="full-bleed-scroller md:full-bleed-scroller-reset md:grid md:gap-gutter md:grid-cols-2 lg:grid-cols-3">
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-3-cols-vw md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;li class="flex-none w-cols-vw-3 md:w-auto">&lt;/li>
&lt;/ul>
&lt;/div></code></pre>
</figure>
Expand Down
22 changes: 11 additions & 11 deletions docs/GridLine.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,11 @@ <h2 id="description">Description</h2>
color of the horizontal and vertical strokes independently.
</p>

<p>
<strong>Note:</strong> You will 100% want to make sure your CSS is purged when using this plugin -
as this plugin can create a lot of CSS to cover all the variations.
</p>

<ul>
<li>
<code>grid-line-x</code> - draws grid lines above each child, each is the
Expand Down Expand Up @@ -140,11 +145,6 @@ <h2 id="setup">Setup</h2>
<code>GridGap</code> plugin.
</p>

<p>
You will 100% want to make sure your CSS is purged when using this plugin -
as this plugin can create a lot of CSS to cover all the variations.
</p>

<h2 id="demo">Demo</h2>

<p>Row grid lines, <code>grid-line-x grid-line-x-primary</code>:</p>
Expand Down Expand Up @@ -449,16 +449,16 @@ <h3>Changing the colours of the gridlines</h3>

<p>
And to make secondary border colour row grid lines
<code>grid-line-x-secondary</code> and tertiary border colour column grid
lines <code>grid-line-y-tertiary</code> - to give
<code>grid-line-x-secondary</code> and quaternary border colour column grid
lines <code>grid-line-y-quaternary</code> - to give
<code
>grid-line-x grid-line-x-secondary grid-line-y grid-line-y-tertiary</code
>grid-line-x grid-line-x-secondary grid-line-y grid-line-y-quaternary</code
>:
</p>
</div>

<div
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-x-secondary grid-line-y grid-line-y-tertiary mt-20"
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-gutter grid-line-x grid-line-x-secondary grid-line-y grid-line-y-quaternary mt-20"
>
<div class="h-40 bg-column"></div>
<div class="h-40 bg-column"></div>
Expand Down Expand Up @@ -492,7 +492,7 @@ <h3>Responsive</h3>
</div>

<div
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-gutter gap-y-48 md:gap-y-64 grid-line-x-24 md:grid-line-x-32 xl:grid-line-x-32 grid-line-xfull grid-line-x-primary grid-line-y-0 md:grid-line-y md:grid-line-y-primary md:grid-line-x-tertiary lg:grid-line-y-secondary lg:grid-line-x-0 xl:grid-line-x xl:grid-line-x-primary mt-20"
class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-gutter gap-y-48 md:gap-y-64 grid-line-x-24 md:grid-line-x-32 xl:grid-line-x-32 grid-line-xfull grid-line-x-primary grid-line-y-0 md:grid-line-y md:grid-line-y-primary md:grid-line-x-quaternary lg:grid-line-y-secondary lg:grid-line-x-0 xl:grid-line-x xl:grid-line-x-primary mt-20"
>
<div class="h-40 bg-column"></div>
<div class="h-40 bg-column"></div>
Expand All @@ -514,7 +514,7 @@ <h3>Responsive</h3>
gap-x-gutter
gap-y-48 md:gap-y-64 grid-line-x-24 md:grid-line-x-32 xl:grid-line-x-32
grid-line-xfull grid-line-x-primary
grid-line-y-0 md:grid-line-y md:grid-line-y-primary md:grid-line-x-tertiary
grid-line-y-0 md:grid-line-y md:grid-line-y-primary md:grid-line-x-quaternary
lg:grid-line-y-secondary lg:grid-line-x-0
xl:grid-line-x xl:grid-line-x-primary"></code></pre>
</figure>
Expand Down
Loading

0 comments on commit de02a8e

Please sign in to comment.