7.04.13, 11:53
0 комментарий
  Уроки

23 сервиса и сайта для лёгкого начала качественной вёрстки

Представляю вам краткий обзор некоторых сайтов и сервисов, которые будут полезны для прочтения и использования в работе.
Часть из представленных сайтов уже не представляют практического интереса, однако и там можно почерпнуть для себя что-то важное или просто по улыбаться, глядя на старые (по меркам интернета) решения.







1. pagecolumn.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Позволяет создавать разнообразные заготовки от 1 до 5ти колонок.
Интерфейс с удобными ползунками и минималистичным дизайном.


2. blog.html.it

23 сервиса и сайта для лёгкого начала качественной вёрстки


На странице есть 40 вариантов готовых заготовок без каких либо опций.
Не очень интересно, да и сервис староват уже.


3. builder.yaml.de

23 сервиса и сайта для лёгкого начала качественной вёрстки


Это практически полновесный визуальный редактор.
Позволяет создавать практически полноценную XHTML страницу.
Очень удобно, если вы только только начинаете заниматься вёрсткой.


4. freecsstemplates.org

23 сервиса и сайта для лёгкого начала качественной вёрстки


Почти 700 разных бесплатных CSS-шаблонов.


5. html5up.net

23 сервиса и сайта для лёгкого начала качественной вёрстки


Три адаптивных html5&CSS3 шаблона довольно привлекательного вида.
Отлично подойдут для модификации под свои нужды.


6. html5templates.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


И ещё 17 бесплатных (в т.ч. для коммерческого использования) адаптивных html5&CSS3 шаблонов.


7. intensivstation.ch/templates

23 сервиса и сайта для лёгкого начала качественной вёрстки


25 готовых вариантов расположения блоков и колонок в заготовке с возможностью скачать каждую на странице-примере.
Настройки параметров отсутствуют.


8. 960.gs

23 сервиса и сайта для лёгкого начала качественной вёрстки


Думаю этот сайт не нуждается в представлении.
В одном наборе и css и PSD и печатный шаблон, action для photoshop (пользуюсь регулярно для быстрого построения сетки) и много чего ещё.


9. designinfluences.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Знаменитая сетка 960px, но в резиновом исполнении.
Возможность выбрать из нескольких готовых вариантов заготовок с библиотеками jQuery или MooTools.


10. csseasy.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


8 разных вариантов заготовок для вёрстки. 4 - фиксированной ширины и 4 - резиновых.


11. csscreme.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


20 разных бесплатных CSS-шаблонов.
Доступно только скачивание и небольшие картинки-превьюшки


12. andreasviklund.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


50+ разных css-шаблонов.

Ничего особенного - но доступны предпросмотр детальное описание шаблонов и скачивание.


13. generateit.net

23 сервиса и сайта для лёгкого начала качественной вёрстки


Схожий по функционалу с csstemplater.com генератор css-шаблонов.
Отличие в том, что есть возможность сразу добавить место блок под горизонтальное меню и выбор цвета заливки блоков.


14. freewebtemplates.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Почти 3500 бесплатных и платных шаблонов. Бесплатные так себе, основной упор сайт делает на продажу premium-шаблонов по приемлемым ценам.


15. cssgrid.net

23 сервиса и сайта для лёгкого начала качественной вёрстки


Отличная адаптивная сетка, рассчитанная на среднюю ширину мониторов 1280px.
Так же можно скачать и PSD c сеткой.


16. mollio.org

23 сервиса и сайта для лёгкого начала качественной вёрстки


Старенький но не плохой набор готовых css-шаблонов.
На ыбор доступны 6 вариантов расположения блоков, а так же представлена основная типографика.


17. nuviotemplates.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


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


18. caniuse.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Сервис, на котором вы можете узнать о поддержке того или иного html5-тега или css3-свойства различными браузерами.
Одозначно должен быть в закладках у любого верстальщика и веб-программиста.


19. csstemplater.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


На мой взгляд лучший из всех представленных генераторов.
Во первых - на русском языке.
Во вторых - простая в понимании структура кода и ничего лишнего.
В третьих - мне просто нравятся полезные сервисы и плагины Dimox`a, они качественные и легко поддаются модификации.


20. html5boilerplate.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Лучший на мой взгляд готовый набор для быстрого старта правильной вёрстки на html5.
Всё очень подробно документировано, начиная от отдельного faq и заканчивая подробными комментариями в кода.
Единственный минус (вероятно для некоторых) - английский язык, но минус легко устраняется с google translate.
В сочетании с csstemplater.com получается отлично.


Ну а если уж совсем хочется избавить себя от лишней работы по вёрстке:

21. initializr.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


На выбор три варианта готовых наборов на основе html5boilerplate.
Второй я использовал при созданиии wtf.net.ru, сайт был запущен за день, включая регистрацию домена и его делигирование.


Ну и в довесок:

22. colorzilla.com/gradient-editor

23 сервиса и сайта для лёгкого начала качественной вёрстки


Сервис, которым я постоянно пользуюсь, полезнее инструмента для генерации градиентов просто не существует!


23. twitter.github.com/bootstrap

23 сервиса и сайта для лёгкого начала качественной вёрстки


Обойти вниманием бутсрап не возможно впринципе.
Рассказывать не имеет смысла - всё наглядно продемонстрировано на примерах.


24. foundation.zurb.com

23 сервиса и сайта для лёгкого начала качественной вёрстки


Так же отличный фреймворк для адаптивной вёрстки.
В сети уже достаточно много различных вреймворков, рассматривать их все не вижу смысла, достаточно этого и bootstrap.



На этом обзор можно считать завершенным, надеюсь он был действительно полезен и вы найдёте что-то новое для себя.

Автор: ПафНутиЙ

Напишите своё мнение