23 Октября 2017

Урок 1. Знакомство с CSS-фреймворком Foundation для верстки Битрикс магазина

Приветствую читателей моих статей. Мы начинаем первый урок изучения разработки под Битрикс. Мои уроки будут касаться больше именно программирования на API CMS Bitrix. Напомню, что в течении серии уроков мы создадим интернет-магазин на Битрикс с нуля, который я назвал StartShop. И начнем мы с выбора шаблона для нашего магазина. Шаблон нужен обязательно адаптивный и на коком-нибудь модном CSS-фреймворке.

Выбор шаблона (CSS Foundation)

А начнем мы с выбора шаблона верстки которую будем внедрять в шаблон Битрикса. Основное требование современного сайта - это адаптивный дизайн. И конечно шаблон мы будем сразу брать адаптивный. И еще современная тенденция сайтостроения - это использование всевозможных CSS-фреймворков. И мы тоже не будем отставать.
В качестве CSS-фреймворка мы возьмем ZURB Foundation. Почему его, а не более популярный Bootstrap, просто Foundation мне больше нравится. Мне кажется там более понятная сетка, отличная документация и примеры, есть набор готовых версток различных меню. И даже примеры шаблонов для разных сайтов.

И не нужно переживать с каким фремворком вы начинаете знакомится. Я например сначала освоил bootstrap. Верстка моего сайта сделана на bootstrap. Но потом мне захотелось посмотреть какие ещё есть css-фремворки, а их достаточно много. В итоге мне очень понравился Foundation по этому я и буду создавать магазин именно на нем. А главное у него есть набор готовых шаблонов, которые можно взять, как основу своей верстки. Для обучения это то, что нужно.

Вот они готовые шаблоны. По клику на изображение вы перейдете на сайт, где можно скачать шаблон. Вас попросят заполнить email и вышлют шаблон на почту. Точнее архив со всеми шаблонами сразу. Никакой рекламы мне от них не приходило.
Я выделил, какие шаблоны мы будем использовать. Это Ecommerce Homepage, как основной шаблон и Product Page, как шаблон детальной страницы товара.
Единственная беда в том, что шаблоны сделаны на предыдущей версии Foundation. Раньше использовался для верстки адаптивной сетки такой же подход как в бутсрап, теперь же в 6-ой версии фундейшен используется более современный подход сетка XY Grid.

Но суть верстки не изменилась. Главное понять основы и тогда вам уже будет без разницы какой фреймворк использовать, просто будите смотреть в документации названия css классов, примеры их использования и применять в своих проектах.
Я же для своего курса переведу данные шаблоны на новый формат (для это достаточно сделать групповую замены классов .row и .column на .grid-x и .cell соответственно). И делов... Ещё в отличие от оригинальных шаблонов я удалю лишние элементы, чтобы сделать шаблон более простым. Да и главное я внедрю вместо простого меню навигационную панель, очень современно и удобно будет.

Наша верстка на CSS Foundation

Вот так будет выглядеть наша верстка, каркас нашего интернет магазина.

Подвал не вошел поэтому его видно на детальной странице товара. Шаблон адаптивный при уменьшении размера экрана количество колонок будет сокращаться и меню в итоге свернётся в одну кнопку выпадающего меню.

Этих двух макетов будет вполне достаточно чтобы сверстать минимальный интернет магазин. Конечно ещё потребуется ряд вспомогательных шаблонов (меню, навигации, страницы поиска, меню разделов), но их мы придумаем походу.
В итоге у нас будет 3 страницы, которые нужно будет сверстать отдельно через компоненты Битрикс:

1. Главная страница, на которой будет выведен слайдер и лучшие товары магазина, через специальный фильтр.
2. Страница каталога, со списком всех товаров.
3. Карточка товара.

Неизменными элементами, которые попадут в шаблон будут панель меню и подвал с текстом и небольшим меню.
По этой ссылке можно скачать архив с шаблоном foundation.

От автора:
Ну что, начало положено! Не пропустите продолжения подписывайтесь. Свои вопросы не стесняйтесь пишите в комментариях, буду стараться отвечать.
И можно уже сразу переходить к следующему уроку Установка Битрикс.