Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marcbouchenoire/dimmmensions
📏 A collection of dimensions from iOS and iPadOS devices.
https://github.com/marcbouchenoire/dimmmensions
guides ios ipados safe-area
Last synced: 3 months ago
JSON representation
📏 A collection of dimensions from iOS and iPadOS devices.
- Host: GitHub
- URL: https://github.com/marcbouchenoire/dimmmensions
- Owner: marcbouchenoire
- License: mit
- Created: 2021-04-15T17:14:09.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-15T19:06:39.000Z (6 months ago)
- Last Synced: 2024-10-02T09:04:29.812Z (3 months ago)
- Topics: guides, ios, ipados, safe-area
- Language: TypeScript
- Homepage: https://marcbouchenoire.com/projects/dimmmensions
- Size: 2.5 MB
- Stars: 9
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> [!IMPORTANT]
> This project is no longer maintained.
# 
📏 A collection of dimensions from iOS and iPadOS devices.
- 🤖 [**Automated**](#automation): Authored and updated automatically
- 🧪 **Reliable**: Fully tested with [100% code coverage](https://codecov.io/gh/marcbouchenoire/dimmmensions)
- 📦 **Typed**: Written in [TypeScript](https://www.typescriptlang.org/) and includes definitions out-of-the-box
- 💨 **Zero dependencies**
[](https://github.com/marcbouchenoire/dimmmensions/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/dimmmensions)
[](https://bundlephobia.com/package/dimmmensions)
[](https://codecov.io/gh/marcbouchenoire/dimmmensions)
[](https://github.com/marcbouchenoire/dimmmensions/blob/main/LICENSE)
## Introduction
Dimmmensions collects dimensions as objects for each device.
```typescript
interface Dimensions {
device: "iPhone" | "iPad"
name: string
radius: number
scale: number
landscape: OrientedDimensions
portrait: OrientedDimensions
}
```
`landscape` and `portrait` both contain orientation-specific dimensions and size classes.
```typescript
interface OrientedDimensions {
screen: {
width: number
height: number
}
layoutMargins: {
top: number
left: number
right: number
bottom: number
}
readableContent: {
top: number
left: number
right: number
bottom: number
}
safeArea: {
top: number
left: number
right: number
bottom: number
}
sizeClass: {
horizontal: "compact" | "regular"
vertical: "compact" | "regular"
}
}
```
#### Examples
iPhone 11
```json
{
"device": "iPhone",
"name": "iPhone 11",
"radius": 41.5,
"scale": 2,
"landscape": {
"screen": {
"width": 896,
"height": 414
},
"layoutMargins": {
"top": 0,
"left": 64,
"right": 64,
"bottom": 21
},
"readableContent": {
"top": 0,
"left": 116,
"right": 116,
"bottom": 21
},
"safeArea": {
"top": 0,
"left": 48,
"right": 48,
"bottom": 21
},
"sizeClass": {
"horizontal": "regular",
"vertical": "compact"
}
},
"portrait": {
"screen": {
"width": 414,
"height": 896
},
"layoutMargins": {
"top": 48,
"left": 20,
"right": 20,
"bottom": 34
},
"readableContent": {
"top": 48,
"left": 20,
"right": 20,
"bottom": 34
},
"safeArea": {
"top": 48,
"left": 0,
"right": 0,
"bottom": 34
},
"sizeClass": {
"horizontal": "compact",
"vertical": "regular"
}
}
}
```
iPad mini
```json
{
"device": "iPad",
"name": "iPad mini (6th generation)",
"radius": 21.5,
"scale": 2,
"landscape": {
"screen": {
"width": 1133,
"height": 744
},
"sizeClass": {
"horizontal": "regular",
"vertical": "regular"
},
"layoutMargins": {
"top": 24,
"left": 20,
"right": 20,
"bottom": 20
},
"readableContent": {
"top": 24,
"left": 234.5,
"right": 234.5,
"bottom": 20
},
"safeArea": {
"top": 24,
"left": 0,
"right": 0,
"bottom": 20
}
},
"portrait": {
"screen": {
"width": 744,
"height": 1133
},
"sizeClass": {
"horizontal": "regular",
"vertical": "regular"
},
"layoutMargins": {
"top": 24,
"left": 20,
"right": 20,
"bottom": 20
},
"readableContent": {
"top": 24,
"left": 20,
"right": 20,
"bottom": 20
},
"safeArea": {
"top": 24,
"left": 0,
"right": 0,
"bottom": 20
}
}
}
```
## Installation
```bash
npm install dimmmensions
```
## Usage
#### `dimensions`
Import `dimensions`.
```typescript
import { dimensions } from "dimmmensions"
// dimensions: [Dimensions, Dimensions, Dimensions...]
```
#### `getDimensions`
Import `getDimensions`.
```typescript
import { getDimensions } from "dimmmensions"
```
Given no arguments, `getDimensions` will also return all dimensions.
```typescript
const dimensions = getDimensions()
// dimensions: [Dimensions, Dimensions, Dimensions...]
```
Given a specific `width` and `height`, `getDimensions` will return dimensions that match the specified screen size, either in portrait or landscape.
```typescript
const dimensions = getDimensions(320, 568)
// dimensions: [Dimensions]
```
## Automation
Dimensions are extracted from iOS and iPadOS with the `generate` command—using Xcode and Simulator.