Вторник , 20 Ноябрь 2018
Главная / Хобби / Интернет / Thick As Brick простейший html шаблон для верстки

Thick As Brick простейший html шаблон для верстки

Когда десять раз делаешь одно и то же, на одиннадцатый раз ты волей-неволей начинаешь задумываться о том, как бы процесс оптимизировать. Так и с версткой: после десятка сверстанных страниц хочется слегка упростить свою задачу. Тут на помощь, конечно же, приходят разнообразные фреймворки (чего только стоит oocss или наикрутейший CSS-фреймворк от Яндекса или целая куча других не менее интересных фреймворков). Пригодятся и системы сборки (Ant стоит на службе у студии Артемия Лебедева, да и я потихоньку постигаю его Дао). Не стоит забывать и различные хаки и шаблоны лейаутов, коих в интернете бесчисленное множество.

Однако как быть с сайтом, для которого надо сверстать пару-тройку типичных страниц? Нет смысла тащить с собой кучу лишнего CSS-кода. Кроме того, многим верстальщикам гораздо проще написать качественный код с нуля, чем перегружать кучу заранее объявленных бесполезных классов. Что делать?

Чтобы решить эту высосанную из пальца нетривиальную задачу я написал простейший шаблон для верстки, который сильно облегчил мне работу над проектами. Шаблон примитивен и прост (потому так и зовется), на звание фреймворка ни в коем случае не претендует (минус в карму тому, кто обзовет его фреймворком! ;) ). Он несет в себе заранее объявленные CSS-классы для работы с меню, списками, формами, ресеты основных тегов (вроде сброса отступов у форм и правильных отступов у

) и еще кое-какие полезные для меня вкусности.

Для самых нетерпеливых я дам ссылку на проект в Google Code, а самым любопытным, я расскажу, что Thick As Brick состоит из:

  • html-файла index.htm
    Этот файл содержит в себе ссылки на стили и яваскрипты, пустые метатеги и проверку наличия/отстутствия яваскрипта (более подробно о последнем пункте можно почитать в блоге у Виталия Харисова);
  • css-файла css/common.css
    Файл содержит минимальный набор ресетов (для body, a img, form, p и заголовков) и базовый набор классов (.no-margin, .no-float, .pseudo-link, ul.news, ul.menu, ul.tiles, table.reset, ul.reset и т. д.). Предполагается, что верстальщик не будет менять этот файл, а будет редактировать css/custom.css, речь о котором пойдет ниже
  • css-файла css/common-ie6.css
    Файл отвечает за совместимость самых общих классов с нашим любимым IE6
  • css-файла css/custom.css
    Файл несет в себе те стили, что можно менять в процессе работы над конкретным проектом (исходный custom.css пуст и содержит только комментарии ;) ).
  • css-файла css/custom-ie6.css
    Этот стилевой файл также обеспечивает совместимость css/custom.css с IE6.
  • js-файла js/script.js
    Пустой js-файл. Для дальнейшего [дописыванияk
  • однопиксельного gif-а images/common/x.gif
    Файл пригождается в особо редких случаях

Скачать шаблон можно отсюда в архиве или заэсвэнить свежую версию (архив и версия в SVN идентичны).

Я очень надеюсь, что эта статья сподвигнет других пользователей если и не воспользоваться своими наработками, то хотя бы заставит их написать что-то свое и рассказать об этом в комментариях ;).




Morozko-shop

Комментарии:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Смотрите также

Хостинг - какой тип хостинга выбрать для своего сайта

Хостинг — какой тип хостинга выбрать для своего сайта?

Хостинг индустрия предлагает множество вариантов для размещения вашего проекта в интернете. Каждый пользователь найдет подходящий ...

: 24.33MB | MySQL:210 | 0,966sec