How to become an author
Search
Write a publication
Pull to refresh

Comments 53

крутая штука, сохраню, плюсанул Вам
Total votes 8: ↑8 and ↓0+8
Я не понял что то. Еще раз поясните, какую смысловую нагрузку несет эта сетка?
Total votes 2: ↑1 and ↓10
сетка самым верхним слоем (помните графические редакторы?). даёт возможность проверять выправку дизайна, чтобы вовремя подправить. вещь удобная. умелое использование положительно влияет на точность и аккуратность конечного результата.
Total votes 3: ↑3 and ↓0+3
Только странно что её не убрали после запуска сервиса.
This comment wasn’t rated yet0
Там много чего не убрали после запуска сервиса. Даже код приветствия авторизованного пользователя, некого Sundukov. Впрочем, там же есть ответ яндекса на Ваш вопрос: <--Найдётся&nbsр;всё-->
;)
This comment wasn’t rated yet0
А ещё <div id="debug_div"></div> внизу страницы...
This comment wasn’t rated yet0
Можно, например, наглядно проконтролировать отступы и равнение по краю.
К тому же интересна сама идея подключения яваскрипта для подобных целей.
Total votes 1: ↑1 and ↓0+1
выравнивание вёрстки по сетке. достаточно важная штука в веб-дизайне
This comment wasn’t rated yet0
А еще посмотрите код страницы edu.mail.ru/cgi-bin/splash
Довольно-таки оригинальный способ "облегчить" странчку :)))
Total votes 14: ↑8 and ↓6+2
UFO just landed and posted this here
Превосходно :) комментирование решает :)
Total votes 6: ↑4 and ↓2+2
UFO just landed and posted this here
Помоему правильней использовать plugin к браузеру типа GridFox и минимизировать количество кода используемого для дебага пусть и визуальных фич.
Total votes 5: ↑5 and ↓0+5
В других браузерах тоже стоит проверять )
Total votes 5: ↑5 and ↓0+5
вау, Тайные рецепты от artlebedev
Total votes 16: ↑15 and ↓1+14
да этим рецептам уже больше года, гуляют по ангоязычному интернету и CSS-фреймворкам.
Total votes 3: ↑3 and ↓0+3
Виталий, я не умаляю Вашей гениальности (не поймите превратно), просто на фоне
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/
предложенное решение выглядит не настолько передовым. Да, его идея витает в воздухе, и большой респект за реализацию. Но оно не является новым для Интернета вообще, хотя для Рунета в частности очень даже новаторское.
Total votes 2: ↑1 and ↓10
А я, в свою очередь, не утверждаю, что это rocket science и решение витает в воздухе. Но это не означает, что оно откуда-то слизано. И да, ему уже больше двух лет (оно опубликовано позже начала использования).
This comment wasn’t rated yet0
если ему 2 года — значит, Вы — первооткрыватель :)
This comment wasn’t rated yet0
Это приятно, когда твоё решение используется студией Лебедева при создании страниц Яндекса? :)
Total votes 1: ↑0 and ↓1-1
Страницы Яндекса содаются Яндексом, а не студией Лебедева.
Total votes 4: ↑3 and ↓1+2
Теперь макеты ТМ будут верстаться с использованием такой вот сетки? ;-)
Total votes 1: ↑1 and ↓0+1
У нас не настолько жёсткие требования.
Total votes 4: ↑3 and ↓1+2
Проголосовать не могу, но добавил в избранное...
Полезная штука.
Total votes 2: ↑1 and ↓10
а никто не подумал, что эти вот комментарии оставлены специально?
Total votes 2: ↑1 and ↓10
Люди даже, возможно, думали, когда писали их.
Total votes 3: ↑3 and ↓0+3
А почему нельзя делать скриншоты и просто сверять расстояния в оригинальным макетом.. например, наблюдая за координатами мышки в пикселях (в фотошопе)?
Total votes 6: ↑0 and ↓6-6
Потому что это неудобнее?
Total votes 12: ↑12 and ↓0+12
кстати! по Ctrl-плюс дизайн разъезжается, ибо часть элементов жестко прибита к сетке, а часть - нет
This comment wasn’t rated yet0
Вот такое пришло в голову для 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]);

})()
Total votes 4: ↑3 and ↓1+2
у меня почему-то не хочет работать :(
This comment wasn’t rated yet0
Чтобы в продакшене не было всякого лишнего, я использую конструкции вида (PHP)
if (CONFIGURATION !== CONF_PRODUCTION) {
$this->layout->addJsFile('/js/columns.js');
}

Еще есть CONF_DEVELOPMENT (локальная тачка) и CONF_PREVIEW (демо-сервер)
Total votes 2: ↑0 and ↓2-2
Ну просто откровение свыше…
Total votes 4: ↑3 and ↓1+2
Ага, типа Страшный Секрет ))
This comment wasn’t rated yet0
И вносите кучу ifов на нагруженный продакшн?:(
This comment wasn’t rated yet0
сказать, что if выполняется быстро - ничего не сказать ))
This comment wasn’t rated yet0
Там всё по сетке. Сется это не только линии, но и всё, что между ними. Например, половинки.
Total votes 1: ↑0 and ↓1-1
Сетка на то и сетка, чтобы по ней блоки выравнивались... А когда "там еще половинки, четвертинки" - это уже значит "была сетка, да забили" :)
This comment wasn’t rated yet0
Какой-то неубедительный довод )
This comment wasn’t rated yet0
Удобнее былобы включать режим с сеткой не через query-srting, а якорем.
Чоб страница не перезагружалась. Ну и для такой бодяги совсем не нужно заводить не анонимную функцию в глобальной видимости.
This comment wasn’t rated yet0
Sign up to leave a comment.

Articles

Your account

Sections

Information

Services

Support
© 2006–2024, Habr