Skip to content

Commit 54b3656

Browse files
egrossnickleegrossnickle
committed
Initial commit
0 parents  commit 54b3656

File tree

9 files changed

+170888
-0
lines changed

9 files changed

+170888
-0
lines changed

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
yarn.lock
3+
package-lock.json

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Changelog
2+
All notable changes to this project will be documented in this file.
3+
4+
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
5+
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
6+
7+
## [0.1.0] - 2021-02-22
8+
9+
Initial release

‎README.md‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
# Tailwind CSS Container Bleed Plugin
2+
3+
This plugin generates utilities classes to bleed into container padding and margin at each screen breakpoint.
4+
5+
*Note:* This plugin relies on CSS custom properties.
6+
7+
## Usage
8+
9+
This plugin works in conjunction with the native [Container](https://tailwindcss.com/docs/container) component and its [horizontal padding options](https://tailwindcss.com/docs/container#horizontal-padding). There are no additional options to be configured in the theme.
10+
11+
There are, however, a few options that can be configured when the plugin is included:
12+
13+
```js
14+
tailwind.config.js
15+
16+
module.exports = {
17+
plugins: [
18+
require('./plugins/tailwindcss-container-bleed/index', {
19+
// Defaults
20+
rootSelector: ':root',
21+
screenWidthVar: '--screen-width',
22+
screenWidthDefault: theme('width.screen'),
23+
currentScreenVar: '--current-screen',
24+
currentScreenDefault: screenWidthDefault,
25+
paddingVar: '--container-padding'
26+
})
27+
]
28+
}
29+
```
30+
31+
Currently, this plugin fully works best when `container.center = true`.
32+
33+
## Utilities
34+
35+
The following utility classes are generated:
36+
37+
### Bleed
38+
39+
```
40+
.b-container-padding
41+
.bl-container-padding
42+
.br-container-padding
43+
.bt-container-padding
44+
.bb-container-padding
45+
.bx-container-padding
46+
.by-container-padding
47+
48+
.bl-container-margin
49+
.br-container-margin
50+
.bx-container-margin
51+
52+
.bl-container
53+
.br-container
54+
.bx-container
55+
```
56+
57+
### Negative Margins
58+
59+
```
60+
.-m-container-padding
61+
.-ml-container-padding
62+
.-mr-container-padding
63+
.-mt-container-padding
64+
.-mb-container-padding
65+
.-mx-container-padding
66+
.-my-container-padding
67+
68+
.-ml-container-margin
69+
.-mr-container-margin
70+
.-mx-container-margin
71+
72+
.-ml-container
73+
.-mr-container
74+
.-mx-container
75+
```
76+
77+
### Padding
78+
79+
```
80+
.p-container-padding
81+
.pl-container-padding
82+
.pr-container-padding
83+
.pt-container-padding
84+
.pb-container-padding
85+
.px-container-padding
86+
.py-container-padding
87+
88+
.pl-container-margin
89+
.pr-container-margin
90+
.px-container-margin
91+
92+
.pl-container
93+
.pr-container
94+
.px-container
95+
```

‎demo/index.html‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
5+
<title>bustoutsolutions/tailwindcss-container-bleed examples</title>
6+
7+
<link rel="stylesheet" href="tailwind.min.css" />
8+
</head>
9+
<body>
10+
<header class="container py-12">
11+
<h1 class="mb-12 text-5xl font-bold">Tailwind CSS Container Bleed Plugin</h1>
12+
<p class="mt-6">The following examples use this <a href="https://tailwindcss.com/docs/container">container</a> configuration:</p>
13+
<pre class="max-w-lg mt-6 p-6 text-white bg-gray-800 rounded-2xl"><code class="text-pink-500">container: {
14+
center: true,
15+
padding: {
16+
DEFAULT: '1rem',
17+
md: '2rem',
18+
lg: '4rem'
19+
}
20+
}</code></pre>
21+
<p class="mt-6"><strong>Note:</strong> The default <code>xl</code> and <code>2xl</code> screen breakpoints are disabled in this demo.</p>
22+
</header>
23+
<main class="container py-12 bg-gray-100 rounded-2xl">
24+
<h2 class="text-4xl font-bold">Container</h2>
25+
<code class="text-pink-500">.container</code>
26+
<section>
27+
<div class="mt-6 py-4 bg-gray-300">
28+
<h5 class="text-xl">No Bleed</h5>
29+
</div>
30+
</section>
31+
<section class="mt-12">
32+
<div class="max-w-2xl">
33+
<h3 class="text-3xl font-bold">Bleed</h3>
34+
<p class="text-gray-500">Uses a negative margin to bleed into the container padding and margin. Then applies the container padding and margin back as padding to itself so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.</p>
35+
</div>
36+
<div class="bx-container mt-6 py-4 bg-gray-300">
37+
<h5 class="text-xl">Bleed Left & Right</h5>
38+
<code class="text-pink-500">.bx-container</code> <code class="ml-3 text-gray-500"><small>( .-mx-container .px-container )</small></code>
39+
</div>
40+
<div class="bl-container mt-6 py-4 bg-gray-300">
41+
<h5 class="text-xl">Bleed Left</h5>
42+
<code class="text-pink-500">.bl-container</code> <code class="ml-3 text-gray-500"><small>( .-ml-container .pl-container )</small></code>
43+
</div>
44+
<div class="br-container mt-6 py-4 bg-gray-300">
45+
<h5 class="text-xl">Bleed Right</h5>
46+
<code class="text-pink-500">.br-container</code> <code class="ml-3 text-gray-500"><small>( .-mr-container .pr-container )</small></code>
47+
</div>
48+
</section>
49+
<section class="mt-12">
50+
<div class="max-w-2xl">
51+
<h3 class="text-3xl font-bold">Bleed – Padding Only</h3>
52+
<p class="text-gray-500">Uses a negative margin to bleed into the container padding. Then applies the container padding back as padding to itself so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.</p>
53+
</div>
54+
<div class="bx-container-padding mt-6 py-4 bg-gray-300">
55+
<h5 class="text-xl">Bleed Left & Right – Padding Only</h5>
56+
<code class="text-pink-500">.bx-container-padding</code> <code class="ml-3 text-gray-500"><small>( .-mx-container-padding .px-container-padding )</small></code>
57+
</div>
58+
<div class="bl-container-padding mt-6 py-4 bg-gray-300">
59+
<h5 class="text-xl">Bleed Left – Padding-Only</h5>
60+
<code class="text-pink-500">.bl-container-padding</code> <code class="ml-3 text-gray-500"><small>( .-ml-container-padding .pl-container-padding )</small></code>
61+
</div>
62+
<div class="br-container-padding mt-6 py-4 bg-gray-300">
63+
<h5 class="text-xl">Bleed Right – Padding-Only</h5>
64+
<code class="text-pink-500">.br-container-padding</code> <code class="ml-3 text-gray-500"><small>( .-mr-container-padding .pr-container-padding )</small></code>
65+
</div>
66+
</section>
67+
<section class="mt-12">
68+
<div class="max-w-2xl">
69+
<h3 class="text-3xl font-bold">Bleed – Margin Only</h3>
70+
<p class="text-gray-500">Uses a negative margin to bleed into the container margin. Then applies the container margin back as padding to itself so the content remains aligned. Use the classes in parentheses to apply the negative margin or padding individually.</p>
71+
</div>
72+
<div class="bx-container-margin mt-6 py-4 bg-gray-300">
73+
<h5 class="text-xl">Bleed Left & Right – Margin Only</h5>
74+
<code class="text-pink-500">.bx-container-margin</code> <code class="ml-3 text-gray-500"><small>( .-mx-container-margin .px-container-margin )</small></code>
75+
</div>
76+
<div class="bl-container-margin mt-6 py-4 bg-gray-300">
77+
<h5 class="text-xl">Bleed Left – Margin-Only</h5>
78+
<code class="text-pink-500">.bl-container-margin</code> <code class="ml-3 text-gray-500"><small>( .-mx-container-margin .px-container-margin )</small></code>
79+
</div>
80+
<div class="br-container-margin mt-6 py-4 bg-gray-300">
81+
<h5 class="text-xl">Bleed Right – Margin-Only</h5>
82+
<code class="text-pink-500">.br-container-margin</code> <code class="ml-3 text-gray-500"><small>( .-mx-container-margin .px-container-margin )</small></code>
83+
</div>
84+
</section>
85+
</main>
86+
<main class="container mt-12 py-12 bg-gray-100 rounded-t-2xl">
87+
<h2 class="text-4xl font-bold">More Examples</h2>
88+
<div class="mt-6 max-w-2xl">
89+
<p class="text-gray-500 text-xl leading-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor mauris, ultrices quis lacinia eu, aliquam eu odio. Nulla facilisi. Fusce accumsan scelerisque felis, et efficitur elit. Sed gravida nunc congue neque.</p>
90+
</div>
91+
<section class="bx-container relative flex items-center h-96 mt-12">
92+
<div class="relative z-10 flex-1 text-center">
93+
<h3 class="text-white text-5xl font-bold">Full Bleed</h3>
94+
<p class="mt-6 text-white text-xl leading-8">This section has the class <code>.bx-container</code> applied to break out of the container to the edges of the browser window. The padding re-applied to the section keeps the content width consistent with the rest of the container.</code></p>
95+
</div>
96+
<img class="absolute left-0 top-0 w-full h-full object-cover" src="https://placekitten.com/1440/384">
97+
</section>
98+
<section class="bx-container-padding relative flex items-center h-96 mt-12 bg-blue-500">
99+
<div class="relative z-10 flex-1 text-center">
100+
<h3 class="text-white text-5xl font-bold">Full Bleed – Padding Only</h3>
101+
<p class="mt-6 text-white text-xl leading-8">This section has the class <code>.bx-container-padding</code> applied to break out of the container padding only. The padding re-applied to the section keeps the content width consistent with the rest of the container.</code></p>
102+
</div>
103+
</section>
104+
</main>
105+
</body>
106+
</html>

0 commit comments

Comments
 (0)