У нас есть небольшой макет Photoshop для работы, поскольку мы продолжаем создавать шаблон для отдельной страницы галереи.
Сначала мы стилизовали ссылки «Далее» и «Назад». Они находятся в абсолютно позиционированном поле на панели галереи, чтобы мы могли центрировать их на странице, несмотря на то, что другие кнопки и прочее уже находятся на панели. Они имеют тот же класс, что и кнопка «Отправить один», поэтому здесь есть постоянство.
Далее у нас есть очень тонкий левый столбец, в котором можно получить текст. Мы начинаем с сетки 1/8 7/8, но 1/8 слишком тонкая. Мы меняем его на 1/4 3/4, но это уже слишком. Как и сказочный медвежонок, 1/6 5/6 было в самый раз.
Мы немного поработаем с типографикой в этом узком столбце, добавив заголовок (в
конечно, так как это самый важный заголовок на странице), описание и другие разделы. Большая часть типографики просто встает на свои места, основываясь на нашей простой и надежной настройке типографики.
Сетка 5/6 предназначена для изображения. Хороший и большой, и это здорово. Он имеет светло-серый фон, как и изображения в сообщениях в блогах (например,
Мы думаем о том, чтобы немного поэкспериментировать с тем, как мы стилизуем теги. Смотрим вокруг на CodePen (вот ссылка на тег «теги», META ALERT). В итоге мы думаем, что это излишне, и оставляем их как обычные ссылки.
Мы заставляем «полноразмерную» кнопку работать одним из самых простых способов, которые мы можем сделать, открываем новое окно с размерами полноразмерного изображения и отображаем в нем изображение. Это как модальная коробка из начала 2000-х! Но мне нравится это. Это просто, для этого не требуется много кода (как в лайтбоксе), и взаимодействие с ним очевидно. Даже лучше, если вы спросите меня.