https://github.com/liitfr/nombredor
φ = (1 + sqrt(5)) / 2
https://github.com/liitfr/nombredor
golden-ratio sugarss
Last synced: about 2 months ago
JSON representation
φ = (1 + sqrt(5)) / 2
- Host: GitHub
- URL: https://github.com/liitfr/nombredor
- Owner: liitfr
- License: mit
- Created: 2017-02-27T09:22:23.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-19T01:42:20.000Z (over 7 years ago)
- Last Synced: 2025-03-12T22:45:35.002Z (3 months ago)
- Topics: golden-ratio, sugarss
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
README
# Nombredor
[](https://www.npmjs.com/package/nombredor)
[](https://opensource.org/licenses/MIT)
**φ = (1 + sqrt(5)) / 2**
Basically, an adaptation of [Responsive-Design-with-Golden-Ratio](https://github.com/etchedprints/Responsive-Design-with-Golden-Ratio) that works with **postcss**.
## Code
```sss
:root
--nombredor: 1.618
--base-nbdor: 100%
--nbdor-1: calc(var(--base-nbdor) / var(--nombredor))
--nbdor-2: calc(var(--base-nbdor) - var(--nbdor-1))
--nbdor-3: calc(var(--nbdor-2) / var(--nombredor))
--nbdor-4: calc(var(--nbdor-2) - var(--nbdor-3))
--nbdor-5: calc(var(--nbdor-4) / var(--nombredor))
--nbdor-6: calc(var(--nbdor-4) - var(--nbdor-5))
--nbdor-7: calc(var(--nbdor-6) / var(--nombredor))
--nbdor-8: calc(var(--nbdor-6) - var(--nbdor-7))
--nbdor-9: calc(var(--nbdor-8) / var(--nombredor))
--nbdor-10: calc(var(--nbdor- 8) - var(--nbdor-9))
```
## Some use cases
### Grids
```sss
.full
width: var(--base-nbdor)
.xl
width: calc(var(--base-nbdor) - 2 * var(--nbdor-4))
.l
width: var(--nbdor-1)
.m
width: var(--nbdor-2)
.s
width: var(--nbdor-3)
.xs
width: var(--nbdor-4)
```
### Responsive Padding
```sss
.full,
.xl,
.l,
.m,
.s,
.xs
padding: var(--nbdor-7)
```
### Color shades
```sss
--base-color: #4f5354
--baseColorLighter: color(var(--base-color) l(var(--nbdor-2)))
--baseColorLight: color(var(--base-color) l(var(--nbdor-4)))
```