Комментарии 53
крутая штука, сохраню, плюсанул Вам
Я не понял что то. Еще раз поясните, какую смысловую нагрузку несет эта сетка?
сетка самым верхним слоем (помните графические редакторы?). даёт возможность проверять выправку дизайна, чтобы вовремя подправить. вещь удобная. умелое использование положительно влияет на точность и аккуратность конечного результата.
Можно, например, наглядно проконтролировать отступы и равнение по краю.
К тому же интересна сама идея подключения яваскрипта для подобных целей.
К тому же интересна сама идея подключения яваскрипта для подобных целей.
выравнивание вёрстки по сетке. достаточно важная штука в веб-дизайне
Гм, для резины да, полезно.
А еще посмотрите код страницы edu.mail.ru/cgi-bin/splash
Довольно-таки оригинальный способ "облегчить" странчку :)))
Довольно-таки оригинальный способ "облегчить" странчку :)))
НЛО прилетело и опубликовало эту надпись здесь
Про сетку писали несколько раз, поищите :)
Помоему правильней использовать plugin к браузеру типа GridFox и минимизировать количество кода используемого для дебага пусть и визуальных фич.
Ссылка побилась
http://www.puidokas.com/portfolio/gridfo…
http://www.puidokas.com/portfolio/gridfo…
В других браузерах тоже стоит проверять )
вау, Тайные рецепты от artlebedev
да этим рецептам уже больше года, гуляют по ангоязычному интернету и CSS-фреймворкам.
Не знаю, что там по чему гуляет, но это мой код.
http://harisov.livejournal.com/70420.htm…
http://harisov.livejournal.com/70420.htm…
Виталий, я не умаляю Вашей гениальности (не поймите превратно), просто на фоне
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/
предложенное решение выглядит не настолько передовым. Да, его идея витает в воздухе, и большой респект за реализацию. Но оно не является новым для Интернета вообще, хотя для Рунета в частности очень даже новаторское.
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/
предложенное решение выглядит не настолько передовым. Да, его идея витает в воздухе, и большой респект за реализацию. Но оно не является новым для Интернета вообще, хотя для Рунета в частности очень даже новаторское.
Красавцы.
Проголосовать не могу, но добавил в избранное...
Полезная штука.
Полезная штука.
Какая неприятность… )
а никто не подумал, что эти вот комментарии оставлены специально?
А почему нельзя делать скриншоты и просто сверять расстояния в оригинальным макетом.. например, наблюдая за координатами мышки в пикселях (в фотошопе)?
кстати! по Ctrl-плюс дизайн разъезжается, ибо часть элементов жестко прибита к сетке, а часть - нет
Вот такое пришло в голову для 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]);
})()
// ==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]);
})()
Чтобы в продакшене не было всякого лишнего, я использую конструкции вида (PHP)
if (CONFIGURATION !== CONF_PRODUCTION) {
$this->layout->addJsFile('/js/columns.js');
}
Еще есть CONF_DEVELOPMENT (локальная тачка) и CONF_PREVIEW (демо-сервер)
if (CONFIGURATION !== CONF_PRODUCTION) {
$this->layout->addJsFile('/js/columns.js');
}
Еще есть CONF_DEVELOPMENT (локальная тачка) и CONF_PREVIEW (демо-сервер)
http://internet.yandex.ru/?columns
Что-то там кнопка "Измерить скорость" не по сетке... Блок "Что дальше" тоже не по сетке... :)
Что-то там кнопка "Измерить скорость" не по сетке... Блок "Что дальше" тоже не по сетке... :)
Удобнее былобы включать режим с сеткой не через query-srting, а якорем.
Чоб страница не перезагружалась. Ну и для такой бодяги совсем не нужно заводить не анонимную функцию в глобальной видимости.
Чоб страница не перезагружалась. Ну и для такой бодяги совсем не нужно заводить не анонимную функцию в глобальной видимости.
открыли бдя америку
тч0рт, выключили :(
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Яндекс.Интернет, как верстали макет