Восьмипиксельная сетка

Милослав Волосков

  1. Я архитектор ПО
import great_design;
import vertical_rhythm;

Восьми­пиксельная сетка!

Восьми­пиксельная сетка!

            :root {
                font-size: 16px;
            }
        
            1 point = .5rem
        
            .button {
                padding: .5rem 1rem;
            }
        
import grid_points;
            @function grid_points ($count) {
                @return 8px * $count;
            }
        

Как вставлять текст?

            :root {
                line-height: 1.5;
            }
        

Как вставлять картинки?

            img {
                max-width: 100%;
            }
        

1. Измерять теперь проще

2. Пиксель перфект по умолчанию

3. Всегда четкая графика

Восьмипиксельная сетка более декларативна.

Нет.

Разбивая задачу на отдельные проблемы, мы разбиваем возможности делать искусство.

Алвар Аалто

import grid;

Reseight

Eightilize

Ссылки