项目作者: liitfr

项目描述 :
φ = (1 + sqrt(5)) / 2
高级语言:
项目地址: git://github.com/liitfr/nombredor.git
创建时间: 2017-02-27T09:22:23Z
项目社区:https://github.com/liitfr/nombredor

开源协议:MIT License

下载


Nombredor

version
License: MIT

φ = (1 + sqrt(5)) / 2

Basically, an adaptation of Responsive-Design-with-Golden-Ratio that works with postcss.

Code

  1. :root
  2. --nombredor: 1.618
  3. --base-nbdor: 100%
  4. --nbdor-1: calc(var(--base-nbdor) / var(--nombredor))
  5. --nbdor-2: calc(var(--base-nbdor) - var(--nbdor-1))
  6. --nbdor-3: calc(var(--nbdor-2) / var(--nombredor))
  7. --nbdor-4: calc(var(--nbdor-2) - var(--nbdor-3))
  8. --nbdor-5: calc(var(--nbdor-4) / var(--nombredor))
  9. --nbdor-6: calc(var(--nbdor-4) - var(--nbdor-5))
  10. --nbdor-7: calc(var(--nbdor-6) / var(--nombredor))
  11. --nbdor-8: calc(var(--nbdor-6) - var(--nbdor-7))
  12. --nbdor-9: calc(var(--nbdor-8) / var(--nombredor))
  13. --nbdor-10: calc(var(--nbdor- 8) - var(--nbdor-9))

Some use cases

Grids

  1. .full
  2. width: var(--base-nbdor)
  3. .xl
  4. width: calc(var(--base-nbdor) - 2 * var(--nbdor-4))
  5. .l
  6. width: var(--nbdor-1)
  7. .m
  8. width: var(--nbdor-2)
  9. .s
  10. width: var(--nbdor-3)
  11. .xs
  12. width: var(--nbdor-4)

Responsive Padding

  1. .full,
  2. .xl,
  3. .l,
  4. .m,
  5. .s,
  6. .xs
  7. padding: var(--nbdor-7)

Color shades

  1. --base-color: #4f5354
  2. --baseColorLighter: color(var(--base-color) l(var(--nbdor-2)))
  3. --baseColorLight: color(var(--base-color) l(var(--nbdor-4)))