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

[Rchee]

крутая штука, сохраню, плюсанул Вам

[balvardo]

Я не понял что то. Еще раз поясните, какую смысловую нагрузку несет эта сетка?

[MindiveR]

сетка самым верхним слоем (помните графические редакторы?). даёт возможность проверять выправку дизайна, чтобы вовремя подправить. вещь удобная. умелое использование положительно влияет на точность и аккуратность конечного результата.

[microsoft]

Только странно что её не убрали после запуска сервиса.

[ArSoron]

Запарка, как всегда...

[Coder]

Там много чего не убрали после запуска сервиса. Даже код приветствия авторизованного пользователя, некого Sundukov. Впрочем, там же есть ответ яндекса на Ваш вопрос: <--Найдётся&nbsр;всё-->
;)

[merlin-vrn]

А ещё <div id="debug_div"></div> внизу страницы...

[Coder]

Можно, например, наглядно проконтролировать отступы и равнение по краю.
К тому же интересна сама идея подключения яваскрипта для подобных целей.

[balvardo]

Спасибо

[gigigi]

выравнивание вёрстки по сетке. достаточно важная штука в веб-дизайне

[balvardo]

Гм, для резины да, полезно.

[steff]

А еще посмотрите код страницы edu.mail.ru/cgi-bin/splash
Довольно-таки оригинальный способ "облегчить" странчку :)))

[MKrivosheev]

Превосходно :) комментирование решает :)

[Holy_Cheater]

Про сетку писали несколько раз, поищите :)

[tot_ra]

Помоему правильней использовать plugin к браузеру типа GridFox и минимизировать количество кода используемого для дебага пусть и визуальных фич.

[tot_ra]

Ссылка побилась
http://www.puidokas.com/portfolio/gridfo…

[Davidov]

В других браузерах тоже стоит проверять )

[rtm]

вау, Тайные рецепты от artlebedev

[sunnybear]

да этим рецептам уже больше года, гуляют по ангоязычному интернету и CSS-фреймворкам.

[vithar]

Не знаю, что там по чему гуляет, но это мой код.
http://harisov.livejournal.com/70420.htm…

[sunnybear]

Виталий, я не умаляю Вашей гениальности (не поймите превратно), просто на фоне
http://developer.yahoo.com/yui/grids/bui…
http://www.w3.org/TR/css3-grid/
http://www.gwhite.us/downloads/css_grid_…
http://960.gs/
http://code.google.com/p/blueprintcss/
предложенное решение выглядит не настолько передовым. Да, его идея витает в воздухе, и большой респект за реализацию. Но оно не является новым для Интернета вообще, хотя для Рунета в частности очень даже новаторское.

[vithar]

А я, в свою очередь, не утверждаю, что это rocket science и решение витает в воздухе. Но это не означает, что оно откуда-то слизано. И да, ему уже больше двух лет (оно опубликовано позже начала использования).

[sunnybear]

если ему 2 года — значит, Вы — первооткрыватель :)

[vithar]

Лучше на «ты».

[Coder]

Это приятно, когда твоё решение используется студией Лебедева при создании страниц Яндекса? :)

[vithar]

Страницы Яндекса содаются Яндексом, а не студией Лебедева.

[rossomachin]

Красавцы.

[Gunger]

Теперь макеты ТМ будут верстаться с использованием такой вот сетки? ;-)

[rossomachin]

У нас не настолько жёсткие требования.

[rsivakov]

Проголосовать не могу, но добавил в избранное...
Полезная штука.

[pepelsbey]

Какая неприятность… )

[vladon]

а никто не подумал, что эти вот комментарии оставлены специально?

[korynd]

Люди даже, возможно, думали, когда писали их.

[Leximist]

А почему нельзя делать скриншоты и просто сверять расстояния в оригинальным макетом.. например, наблюдая за координатами мышки в пикселях (в фотошопе)?

[krasin]

Потому что это неудобнее?

[coldFlame]

кстати! по Ctrl-плюс дизайн разъезжается, ибо часть элементов жестко прибита к сетке, а часть - нет

[remha]

Вот такое пришло в голову для GreaseMonkey:

// ==UserScript==
// @name gridViewer
// @namespace gridViewer
// @description View grid of page
// @include http://*.ru*
// ==/UserScript==

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

_addGrid(a);
}

function _addStyles() {
var _rule = '.column_ { position: fixed;z-index: 999; top: 0; display: block; height: 100%;border-right: 1px dashed #4affff; }' +
'* html .column_ {position: absolute; }'
document.styleSheets[0].insertRule(_rule, 0);

}

function _addGrid(array, containerNode) {

var _containerNode = (containerNode || document.body);

for (var i = 0, l = array.length; i < l; i++) {

var el = document.createElement('span');
el.className = 'column_';
el.style.cssText = 'left:' + array[i] + '%';

_containerNode.appendChild(el);
}
}

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

})()

[Teemk]

у меня почему-то не хочет работать :(

[AirWorker]

Чтобы в продакшене не было всякого лишнего, я использую конструкции вида (PHP)
if (CONFIGURATION !== CONF_PRODUCTION) {
$this->layout->addJsFile('/js/columns.js');
}

Еще есть CONF_DEVELOPMENT (локальная тачка) и CONF_PREVIEW (демо-сервер)

[vithar]

Ну просто откровение свыше…

[AirWorker]

Ага, типа Страшный Секрет ))

[MikeOzornin]

И вносите кучу ifов на нагруженный продакшн?:(

[AirWorker]

сказать, что if выполняется быстро - ничего не сказать ))

[thinking]

http://internet.yandex.ru/?columns

Что-то там кнопка "Измерить скорость" не по сетке... Блок "Что дальше" тоже не по сетке... :)

[vithar]

Там всё по сетке. Сется это не только линии, но и всё, что между ними. Например, половинки.

[thinking]

Сетка на то и сетка, чтобы по ней блоки выравнивались... А когда "там еще половинки, четвертинки" - это уже значит "была сетка, да забили" :)

[vithar]

Вы не правы.

[thinking]

Какой-то неубедительный довод )

[galexey]

Удобнее былобы включать режим с сеткой не через query-srting, а якорем.
Чоб страница не перезагружалась. Ну и для такой бодяги совсем не нужно заводить не анонимную функцию в глобальной видимости.

[fiskus]

открыли бдя америку

[LDEV]

тч0рт, выключили :(