Настала пора сделать что-то более практичное. Основную теорию мы уже рассмотрели, на её основе попробуем сделать какой-нибудь простенький шаблончик. В предыдущих уроках мы уже обсудили структуру каталогов, но чтобы у нас не было разночтений, я предлагаю скачать мой вариант: les02-00 142. Это что-то вроде «рыбы», которую вы можете взять за основу.
В шаблон я включил свой вариант helpers.less, поэтому делать верстку буду с его помощью. Некоторые миксы могут отличаться от default-шаблона.
Подключение LESS мы уже разобрали, поэтому кратко пройдемся по основным файлам.
- Главный файл var_style.less. В нём мы только выполняем подключение других файлов.
- Переменные («глобальные») хранятся в variables.less.
- Хелперы в каталоге mixins. Пока у нас там только helpers.less.
- Основные базовые настройки размещаем в base.less.
- Основная разметка в layouts/layout01.less. Сейчас там пустая «рыба» под «типовой» шаблон MaxSite CMS.
- Все меню подключаем в menu.less. Стили меню будут находиться в раздельных файлах каталога menus. Их может быть много. В menu.less и будем указывать какие именно файлы.
- Адаптивный дизайн определяется в responsive.less. У него такая же схема подключения как и меню.
Почти все файлы пустые и не содержат рабочих стилей. Это означает, что на выходе мы должны получить пустой var_style.css.