Skip to content

Commit 9cf6a2b

Browse files
neojpneojp
committed
Version 1.0.0
0 parents  commit 9cf6a2b

File tree

4 files changed

+171
-0
lines changed

4 files changed

+171
-0
lines changed

‎LICENSE

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
Copyright 2019 Joan Piedra
2+
3+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4+
5+
6+
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
7+
8+
* No Harm: The software may not be used by anyone for systems or activities that actively and knowingly endanger, harm, or otherwise threaten the physical, mental, economic, or general well-being of other individuals or groups, in violation of the United Nations Universal Declaration of Human Rights (https://www.un.org/en/universal-declaration-human-rights/).
9+
10+
* Services: If the Software is used to provide a service to others, the licensee shall, as a condition of use, require those others not to use the service in any way that violates the No Harm clause above.
11+
12+
* Enforceability: If any portion or provision of this License shall to any extent be declared illegal or unenforceable by a court of competent jurisdiction, then the remainder of this License, or the application of such portion or provision in circumstances other than those as to which it is so declared illegal or unenforceable, shall not be affected thereby, and each portion and provision of this Agreement shall be valid and enforceable to the fullest extent permitted by law.
13+
14+
15+
THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
16+
17+
This Hippocratic License is an Ethical Source license (https://ethicalsource.dev) derived from the MIT License, amended to limit the impact of the unethical use of open source software.

‎README.md

+118
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
<p align="center">
2+
<a href="https://tailwindcss.com/" target="_blank"><img width="200" src="https://tailwindcss.com/img/tailwind.svg"></a><br>
3+
A utility-first CSS framework for rapidly building custom user interfaces.
4+
</p>
5+
6+
---
7+
8+
<br>
9+
10+
# Tailwind CSS aspect ratio utilities
11+
12+
This is a Tailwind CSS plugin that adds an utilities for restrict an element with a set [aspect ratio](https://css-tricks.com/aspect-ratio-boxes/) **based on the parent's element's width**.
13+
14+
Maintained by: [Joan Piedra](https://joanpiedra.com) → [@neojp](https://twitter.com/neojp)
15+
16+
## Installation
17+
18+
Install as a node module with either `npm` or `yarn` on your command line
19+
20+
```bash
21+
# Install via npm
22+
npm install --save-dev @neojp/tailwindcss-aspect-ratio-utilities
23+
24+
# Install via yarn
25+
yarn add --dev @neojp/tailwindcss-aspect-ratio-utilities
26+
```
27+
28+
Add this module as a plugin on your [Tailwind configuration file](https://tailwindcss.com/docs/configuration#plugins) (`tailwind.config.js`).
29+
30+
```js
31+
module.exports = {
32+
plugins: [
33+
require('@neojp/tailwindcss-aspect-ratio-utilities')
34+
]
35+
};
36+
```
37+
38+
### Variants
39+
40+
Note that this plugin allows the usage of variants through the key `aspectRatio` and will default to your global variant setting.
41+
42+
```js
43+
module.exports = {
44+
variants: {
45+
aspectRatio: ['responsive']
46+
}
47+
};
48+
```
49+
50+
51+
## Usage
52+
53+
Use the Tailwind utility classes provided by this plugin.
54+
55+
```html
56+
57+
<div class="aspect-ratio-square"></div>
58+
<div class="aspect-ratio-3/2"></div>
59+
<div class="aspect-ratio-2/3"></div>
60+
<div class="aspect-ratio-4/3"></div>
61+
<div class="aspect-ratio-5/6"></div>
62+
<div class="aspect-ratio-16/9"></div>
63+
<div class="aspect-ratio-21/9"></div>
64+
65+
```
66+
67+
### Examples
68+
69+
Draw a gray 256px square box:
70+
71+
```html
72+
<div class="bg-gray-500 w-64">
73+
<div class="aspect-ratio-square"></div>
74+
</div>
75+
```
76+
77+
Restrict an image to a 4/3 aspect ratio:
78+
79+
```html
80+
<div class="bg-gray-500 relative w-64">
81+
<div class="aspect-ratio-4/3"></div>
82+
<img class="absolute h-full left-0 object-cover top-0 w-full" src="https://images.unsplash.com/photo-1575470066032-42f6bce0c7fb?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=80" alt="Unsplash stock image by Josh Hild">
83+
</div>
84+
```
85+
86+
Embed a YouTube video and restrict it to an aspect ratio of 16/9:
87+
88+
```html
89+
<div class="bg-gray-400 mx-auto relative w-1/2">
90+
<div class="aspect-ratio-16/9"></div>
91+
<iframe class="absolute h-full left-0 top-0 w-full" width="560" height="315" src="https://www.youtube.com/embed/21HuwjmuS7A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
92+
</div>
93+
```
94+
95+
## Output
96+
97+
Tailwind will be outputed as follows.
98+
99+
```css
100+
.aspect-ratio-square { padding-top: 100%; }
101+
.aspect-ratio-3\/2 { padding-top: 66.66666666666667%; }
102+
.aspect-ratio-2\/3 { padding-top: 150%; }
103+
.aspect-ratio-4\/3 { padding-top: 75%; }
104+
.aspect-ratio-5\/6 { padding-top: 120%; }
105+
.aspect-ratio-16\/9 { padding-top: 56.25%; }
106+
.aspect-ratio-21\/9 { padding-top: 42.86%; }
107+
```
108+
109+
## Related plugins
110+
111+
Shout out to [tailwindcss-aspect-ratio](https://github.com/webdna/tailwindcss-aspect-ratio) another plugin that attemps to handle aspect ratios on Tailwind CSS.
112+
113+
## Contributing
114+
115+
Feel free to submit a PR request, and send me a message on Twitter ([@neojp](https://twitter.com/neojp)) about it.
116+
117+
## License
118+
This project has been licensed under [the Hippocratic License](https://firstdonoharm.dev/).

‎index.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
module.exports = function addAspectRatioUtilities({ addUtilities, variants }) {
2+
addUtilities({
3+
'.aspect-ratio-square': { paddingTop: '100%' },
4+
'.aspect-ratio-3\\/2': { paddingTop: '66.66666666666667%' },
5+
'.aspect-ratio-2\\/3': { paddingTop: '150%' },
6+
'.aspect-ratio-4\\/3': { paddingTop: '75%' },
7+
'.aspect-ratio-5\\/6': { paddingTop: '120%' },
8+
'.aspect-ratio-16\\/9': { paddingTop: '56.25%' },
9+
'.aspect-ratio-21\\/9': { paddingTop: '42.86%' },
10+
}, variants('aspectRatio'));
11+
};

‎package.json

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
{
2+
"name": "@neojp/tailwindcss-aspect-ratio-utilities",
3+
"description": "Tailwind CSS aspect ratio utilities",
4+
"version": "1.0.0",
5+
"license": "SEE LICENSE IN LICENSE",
6+
"author": "Joan Piedra <[email protected]>",
7+
"main": "index.js",
8+
"repository": {
9+
"type": "git",
10+
"url": "git+ssh://[email protected]/neojp/tailwindcss-aspect-ratio-utilities.git"
11+
},
12+
"bugs": {
13+
"url": "https://github.com/neojp/tailwindcss-aspect-ratio-utilities/issues"
14+
},
15+
"homepage": "https://github.com/neojp/tailwindcss-aspect-ratio-utilities#readme",
16+
"scripts": {
17+
"test": "echo \"Error: no test specified\" && exit 1"
18+
},
19+
"keywords": [
20+
"tailwindcss",
21+
"tailwindcss-plugin",
22+
"tailwindcss-utilities",
23+
"tailwindcss-utility"
24+
]
25+
}

0 commit comments

Comments
 (0)