Занимаемся тут с @Yuki_Sumaguro одним некоммерческим проектом по созданию небольшого сайта. Вообще, навыки верстальщика у меня в довольно зачаточном состоянии, поскольку много верстать не приходилось. А когда приходилось, изображал что-то совсем макетнообразное.
А тут встала задача сделать сайт, и желательно с нуля. Соответственно, придется и дизайн придумывать, и верстать, и на js что-то накропать, и серверную часть накодить, хоть и простую.
В своё время @hellodrw советовал мне вёрстку изучать, начиная с HTML4, потом переходить к xHTML и так далее. Но ведь долго, а сайт поскорее запустить хочется. Да и не было у меня никогда особого желания становиться верстальщиком: для меня бoльшая часть работы верстальщика сводится к поиску и попыткам исправления багов в рендеринге разных браузеров, причем количество багов и несовместимостей постоянно растет. В общем, не настолько вдохновляющая работа :)
Сначала смотрел в сторону SASS и написания CSS с нуля, но для моего случая он не очень подходит, т.к. когда знаний не хватает, проще взять какие-то готовые наработки и разбираться с ними, по ходу меняя и дописывая под свои нужды. Именно таким подходом позволяет с успехом пользоваться Bootstrap от Twitter.
Bootstrap - по сути очень простая и одновременно довольно мощная штука. Это набор CSS-файлов и небольшая инструкция к ним, которая позволяет довольно легко сверстать типовую сетку, используемую сегодня в большинстве сайтов. Хорошо подойдёт для блога, новостного или какого-нибудь другого контент-ориентированного сайта. Но вполне может служить отправной точкой и для чего-то более сложного.
В основе Bootstrap лежит стандартная сетка шириной 960 пикселей. Сетка разбивается на блоки разной ширины, эти блоки можно комбинировать относительно произвольным образом, составляя колонки и секции. Колонки могут вкладываться друг в друга, образуя нужную раскладку. При разработке Bootstrap используют less, и если взять исходники на less, можно легко кастомизировать такие вещи как максимальное количество колонок (по умолчанию их 16), ширину сайта, цветовую схему и так далее - итоговые размеры и цвета подстроятся при генерации итогового CSS.
В инструкции описаны примеры использования Bootstrap для получения типовых CSS-раскладок. Если сайт, который нужно сделать, подходит под какую-то на 70-80% - можно просто брать и пользоваться, немного доработав.
Сюда относятся заготовленные стили для заголовков, параграфов, списков, исходного кода и так далее. Эти стили также подстраиваются через less, но вполне можно подкрутить что-нибудь и в CSS.
Цветные плашки с модными скругленными углами и произвольными надписями. Делаются очень легко и непринужденно.
Простая и удобная сетка для верстки сетки с фото- и видео-превью. Задается списком, подстраивается под размер контента. В инструкции, кстати, всё это демонстрируется на примере довольно удобного при верстке микросервиса placehold.it, который можно использовать для генерации картинок-заглушек нужного размера.
Если нужно представить информацию в табличном виде, то и тут Bootstrap облегчит нам жизнь. Готовых вариантов стилей таблиц есть тоже несколько: “плотный”, “резреженный”, с раскраской чётных строки и без неё. Очень легко сделать локальную сортировку таблицы на js - для этого предоставлен уже готовый скрипт.
Тут даются визуально согласованные стили для полей ввода, к которым прибавлены стили для отображения типовых состояний - успешного и ошибочного ввода, недоступности поля (read-only), и так далее. Поля, судя по примерам, легко комбинируются - например, можно сделать визуально единый компонент из checkbox и поля ввода. Кнопки с градиентами и скругленными уголками легко делаются произвольных размеров, цвета кнопок согласуются с названиями стилей (success, warning, и так далее).
Можно использовать панель со ссылками, постоянно висящую вверху, как сделано в самой инструкции. Есть также стили для реализации закладок, овальных кнопок, breadcrumbs и пагинации.
В Bootstrap реализовано большое количество разных симпатичных всплывающих уведомлений, подсказок и popover-окон, как модальных так и обычных. К каждому типу окошек прилагается свой JavaScript.
Вообще говоря, Bootstrap вполне хорошо выглядит и работает и сам по себе, но при желании легко добавить работу с сайтом, созданным на его основе, из JavaScript. К Bootstrap прилагаются готовые примеры js-кода, который можно расширить и кастомизировать под свои нужды. Поставляемые плагины работают в связке с jQuery и Ender.
Если вам, как и мне, иногда нужно верстать, но вы не занимаетесь и не планируете заниматься этим профессионально, имеет смысл посмотреть на Twitter Bootstrap - он может служить неплохой отправной точкой для верстки проекта. При этом не будет ощущения того, что сайт верстал программист :) Ну а если вы хотите научиться верстать и ищете с чего начать - почитайте цикл статей Ивана Сагалаева по основам блочной верстки.
Кстати, этот сайт я тоже первоначально хотел делать с использованием Bootstrap, но в итоге решил посмотреть на другой CSS-фреймворк - Gumby.