Предположим в некотором проекте появилась необходимость добавить некоторую форму опроса пользователей на веб сайте (детальная форма) и форму для просмотра и редактирования списка пользователей для администратора системы (списковая форма).
Рассмотрим процесс создания этих форм с использованием OData, Angular.js, Bootstrap и JavaScript Grid. Все требования к такому приложению уже реализованы в этих инструментах, и нам практически не требуется ничего писать.
Здравствуй, дорогой хабрадруг! В этом уроке мы создадим простой сайт-портфолио, который будет базироваться на фотографиях из вашего аккаунта в Instagram. Дизайн сайта сделал Tomas Laurinavicius, и он получился у него простым, функциональным и просторным. Итак, начнем!
Webmin — это web-интерфейс для системного администрирования Unix. Кто из системных администраторов не знает об этом?
Также все знают, что проект Webmin/Usermin был начат очень давно, что наложило свой отпечаток на управление и интегрирование современных тем (оформлений) для панели. Часть современных модулей в Webmin/Usermin управляются посредством библиотеки под названием ui-lib.pl, входящей в их дистрибутив, которая и парсит поступающий на дальнейшее отображение модуль. Только вот проблема заключается в том, что множество из представленных модулей, в силу своей древности, вовсе не взаимодействуют с библиотекой упомянутой выше. Старые модули просто создавались каждый в отдельности, как получится.
Сегодня это привело к тому, что создать идеальную тему оформления панели, соблюдая все современные правила и стандарты, крайне не просто.
Во всяком случае, можно добиться поставленной задачи и решить ее немного другим способом. Вот именно чем я занимался последние 72 часа. Сейчас с уверенность могу сказать, что конечный результат получился превосходящим мои первоначальные ожидания.
Читать полностью »
Предлагаю вашему вниманию простой custom binding для KnockoutJS для реализации popover'ов из Twitter Bootstrap.
<span data-bind="popover: true" class="ko-popover"
data-popover-placement="bottom"
data-popover-title="knockout-popover"
data-popover-content="Awesome knockout-popover plugin">
knockout-popover (hover over me :)
</span>
Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.
В предыдущей части читатель Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.
«Не надо, я сам»
Хромой Итальянец
Предлагается следующий сценарий: заказчик хочет разместить на сайтах своих партнёров небольшой горизонтальный динамический баннер с некой бизнес логикой, несложная калькуляция, табличка, локализация. Помимо этого, требуется всплывающее окно с крупной картинкой и контентом, которые по высоте больше чем родительский баннер.
Сразу дали понять, что партнёры, хоть и партнёры, но размещать у себя что-либо сложное не будут, то есть про jQuery забыли. Стандартное решение – iframe с минимальной функцией resize на голом JavaScript.
Кратко: после браузерных войн организация W3C и группы разработчиков, такие как Web Standards Project, долго и упорно работали, чтобы восстановить единый нефрагментированный Веб. Но в последние несколько лет мы, разработчики, взяли, и заново всё зафрагментировали… Наверное, нам надо понять, что мы теряем, прежде чем потеряем этот Веб навсегда.
Ровно год назад патриарх веб-индустрии Anil Dash написал: "Мы потеряли Веб", скорбя по ранней, «досоциальной» блогосфере, до всех этих наших постингов фото, видео и мыслей, находящих последний приют в катакомбах Фейсбука, Твиттера, Инстаграма и Ютуба. Это вызвало отклик у многих, кто застал те дни; многих, кто по иронии судьбы затем ушёл работать в эти катакомбы.
Читать полностью »
Прошло уже много времени с момента релиза Bootstrap 3, большинство инструментов, сервисов и других полезностей для известного CSS-фреймворка обновились, кроме того, появилось много новых интересных штук для Twitter Bootsttrap. Предлагаю вашему вниманию подборку.
Bootstrap 3 PSD — Отличный UI-кит элементов фреймворка, сделано очень качественно.
Наткнулся сегодня на одну интересную штуку.
Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах. Такая себе альтернатива Bootstrap.
Небольшой пример — если вы хотите добавить в свой проект что-то похожее на кнопку
просто воспользуйтесь следующими элементами:
semantic add button
semantic add icon
Semantic UI — это фреймворк для создания переносимых интерфейсов, который поможет повторно использовать элементы UI в своих проектах. Такая себе альтернатива Bootstrap.
Небольшой пример — если вы хотите добавить в свой проект что-то похожее на кнопку
просто воспользуйтесь следующими элементами:
semantic add button
semantic add icon