Существует ли решение для отображения визуальной css сетки в процессе вёрстки?

Question

[gassmonkey]

1) Когда ковырял susy, заметил, что там есть отличная фича. По нажатию кнопки можно отобразить под вёрсткой сетку. Т.е. вертикальные направляющие и заливка колонок цветом, все параметры настраиваемы.
2) В compass есть замечательный компонент - вертикальный ритм, т.е. горизонтальные направляющие с выбранным шагом.
Но ни компас, ни susy мне в разработке не нужны, поэтому захламлять ими шаблон проекта не вижу смысла. К тому же, работают они не совсем идеально.
Так вот, имеется ли решение, позволяющее в процессе вёрстки отображать на странице сетку и вертикальный ритм?
P.S. решения в виде подкладывания картинки плагином для браузера не интересуют. Нужно решение, интегрируемое в шаблон проекта, и полностью настраиваемое.

Comments

[Дмитрий]

что вам мешает в проекте использовать от susy/compass только этот функционал?

[gassmonkey]

dimasmagadan: Разве ответ на ваш вопрос не написан в тексте, который вы комментируете?

[Дмитрий]

gassmonkey: у вас там написано
"поэтому захламлять ими шаблон проекта не вижу смысла"
можно подключить компас так, что на продакшне его не будет и сетка или какие-то другие компоненты будут только в рабочем коде.
или можно подключить его глобально, так, что в коде проекта его практически не будет.

поэтому, не совсем понимаю, почему вы считаете, что код проекта будет захламлен

[gassmonkey]

dimasmagadan:
Понятно, что в продакшн он не пойдёт, но речь и не об этом. Мне нужно лёгкое и функциональное решение для интеграции в базовый шаблон. Ключевой момент - лёгкое и функциональное. Тащить гору зависимостей мне незачем. К тому же, решение от susy работает только совместно с сеткой susy, а она мне не нужна. Тащить компас только ради вертикального ритма - извращение.

Читаем далее - "К тому же, работают они не совсем идеально."

[Дмитрий]

gassmonkey:
>Тащить компас только ради вертикального ритма - извращение.
а какая разница что тащить? ну будет это не компас, а что-то другое. так и так, по вашей логике, это будет проект захламлять.

у меня компас подключен глобально. код проекта "захламляю" только вот такими строчками
Dmitrijs Balcers "compass/css3";
Dmitrijs Balcers "compass/utilities/sprites";
Dmitrijs Balcers "compass/css3/user-interface";

>Читаем далее - "К тому же, работают они не совсем идеально."
вы б тогда написали, что именно вас не устраивает.

[gassmonkey]

dimasmagadan: Объясняю на пальцах. Надеюсь, аналогия будет ясна. Допустим, мне нужен транспорт для одной простой задачи - ездить на работу и обратно. Стоит ли мне покупать камаз?
Думаю, он вполне удовлетворит мои потребности, вот только для этого ли он предназначен?
>> вы б тогда написали, что именно вас не устраивает.
А разве я не написал?
"решение от susy работает только совместно с сеткой susy, а она мне не нужна. " - это номер раз.
2) Размеры там не совсем соответствуют сетке, что аннулирует смысл решения.

Answer 1

[Антон Нагаец]

Если вы имеете в виду Гриды то их множество. Погуглите запрос Grid system и будет вас щасте. Лично я пользуюсь 960.gs

Comments

[gassmonkey]

Нет, я имею в виду совершенно другое.

Answer 2

[GreatRash]

Нашел вот такой букмарклет (настраиваемый).

Answer 3

[Дмитрий]

Вот так для себя подобную задачу реализовал:

/// _debug.scss

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }

p.s. поспешил с ответом, не внимательно прочитав вопрос.