Обновлено: Тема на HTML5Boilerplate и Bootstrap3
Привет всем!
Рад представить сообществу новую тему на HTML5Boilerplate и кастомизированном Bootstrap 3. Так что же в коробке?
Для начала скажу, что всё, что было в Bootstrap — осталось, кроме карусели и иконок — они вырезаны. Иконки заменены на Font Awesome. Карусель не заменена ничем, хотя очень хотели интегрировать Owl.Carousel. Вы можете использовать стиль старых кнопок, панелей, модальных окон и прочего, но.
Мы добавили такие интересные штуки:
- Разметка, «сетка» (на основе списков, пригодится для вывода товарной сетки),
- Разметка, «плитки» (аналог Masonry),
- Иконки Font Awesome,
- Адаптивные таблицы,
- Адаптивные табы,
- Дополнительные навигационные бары (+фиксированное меню после прокрутки),
- Информационные бары,
- Новые кнопки,
- Дополнительные панели,
- Дополнительные модальные окна,
- Дополнительные футеры (подвалы),
- Дополнительные Well-блоки,
- Многоуровневое меню (в теме используется pdoMenu, можно использовать WayFinder),
- Секции Callout,
- Разделители блоков,
- Интегрирован Bootstrap Select,
- Включен ScrollToTop,
- Прелоудер страницы.
Дефолтные стили для навигационных баров, модальных окон, панелей, кнопок и прочего — остались.
Всё, что не нравится или хочется изменить, можно переопределить в своём файле стилей. Создайте style.css, где вам угодно и пишите свои стили в нём. Существующие css- и js-файлы будут перезаписаны!
Чанки
В пакет входят стандартные чанки (в версии 1.0.3. были переименованы) и мы постарались угодить всем, итак:
- cbs.analytics — чанк для колов сбора статистики
- cbs.breadcrumbs — злебные крошки
- cbs.footer — подвал сайта
- cbs.head — тег head
- cbs.header — хэдер для лого, контактной информации и пр.
- cbs.infobar — информационный бар
- cbs.javascripts
- cbs.navbar — навигационное меню (2 типа)
cbs.navbar.row — навигационное менюудалено в версии 1.0.4- cbs.preloader — прелоудер страницы
- cbs.sidebar — заготовка для сайдбара
- cbs.styles — подключаемые стили
- cbs.system — вывод системной информации о генерации страницы
- cbs.verification — коды верификации от поисковых систем
- cbs.warning — предупреждение о старом браузере
Немного скриншотов:
Навигационное многоуровневое меню
Плитки
Сетка
Селекты
Кнопки
Аккордеон
Табы
Хронология (Timeline)
Разделители
Модальное окно (вообще их 10 вариантов + дефолтное)
Панели
Секции Callout (призывы к действию)
Информационные бары
Well-блоки
Подвал
А вообще, есть демо-сайт, всё можно пощупать:
cbs.demo.devdevel.net
Купить базовую тему можно в магазине.
Есть вопросы, задавайте!
UPD: обновили пакет, текущая версия 1.0.3
В нём
- переименованы шаблоны (добавлен префикс «tpl.cbs»)
- переименованы чанки (добавлен префикс «cbs.»)
- переименованы сниппеты (добавлен префикс «cbs»)
- новый цвет — brown, а так же панели, кнопки, модальные окна, навбар и пр. для этого цвета;
- добавлены цвета ссылок (11 цветов);
- добавлен Timeline — вывод записей в хронологическом порядке;
- новый класс «.sharp» для сброса закруглённых углов.
UPD: обновили пакет, текущая версия 1.0.4
- Изменено навигационное меню — вложенность теперь может любой (интегрирован SmartMenus)
- Удалён чанк cbs.navbar.row
- Обновлены иконки Font-Awesome до версии 4.5.0
- Изменено навигационное меню — добавлено оффсетное меню (выезжающее сбоку)
- Изменены цвета asphalt заменён на darkblue, grass на green. Добавлены цвета paleblue, palegreen
- Интегрирована карусель OWL (да, мы её всё-таки интегрировали)
- Добавлены кастомные labels и badges
- Обновлены иконки Font-Awesome до версии 4.6.3
- Удалён прелоудер страницы.
- Исправлены незначительные ошибки
- Исправлено боковое меню на мобильных устройствах (offcanvas)
- Обновлены иконки Font-Awesome до версии 4.7.0
- Исправлены незначительные ошибки
- Добавлены DataTable
- Кастомные предупреждения (alerts)
- Блоки с цветными фонами
- Добавлена кнопка btn-black
- Класс grey заменён на palegray
- Класс strong исправлен
- Обновление Bootstrap 3 до версии 3.3.7
- Обновление версии jQuery до 2.1.3
- Форматирование кода
- Кнопки с выпадающим меню
- Интеграция мегаменю
- Интеграция bxSlider
- Новые блоки (split), позволяющие тянуть 1 колонку до края браузера
- Интеграция мегаменю
- Обновление OWL-карусели до актуальной версии
- Обновление Bootstrap Select до актуальной версии
- Перевод чанков на Fenom
- Добавление Animate.css
- Удаление кастомных модальных окон
- Кнопки шаринга в социальных сетях (смотрите наш подвал)
- Прилипающее меню при прокрутке страницы
Комментарии: 80
Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
Для меня — это довольна крутая заготовка, интегрируем иногда под клиента необходимое, но честно говоря, редко. Добавить цвета — максимум.
Заменить можно:
Меню — Wayfinder (ваша тема и мы тоже пользуемся UltimateParent)
Хлебные крошки — Breadcrumbs или Breadcrumb (по мне, лучше).
И если так, то и в настройках иметь возможность отключать не нужные CSS\JS таких галерей и т.п.
Выбор должен быть, кому Owl, кому TouchCarousel, кому Swipe. А всё мы хоть и можем запихнуть, но не будем, вес стилей и скриптов заметно увеличится.
Стандартные чанки можно было бы и с суффиксом\префиксом в имени делать, ибо они затерли чанки уже имеющейся темы theme.bootstrap (сайт, конечно, тестовый)
Понятно, что на чистой инсталляции такого не будет. Но, может быть стоит к имени чанка название пакета добавлять?
В следующей версии обязательно подумаем над предложением
Хотите, выдирайте)
Я вижу, что предложенная тема отлично подходит для быстрого клепания лендингов, например. Т.е. затраты труда и времени ниже, скорость выше. А время — фактор решающий.
Подходит не только для клепания лендингов, но и для corporate и commerce-решений. По мне, лучше показать Заказчику свёрстанный сайт, интерактивный прототип, чем решения от Axure (на них немало времени уходят).
«Колёсико» — анимированная иконка от Font Awesome, который интегрирован в тему.
Просьба всем купившим тему, пишите отклики в отзывах к теме. Я буду в курсе, кто купил и буду напрямую высылать обновления, если они будут касаться стилевых файлов.
Кому надо, можно и сбросить
или:
На мой взгляд, внесено довольно важное изменение с меню и обновлены иконки Font-Awesome до версии 4.5.0.
LESS или SCSS?
По отдельной просьбе можем вырезать «ненужное» из стилей и скриптов.
Демо
Все перечислены на сайте темы.
Самое главное, внедрили новый тип навигационного меню (offcanvas, выезжающее сбоку на мобильных девайсах).
Добавили карусель (owl carousel выбрана из-за поддержки тач-устройств), бейджи, лейблы. Изменили названия пары классов, добавили новые цвета. Исправили ошибки, которые нашли и про которые писали пользователи.
Следующая версия скорее всего не будет такой полной, а будет раскидана на цветовые схемы, которые будут представлять собой готовые темы для сайтов и интернет-магазинов.
Добавлены DataTable
Кастомные предупреждения (alerts)
Блоки с цветными фонами
Добавлена кнопка btn-black
Класс grey заменён на palegray
Класс strong исправлен
Демо: cbs.demo.devdevel.net
Обновляйтесь
Но, думаю, это повод сделать скорее 1.1.0 :)
В планах раскидать один файл стилей на цветовые схемы и подключать нужное.
Тем самым можно немного облегчить вес файлов стилей. Но пока это в планах.
Обновление Bootstrap 3 до актуальной версии;
Кнопки с выпадающим меню;
Стили для мегаменю (давно просили);
Обновление OWL-карусели до актуальной версии или замена OWL на bxSlider (или совмещение);
Обновление Bootstrap Select до актуальной версии;
Обновление SmartMenus до актуальной версии;
Интеграция стилей jGrowl (под вопросом);
Перевод чанков на Fenom;
Добавление Animate.css (под вопросом);
Возможно удаление кастомных модальных окон (хотелось бы обратной связи по этому поводу);
Форматирование кода (для себя и красоты).
А так же отдельный выпуск темы под miniShop2, Tickets, Office — то есть под интернет-магазин.
Цена пока не ясна, но однозначно будет дороже, чем customBS3. Как я уже написал выше, это будут самостоятельные темы, так что скидок не будет.
+ Секции «Сплит»
+ Кнопки с выпадающим меню
+ Разное
+ bxSlider
+ Мегаменю
+ Animate.css
Работы ещё ведутся. Вышеуказанные изменения будут точно в грядущем обновлении.
Обновление будет на следующей неделе.
По моему — следует разнести цветовые гаммы по разным файлам.
Не используется в одном проекте такая цветовая палитра, а если нужно всегда можно подключить.
cbs.min.css — 248Kb; очевидный перебор
Я писал об этом выше.
@grid-columns = 12 маловато, точности не хватает — лучше бы 24 или 36
Да и хотелось бы пример на 24 или 36 колонок :)
Вроде бы как нет разницы, но однако в работе ощущается (говорю как практик):
@grid-columns = 12
.col-md-10 {width: 83.33333333%;}
@grid-columns = 24
.col-md-10{width:41.66666667%}
По поводу перепиливать: поменять 1 параметр — тяжкая работа? Иногда, конечно, еще меняют @grid-gutter-width немного.
Итого — замена 2 параметров.
Невозможно управлять шириной ячеек.
Скрин:
http://joxi.ru/a2XRyVf1Mk05rg
Кстати, если я не намерен использовать адаптивные таблицы как избавится от ненужного JS?
Я говорю про простые таблицы, а не «адаптивные».
Второе:
стоит подключить классический Bootstrap вместо CBS — таблицы начинают вести себя адекватно
http://joxi.ru/nAy43zsYVdLg2Z
http://joxi.ru/LmG1QVfeKNXDAl
Третье:
я уже давно использую таблицы без указания класса в ячейках, etc…
Попробуй научи обывателя (контент-менеджера) создавать таблицы с указанием классов в ячейках. Большинство задач решается просто:
HTML
CSS
Вообще ответ был прежде всего на «Невозможно управлять шириной ячеек. ». Я показал, что возможно.
Ниже Стан написал, что адаптивность в CSS, а не в JS. Следовательно, все можно переопределить в cbsTheme.css. Я так думаю ©
- Обновление Bootstrap 3 до версии 3.3.7
- Обновление версии jQuery до 2.1.3
- Форматирование кода
- Кнопки с выпадающим меню
- Интеграция мегаменю
- Интеграция bxSlider
- Новые блоки (split), позволяющие тянуть 1 колонку до края браузера
- Интеграция мегаменю
- Обновление OWL-карусели до актуальной версии
- Обновление Bootstrap Select до актуальной версии
- Перевод чанков на Fenom
- Добавление Animate.css
- Удаление кастомных модальных окон
- Кнопки шаринга в социальных сетях (смотрите наш подвал)
- Прилипающее меню при прокрутке страницы
СмотритеОдну хотелку озвучу. Добавьте в тему ClientConfig. Все что можно выносить в ClientConfig было бы в разы удобнее чем лазить и менять ваши копирайты и т.п. — я не спорю что вы имеете право их указывать, но согласитесь, все эти копирайты, логотипы, фавиконы будут сменены покупателем на свои или клиентские, так проще же менять через ClientConfig, чем лазить по чанкам. Обновление тоже затирает вышеуказанное, так что необходимость использовать ClientConfig более чем очевидна (ИМХО).
На днях прикуплю пару копий)
Записал хотелку — «добавить настройки темы»
По мне OWl Carousel справляется на 95% со всеми задачами
— может покрасить и не долго, а вот анимация (адаптивность при том хорошая) tympanus.net/Development/DialogEffects весьма замечательная для диалогов. Пользователя заманить не просто, избалованный пошел, а с красиво всплывающей формой связи, глядишь, да и откликнется.
UPD… наверно на «Цвет текста» ориентироваться тогда, похоже там все цвета и есть…
Была выявлена ошибка в работе одно из компонентов дополнения.
modx.pro/work/17800
Разработчик отказывается устранять проблему, обосновывая это отсутствием программиста.
Жаль. Активно пользовался этим дополнением… 15 загрузок. Получается, что каждая 10-ая загрузка моя.