Оказывается, некоторые темы для Bootstrap — это маленькие произведения искусства. В рамках надвигающейся пятницы хотелось бы рассказать об одной из таких тем.

Крис МакКензи — явно один из тех, кто скучает по старым добрым временам DOS, EGA/VGA и Turbo Vision, иначе он вряд ли бы решился сделать что-то подобное. Так что если вы успели устать от засилья плоского дизайна, то добро пожаловать в мир BOOTSTRA.386!

Осторожно: будьте готовы к острому приступу ностальгии. Единственное, чего не хватает для полного погружения — так это навигации с клавиатуры, ну и курсора в виде прямоугольного блока.

Иногда возникает желание подкрутить что-то в css Bootstrap-а. Причем есть вещи, которые сложно переопределить css файлом загруженным после bootstrap. Например значения в селекторах media query. Поэтому возникает желание поправить css файл фреймворка. Для этого на сайте имеется Bootstrap customizer. Кроме изменения css, можно отключить неиспользуемые компоненты. После настройки внизу страницы будет доступна для загрузки персональная скомпилированная версия фреймворка.
Возникает вопрос, а если потребуется позже еще подкрутить что-то, то как загрузить старые настройки? Опять всё ручками выставлять? Сайт не дает ответа на этот вопрос.

Лет пять назад подсел на разработку сайтов, причем чисто из интереса к вебу. Хотелось осознать, как их делать и делать лучше, чем другие. Начиналось всё это, как и для большинства разработчиков, с простого познания HTML, CSS и, конечно, популярных CMS, таких как Joomla, Wordpress и Data Life Engine. По мере роста приходилось углубляться в Javascript и, конечно, в мой любимый сейчас PHP. Но все шло не так быстро, как хотелось. Тренируясь на простом, хотелось понять сложные вещи. PHP поначалу плохо давался, но характер взял верх и все же через некоторое время написал что-то вроде похожее на мини-социальную сеть.

Ну а затем пошло-поехало: ООП, MVC и, наконец, пришло время покорять фреймворки. На тот момент самыми известными для меня были Zend, Kohana и CodeIgniter. Позже узнал о Symphony и YII. Выбор пал на Kohana, т.к. для новичка была проще в освоении и с нормальной документацией. Ну и недостатков в принципе для себя не видел в этом фреймворке.

Всем привет!

Судя по пулл-запросу, команда Twitter Bootstrap уже достаточно близка к завершению.
Но, к моему сожалению, их сайт-превью сейчас не работает.

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

Наслаждайтесь: rnikitin.github.io/bootstrap

Список изменений приводить не буду, он очень большой, посмотрите сами.
Что думаете о новом бутстрапе?

Контекст данного поста об изменениях для веб-разработчиков, я вижу многих разработчиков которые «застряли», особенно в .NET.
Если вы еще не начали совершенствоваться в Вашем искусстве и адаптироваться к изменяющимся трендам, вы должны начать это делать сегодня.

Подумайте о разработке веб-приложений должным образом. Используйте здравый смысл чтобы смешивать и сочетать основываясь на данных советах.
А теперь 6 советов для веб-разработчиков, чтобы оставаться на пике того что вы делаете.

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

divshot.github.io/geo-bootstrap
(ссылка на гитхаб github.com/divshot/geo-bootstrap)

для вас! Превосходная типографика, куча анимации! Долой статичный вэб!

Пост в официальном блоге Bootstrap: blog.getbootstrap.com/2013/07/27/bootstrap-3-rc1

Документация и скачивание архивов доступно по старому адресу: twitter.github.io/bootstrap

Основные изменения

UPD

Сегодня в этом уже нет никакого смысла. Просто настройте себе HTTP/2

• Nginx www.digitalocean.com/community/tutorials/how-to-set-up-nginx-with-http-2-support-on-ubuntu-16-04
• Apache httpd.apache.org/docs/2.4/howto/http2.html

Что это?

В один прекрасный день я отчётливо понял, что устал писать длинные ссылки на файлы изображений, каждый раз задавать им ширину и высоту, заботиться о том, чтобы это всё не прыгало при загрузке и не мигало при наведении мышкой. И я решил автоматизировать всю эту рутину. Так появился Bootstrap CSS Sprite — библиотека, которая позволяет работать со всеми вашими изображениями, как с одним спрайтом. При этом доступ к тайлам спрайта осуществляется в стиле Twitter Bootstrap.

Приведу пример: у нас есть файл изображения cat.png. Чтобы показать это изображение надо использовать тег <i>, указав для него CSS-класс img-cat, как мы делаем это в Twitter Bootstrap:

<i class="img-cat"></i>

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

На днях вышла третья версия этого замечательного фреймворка, и, естественно, сразу захотелось посмотреть, как будут выглядеть сделанные на второй версии проекты, если просто поменять 2-ю на 3-ю. Оказалось что никак. Всё расползлось, разъехалось и кое-что перестало работать.

После чего захотелось всё быстренько поправить. И вот, что из этого получилось, читаем дальше.

В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты

Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.

После публикации прошлой статьи, в которой была информация о том, как и почему мы придумали System-NS и что этот сервис из себя представляет, нам начали сыпаться вопросы по поводу нашей “внутренней кухни”.

