Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis.

Vertical Rhythm

powered by custom properties

There have been many aproaches to "vertical rhythm". Most of them use a lot of calculations and a lot of style definitions. With the help of CSS variables we can reduce the boilerplate to a minimum.

Images

2 x baseline

4 x baseline

6 x baseline

Lorem ipsum dolor!

Vitae iusto dolores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Vitae iusto dolores!

Lorem ipsum dolor!

const foo = 'foo'
let counter = 0
do {
  console.log(counter)
} while ++counter < 10

Item 1
Item 2
Item 3
1. Item 1
2. Item 2
Item 4
Item 5
Item 6
1. Item 1
2. Item 2
3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
Item 7
Item 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

fluid Images (cropped)

Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

const foo = 'foo'
let counter = 0
do {
  console.log(counter)
} while ++counter < 10

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Corporis iusto vitae...

Item 1
Item 2
Item 3
1. Item 1
2. Item 2
Item 4
Item 5
Item 6
1. Item 1
2. Item 2
3. Item 3
  1. Item 1
  2. Item 2
  3. Item 3
  4. Item 4
  5. Item 5
  6. Item 6
Item 7
Item 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Corporis iusto vitae...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Vitae iusto dolores!

Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Lorem ipsum dolor!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

fluid Images (cropped)

const foo = 'foo'
let counter = 0
do {
  console.log(counter)
} while ++counter < 10

fluid Images (cropped)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Vitae iusto dolores!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Corporis iusto vitae...

fluid Images (cropped)

Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Item 1
Item 2
Item 3
- Item 1
- Item 2
Item 4
Item 5
Item 6
- Item 1
- Item 2
- Item 3
  - Item 1
  - Item 2
  - Item 3
  - Item 4
  - Item 5
  - Item 6
Item 7
Item 8

Corporis iusto vitae...

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

Lorem ipsum dolor!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. Corporis sit, inventore dignissimos.

placeholder image Corporis sit, inventore dignissimos. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, quas id quiavitae iusto assumenda. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis sit, inventore dignissimos. Facilis perferendis totam magni veritatis, assumenda consectetur! Ad vitae iusto dolores, delectus mollitia assumenda quas id quia doloribus. consectetur! Ad vitae iusto dolores dignissimos. Facilis perferendis totam magni dignissimos.