Как стать автором
Обновить

Яндекс.Интернет, как верстали макет

Время на прочтение1 мин
Количество просмотров2.1K
Заглянув в код страницы internet.yandex.ru, увидел интересную штуку:
< — NOTE: Не подключать в production -->

Сам яваскрипт в файле оказался следующим
/*
* Только для внутненнего использования!
*
* Добавляет в документ виртуальную 14-колоночную сетку, накладываемую поверх
* всего (2% отступ слева/справа, 12 столбцов по 8%).
*
* Удобно для проверки соответствия результата макету. Сетка показывается,
* только если в query добавлен параметр columns (e.g. index.html?columns)
*
* DANGER: Подключать в конце страницы (по крайней мере на студийной вёрстке), иначе шапка сдвигается на 1px
*/

function _columns(a) {
if (window.location.search.indexOf(«columns») == -1) {
return;
}

document.write('');

for (var i = 0, l = a.length; i < l; i++) {
document.write('');
}
}

_columns([2, 10, 18, 26, 34, 42, 50, 58, 66, 74, 82, 90, 98]);


Результат работы можно посмотреть на internet.yandex.ru/?columns

А что, действительно хорошая идея. Добавляем в вёрстку строку с подключением яваскрипта, — получаем разметку поверх страницы. Можно легко и удобно проверить «соответствие результата макету».
Теги:
Хабы:
Всего голосов 190: ↑186 и ↓4+182
Комментарии53

Публикации

Истории

Работа

Ближайшие события

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
19 сентября
CDI Conf 2024
Москва
20 – 22 сентября
BCI Hack Moscow
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
25 сентября
Конференция Yandex Scale 2024
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн
3 – 18 октября
Kokoc Hackathon 2024
Онлайн