Создаём административную панель на Bootstrap, CSS(LESS) и JavaScript. #1

3
10545

Всем привет! В этой серии уроков мы создадим административную панель для сайта или её еще называют backend. Основной задачей серий уроков является демонстрация возможностей современных технологий web-разработки, в нашем случае это препроцессор CSS — LESS, элементы HTML5, JavaScript фрэймворка JQuery и конечно же, Framework Bootstrap 3. Я выбрал тематику административной панели не спроста, в настоящее время данное направление стремительно развивается, управление сайтом становится важнейшей частью развития web ресурсов. Тенденции развития показывают, что помимо управления сайтом, административная панель должна предоставлять подробную аналитическую статистику посещаемости и действий посетителей. Таким образом, сегодня к этому аспекту нужно подходить рационально и действовать в ногу со временем.

Обозначим основные цели

  1. Административная панель должна быть максимально информативной, для этого, должно быть много пространства.
  2. Удобная панель навигации
  3. Удобное расположение строки поиска
  4. Наличие необходимых виджетов для реализации аналитической составляющей административной панели
  5. Responsive — резиновая верстка, для просмотра на любых устройствах

В результате данных уроков Вы создадите базовый шаблон с стандартными виджетами и всем необходимым для реализации панели под свои нужды. Я покажу пример применения препроцессора CSS (LESS) и продемонстрирую недооцененную необходимость JQuery.

Прежде чем мы начнем, давайте разберемся с необходимыми инструментами. Я покажу, что мы будем использовать и что нам потребуется.

Инструменты реализации

Самым важным инструментом будет популярный Framework от Twitter — Bootstrap 3. Благодаря его возможностям мы получим отличный результат в итоге.

Как я уже говорил, мы будем использовать препроцессор CSS, который называется LESS. Решение об его использовании совершенно спорное, я считаю, что используя его, в дальнейшем Вы сможете легко изменить стиль административной панели и легко находить нужные элементы в селекций CSS для дальнейшего изменения по необходимости. Также это шикарная возможность продемонстрировать возможности этого препроцессора, динамического CSS.

Мы будем использовать 2-ю версию популярного JavaScript Framework — JQuery.

  • Официальный сайт JQuery
  • Я буду использовать CDN JQuery — https://code.jquery.com/jquery-2.1.3.min.js
  • Если Вам надо, Вы можете скачать библиотеку и подключать её локально

Нам потребуется шрифт — Open Sans, по крайней мере, я буду использовать его. Он стильный, современный и приятный. Вот такие аргументы в его пользу. Вот ссылка для вставки:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,400italic,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>

Набор иконок, помимо встроенных в Bootstrap Glyphicons, мы будем использовать популярный набор иконок — Font Awesome.

И напоследок, САМЫЙ важный инструмент, без которого не получится ровным счетом ничего — это МОЗГ. Поэтому, я рекомендую основательно подготовиться, усердно вникать в суть происходящего и по желанию, если что-то не понятно, задавать вопросы в комментариях ниже или в группе vkontakte.

Приступим к реализации

Первым делом я решил, что неплохо будет определится с расположением основных элементов и цветовой палитры. В результате, используя фотошоп, накатал примерную картинку ожидаемого результата и его основную цветовую палитру. Еще это называют прототипом, но мой вариант не полноценен, поэтому, просто набросок.

Касаемо подготовки, на этом она, в принципе, закончена. Конечно, неплохо было бы иметь полноценный прототип, дизайнерское решение и весь комплект .psd файлов с слоями-нарезками. Но это не наш случай, поэтому, будем действовать самостоятельно, ориентируясь в требованиях по необходимости.

Двигаемся дальше

Подготовим рабочее место, создадим основные файлы, директории и базовый HTML шаблон для старта. Папку я назвал AdminTemplate, её структура приведена ниже:

  • AdminTemplate
    • css
      • blocks
        • color-config.less
        • general.less
        • main-content.less
      • bootstrap.min.css
      • style.less
    • fonts
      • здесь содержимое папки bootstrap fonts
    • js
      • bootstrap
        • bootstrap.min.js
    • index.html

Файл bootstrap.min.css и bootstrap.min.css Вы найдете в архиве, который вы должны скачать с официального сайта Bootstrap.

Теперь давайте создадим базовый шаблон, с которого, собственно и начнётся самое интересное. Открываем файл index.html и следуя базовому шаблону Bootstrap вставляем следующее:

Я добавил комментарий к каждому подключаемому файлу, чтобы Вам было понятно, что подключено и где. Можете удалить эти комментарии если они мешают. Надеюсь, базовый шаблон не вызвал никаких трудностей и все элементы Вам знакомы и понятны. Теперь давайте разберемся с файлом style.less. Как это работает: мы разобьем наш css код на несколько блоков, тех самых что размещены в папке blocks. Каждый файл, отвечает за свои задачи, сейчас у нас таких файлов 3:

  • color-config.less — будет содержать цветовые палитры, которые мы будем часто использовать
  • general.less — будет содержать основные свойства, основных тегов
  • main-content.less — будет содержать все правила для ново-созданных элементов

Данные файлы импортируются к нашему основному файлу: style.less через правило @important. Когда страница загружается, javascript библиотека less.js, которую мы подключили в шапке, преобразует полученный код в стандартный CSS. Такая организация, позволяет более гибко использовать файловую структуру и быстро изменять стили.

Откройте файл style.less и добавьте следующее:

Теперь откройте в браузере наш файл index.html и если всё нормально, вы увидите пустую, белую страницу. Для проверки правильности подключения других библиотек, воспользуйтесь браузерным инструментом разработчика Google, нажмите f12 или если вы пользуетесь firefox, воспользуйтесь дополнением FireBug. Посмотрите, чтобы все ссылки подключений библиотек были найдены. Если Вы уверены, что всё правильно подключили — отлично.

Заключение

На этом первый этап завершен! Мы выполнили все подготовительные работы и в следующем уроке, приступим к реализации прототипа. Спасибо за внимание!

Чтобы быстрее узнать о выходе новых уроков, вступайте в группу vkontakte. Спасибо!

3 КОММЕНТАРИИ

  1. […] административную панель используя Bootstrap, LESS и JQuery. В прошлом уроке мы сделали все заготовки для дальнейшей разработки. […]

  2. […] Первый урок был вводным, в нем мы определились с инструментами для создания будущей панели, а также подготовили рабочее пространство –  скачали нужные библиотеки, стили и определили расположение этих файлов в рабочей папке. Был представлен прототип админки и цветовая палитра. […]

ОСТАВЬТЕ ОТВЕТ

Пожалуйста оставьте комментарий!
Введите ваше имя