Простой пример использования Ink framework

С того момента как я написал пост про InK – Intarface Kit, он успел набрать небольшую популярность, как минимум в Португалии. И вышла его вторая версия. Не вижу особого смысла приводить список изменений, так как мало кто пользовался первой версией.

Сегодня хочу просто показать пример использования самой главной на мой взгляд фичи InK – простая и интуитивно понятная разработка макета сайта. InK позволяет абстрагироваться от неприятных для меня моментов верстки, таких как ручная расстановка всех элементов сайта(контейнеров) по своим местам. С InK достаточно задать в процентах отведённое на экране место для каждого элемента, а фреймворк уже сам позаботится о кроссбраузерности и адаптивности.

Итак, чтобы пример не был синтетическим, начнем с постановки задачи: делаем страницу сайта абстрактной торговой сети. Страница для служебного использования, на ней будет выводиться список сотрудников с фотографиями и краткой информацией.

Файл, отвечающий за показ данной страницы, будет называться personal.php. Для простоты код обращения к базе данных и сама вёрстка будут в одном файле. В реальных проектах, конечно, лучше так не делать.


Для начала возьмем каркас страницы из каталога с примерами cookbook/my-page.html, удаляем все лишнее и получаем такое содержание файла personal.php (важно не забыть поменять пути к подключаемым файлам):

Создаём через phpMyAdmin базу данных с незамысловатым названием bd. В ней нам нужна всего одна таблица с названием personal. Поля таблицы personal: personal_id, name, second_name, patronymic, photo_path(путь до фотографии сотрудника в каталоге images). Пишем несколько строк кода для обращения к базе данных:

Теперь у нас есть переменная $out, в которой содержатся все профили сотрудников. Осталось только вывести их на экран. Для этого в цикле перебираем все данные и подставляем во фреймворковскую конструкцию:

Вот собственно и всё, базовая структура страницы создана, а нам даже не пришлось писать свой файл со стилями. Для этого мы использовали классы для группировки колонок – column-group gutters, а так же классы, которые позволяют задать процентное соотношение площади, занимаемой колонками – large-20, large-80. Результат с двумя тестовыми записями сотрудников можно увидеть на скриншоте:


ink_example

One thought on “Простой пример использования Ink framework

  1. Pingback: InK - HTML+CSS+JS фреймворк | omyblog.ru

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

Ваш e-mail не будет опубликован.

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">