Сразу хочу сказать, что мы не являемся конкурентом Cloudflare ни в каком виде, поэтому не вижу смысла рассказывать, чем мы лучше. На сегодняшний день наш сервис направлен только на управление доменами. А в отличии от PDD Yandex, мы предоставляем услуги Secondary и Dynamic DNS.

Перед нами стояла задача: “использовать максимальное количество внешних модулей” (дабы писать меньше своего кода). Мы потратили много времени на поиск подходящих модулей (с необходимым функционалом и без багов). В процессе этого поиска несколько наших молодых сотрудников перестали быть свято уверены в “безупречности” opensource проектов. После криков и мордобоя остановились на связке: ZF2 — Doctrine ODM — BjyAuthorize — ZfcUser.

Интернет вещей врывается в нашу жизнь. Где-то совсем незаметно, где-то распихивая существующие порядки с изяществом паровоза. Всё больше устройств подключаются к сети, и всё больше становится разных приложений, веб-панелей, систем управления, которые привязаны к конкретному производителю, или, что еще хуже — к конкретному устройству.

Но что делать тем, кто не хочет мириться с таким состоянием, и хочет одно кольцо один интерфейс, чтобы править всеми? Конечно же, написать его самим!



Я покажу, как с помощью Tarantool быстро сделать даже не визуализацию, а полноценную систему управления, с базой данных, кнопками управления и графиками. С её помощью возможно управлять устройствами умного дома, собирать и показывать данные с датчиков.

Что такое Tarantool? Это связка «сервер приложений — база данных». Можно использовать её как базу данных с хранимыми процедурами, а можно как сервер приложений со встроенной базой данных. Вся внутренняя логика, будь она пользовательской или в виде хранимых процедур, пишется на Lua. Благодаря использованию LuaJIT, а не обычного интерпретатора, в скорости она не сильно уступает нативному коду.

Еще один важный фактор — Tarantool это noSQL база данных. Это означает, что вместо традиционных запросов вроде «SELECT… WHERE» вы управляете данными напрямую: пишете процедуру, которая переберет все данные (или их часть) и выдаст вам их. В версии 2.x поддержку SQL-запросов добавили, но панацеей они не являются — для высокой производительности часто важно понимать, как именно исполняется тот или иной запрос, а не отдавать это на откуп разработчикам.

В статье я покажу пример использования, когда внутри Tarantool пишется вся логика приложения, включая общение с внешними API, обработку и выдачу данных.

Поехали!

Классное расширение для фреймворка Twitter Bootstrap v2.0 — CSS-генератор кнопок. С помощью ползунков выбираете цвет, насыщенность, яркость и выпуклость кнопки.



Потом забираете CSS-код из соседнего окошка. И больше никогда не кодируйте цвет кнопок вручную!

P.S. Ещё один генератор кнопок: Button Maker, ну и вдобавок: CSS генератор градиентов.

Kickstrap это то, что будет если соединить Twitter Bootstrap, HTML5 Boilerplate, значки от IcoMoon и Font Awesome, добавить проверенные jQuery плагины Chosen и jGrowl, включить поддержку разных цветовых схем и тем оформления Bootswatch, дополнительную CSS сетку и вменяемую поддержку ранних версий IE.

На проектах использую Twitter Bootstrap и jQuery UI для прототипирования интерфейсов различных элементов страниц в т.ч. форм.

На днях понадобилось дополнить форму одним полем. Был выбран наиболее подходящий формат, в виде набора переключателей (элемент input, тип radio).

В Twitter Bootstrap, набор переключателей представлен в виде набора кнопок и не работает напрямую с элементом input, что предполагает написание дополнительного кода для обработки событий. Библиотека jQuery UI, имеет решение подобной задачи, и вся обработка событий уже реализована.

Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на странице).



Bootstrap не содержит стандартных стилей для выпадающих меню в панели номеров страниц. Я написал свои стили для выпадающих меню, возможно, кому-то они будут полезны.

Версия .less (просто подключите вместе с twitter bootstrap)
Версия .css и пример использования
Демо

Фреймворк Twitter Bootstrap уже давно стал одним из самых любимых средств ленивых сторонников быстрого прототипирования и разработки интерфейсов, а где популярность там много разных сторонних интересных штук.
На этот раз я случайно попал на пополняющуюся коллекцию сниппетов.
Думаю многим пригодится, сейчас там набор небольшой (23 штуки), но уже достаточно полезный чтобы поделиться.
Кликабельные картинки:

Интерфейс аля gmail

Дизайн Windows 8 становится все популярнее в веб-дизайне, и вот всеми любимый фреймворк Twitter Bootstrap обзавелся Metro-дизайном — Bootmetro.

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Не так давно я писал на хабре о Bootmetro — дизайне Twitter Bootstrap в стиле Windows 8. Эта разработка хороша идеей, но на практике все работает очень коряво. К счастью, есть качественно сделанный аналог от Ace Subido — CSS3 Microsoft Metro Buttons.



По сути это набор стилей для кнопок и форм, который можно использовать вместе с Twitter Bootstrap.