Статьи

GridControl: система наложения сетки для разработки дизайна.

Февраль 9, 2018

Сетки — это фундаментальная концепция дизайна, которая выходит за пределы тенденций. Еще долго после того, как исчезнут блестящие, без засечек, отражающие тени web 2.0, сетки все еще будут здесь. Когда мы получаем доступ к цифровым мультимедиа через импланты в нашем мозгу и видим Интернет через экраны, которые появляются прямо в нашем видении, там будет дизайн на основе сетки. Когда пещерные люди с древними резными рисунками на стенах пещеры, там были решетки. Хорошо, возможно не стены пещеры. Есть витрина веб-дизайна, которую я нашел, когда проводил обзор галереи, которая специально демонстрирует сайты с великолепным дизайном сетки, называемая Design By Grid, Для того, чтобы сетки были действительно эффективными, вам действительно нужно соблюдать их. Нет «такого рода соответствует этому, такого рода соответствует этому». Это должно быть мертвым, или это только кажется любительским и дешевым. Внимание к деталям — это то, что делает великих дизайнеров великими.

 

Правитель: лучший друг разработчика сетки

ruler.jpg

 

Кажется довольно очевидным. Лучший способ узнать, что-то выстраивается в линию, — это поставить линейку и проверить. Ничего подобного. Как вы думаете, Норм Абрам обходит взгляды измерениями, когда он запускает удивительную установку кухонного прилавка. Нет. Но ты бы тоже не догнал Норма, если бы на его блестящем новом мониторе была металлическая линейка. Нет, нам понадобится цифровая линейка.

 

Наложение цифровой сетки

Многое из этого бизнеса выравнивания уже позаботилось о вас. По умолчанию текст выровнен по левому краю, для этого вам не понадобится линейка. Если вы перемещаете несколько объектов влево, и они располагаются вертикально, вы можете верить, что они будут четными, это просто природа технологии. Но есть вещи, которые не просто выстраиваются автоматически. Многие из ваших объектов будут иметь собственные отступы и поля, ваши изображения будут содержать графические элементы, которые необходимо учитывать. Текст может расти и уменьшаться, и ваша сетка должна выдерживать этот процесс. Итак, давайте вернемся к этому. Что было бы идеально, так это прозрачная сетка, которую мы могли бы положить прямо на экран. Мы можем это сделать. Инструменты просты:повторяющийся прозрачный PNG со строками, размер страницы размером с весь экран, некоторая магия для включения и выключения по желанию . Давайте предоставим себе некоторые возможности и предоставим пользователю возможность выбора вертикальных линий, горизонтальных линий или обоих. Нам понадобится отдельная разметка для всех:

<div id="vertical-grid-overlay"></div>
<div id="horizontal-grid-overlay"></div>
<div id="both-grid-overlay"></div>

CSS довольно прост:

 

#vertical-grid-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: url(images/grid-vert.png) repeat;
	display: none;
	padding: 10px;
}

Два других имеют идентичный CSS за исключением фонового изображения. Вот как я сделал файл PNG. Холст размером 100 x 100 пикселей и несколько светлых линий, все по 10 пикселей друг от друга, причем одна посередине чуть темнее остальных. Для горизонтальной версии я просто повернул холст, а для «обоих» я просто поместил их друг на друга.

gridphotoshop.png

Обратите внимание на дисплей: нет; в CSS. По умолчанию сетка отключена . Нам нужен способ , чтобы включить сетку на . Небольшой Javascript сделает:

 

 

<a onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='block';" href="#">Turn on Vertical Grid</a>
<a onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='block';" href="#">Turn on Horizontal Grid</a>
<a onclick="javascript:document.getElementById('both-grid-overlay').style.display='block';" href="#">Turn on Both Grids</a>

 

Теперь, когда у нас есть способ их включить, было бы неплохо отключить их. Одна интересная особенность этого эффекта лайтбокса «весь экран» в том, что он полностью деактивирует все, что находится под ним. Другими словами, мы не сможем просто разместить ссылку «отключить сетки» на странице, потому что, как только сетка закончится, вы не сможете щелкнуть по ней. По независящим от меня причинам, даже если вы установите и сетку, и ссылку как абсолютно позиционированные и установите z-индекс ссылки над сеткой, она все равно будет покрыта. Чтобы обойти это, давайте просто поместим ссылку «отключить» внутри самого элемента сетки (вот почему у меня там был этот отступ, если вы следили за ним).

 

<div id="vertical-grid-overlay">
    <p class="alert">
        <a onclick="javascript:document.getElementById('vertical-grid-overlay').style.display='none';" href="#">TURN OFF GRID</a>
    </p>
</div>

<div id="horizontal-grid-overlay">
    <p class="alert">
        <a onclick="javascript:document.getElementById('horizontal-grid-overlay').style.display='none';" href="#">TURN OFF GRID</a>
    </p>
</div>

<div id="both-grid-overlay">
    <p class="alert">
        <a onclick="javascript:document.getElementById('both-grid-overlay').style.display='none';" href="#">TURN OFF GRID</a>
    </p>
</div>

Я немного расшифровал ссылку:

 

p.alert {
    background: red;
    color: white;
    padding: 5px;
    width: 120px;
}

 

Результат

Проверьте
страницу примера .

 


example.png

 

[СКАЧАТЬ ПРИМЕР]

 

Другие варианты

Конечно, после того, как я написал эту статью и написал код примера, я нашел несколько других способов сделать это, которые довольно хороши. Одним из них является букмарклет Javascript под названием
Grid, который позволяет размещать сетку на любом сайте одним нажатием кнопки. Это довольно приятно, но в конечном итоге это, вероятно, более интенсивно, чем нужно, множество функций.
Gridmark — еще одна из них с некоторыми различными функциями, включая некоторые возможности настройки.

 

Оригинальный пост здесь .

31
Share: