Какие "заготовки" вы используете при вёрстке нового проекта?

Question

[DeNnEr]

Надоело верстать с нуля, знаю что многие используют различные заготовки вроде oocss, html5 boilerplate, однако кроме этих двух я больше ничего не знаю.
Посмотрел oocss и понял что из его функционала ничего не нужно, а идея не так и интересна.
html5bloilerplate сломан, половина всего не работает, что-то работает не так, что-то даже в хроме не работает.
Может есть что-то ещё?

Answer 1

[Виталий]

Использую свой фреймворк, который собирался на основе:
1. csstemplater.com/
2. www.blueprintcss.org/
3. www.yaml.de/en/home.html
4. reset от Эрика Мейера meyerweb.com/eric/tools/css/reset/
5. clearfix www.positioniseverything.net/easyclearing.html
6. pngfix www.dillerdesign.com/experiment/DD_belatedPNG/
7. Типографика

для фреймворка ставил след. задачи.

1. Переход между фиксированной/резиновой версткой на уровне css
2. 1-2-3 колоночная разметка
3. Быстрый выбор кол-ва колонок (одному контейнеру добавляется класс и убирается лишний html код столбца)
4. Футер прижат к низу
5. Минимальная-максимальная ширина
6. Готовая типографика
7. Кросбраузерность ие6+, FF3+, Opera 9+, Safari, Chrome

В приниципе по тем сслыкам которые я дал, можно относительно быстро собрать в кучу все что нужно для заготовки.
Ну а там уже исходите от ваших целей. Про ZenCoding уже выше упомянули.

Answer 2

[SEObomj]

У меня из заготовок только reset.css =) Если честно даже не знаю какие еще заготовки могут быть.

Comments

[DeNnEr]

Ну вот что-то вроде reset.css, но более полное, с различными фиксами вроде фиксинга прозрачности png в ie.
oocss вообще не плох, но маловат и цели у него сомнительные. Бойлерплейт вот был бы идеалом, но он разваливается на глазах.

Answer 3

[Serator]

Ну а кто знает, что вам нужно :). Напишите свое и используйте. Вам же шаблон нужен и не более того…

Comments

[DeNnEr]

В том и фишка, писать своё это велосипедостроидельство. Если есть готовое, то я бы использовал то что есть.
Да и сама «заготовка» не зависит от целей, как правило.

Answer 4

[Марк]

960gs, и Zen Coding (там html:5 пишешь, и получается шаблон html-страницы с DOCTYPE и meta charset).

Comments

[DeNnEr]

Вот за 960gs огромное спасибо! Выглядит интересно, но только не понятно что там с резиновой вёрсткой, не подскажете?
Про zen coding знаю, но не думал что он генерит всё-всё-всё. Надо будет глянуть.

[Виталий]

вот сетка для резины
www.designinfluences.com/fluid960gs/

Answer 5

[loat]

Возможно вам будет полезно — lodoss.org/blog/the-best-front-end-techniques (к сожалению на анголийском, но все понятно)

Comments

[DeNnEr]

Я ожидал что под таким заголовком будет огромный трактат о том, что хорошо, а что плохо. Но, конечно, советы очень хорошие. Добавил в закладки. Понравился нормальный clearfix и фиксы для ie — CSS3PIE.
Спасибо за ссылку.

[loat]

наверное вы правы, сильно громкое название :) изменил заголовок и ссылку. lodoss.org/blog/most-used-front-end-practies

Answer 6

[Илья Лесных]

А почему html5boilerplate.com сломан? Там, вроде бы, все прекрасно работает.

Comments

[DeNnEr]

Во-первых, PNG fix нерабочий(сколько раз сталкиваюсь с его использованием и каждый раз удивляюсь как люди его используют, они что, вообще не проверяют вёрстку в ie6?).
Во-вторых, разное поведение кода. Стоит открыть tests.html из demo в ie6 и хроме чтобы понять, оно работает по-разному.
Я сделал 2 багрепорта, на один(второй) мне ответили что «это не баг, это баг в ie6, так и должно работать». Я покрутил у виска(намёк на то, что для этого и использую такие вещи как бойлерплейт, чтобы такие «баги» были решены через хаки, которые уже есть в комплекте «сборки»).

[Илья Лесных]

Там используется не pngfix, а belatedPNG. Или Вы под названием «pngfix» имели ввиду впринципе решение проблемы с пнг в ие6, а не частное решение данной проблемы? Честно признаться сам я давненько использовал эти решения, поэтому не могу возразить, но когда доходилось — все работало. А про разное поведение — можно поподробнее, может быть я действительно чего-то не замечал. Хотя я использую boilerplate скорее для других вещей (например .htaccess).

[DeNnEr]

Для справки, png fix'ом в веб-деве называется любой сниппет, нацеленный на исправление данного недостатка ie. Я и говорю о том, что belatedPNG это один из методов png fix'инга.
Вот мой репорт: github.com/paulirish/html5-boilerplate/issues#issue/245
Там же ссылка на скрин с ie6.