19 июня 2014 в 15:40
Давно ничего не показывал, решил продемонстрировать крайнюю работу:
Много кастомного, включая Bootstrap — изменённый и перепиленный в LESS
Есть ещё фронт работ по сайту, но уже практически невидимых пользователю, разве что изменение текстов под SEO. Работы по мобильной версии ещё ведутся.
Если есть вопросы, отвечу.
| Вложение | Размер |
|---|---|
 eneservice_ru.jpg | 144.99 КБ |
Комментарии
Расскажите, если еще свеже в памяти, как бутстрап через LESS подключили и как с ним работали, а то у меня раньше не получилось (http://www.drupal.ru/node/107291).
Понятно, то есть фактически свой бутстрап кастомизованный сформировали тут:
http://getbootstrap.com/customize/
и подключили к своей теме?
так и задумано?
Нет, редактирование, переписывание, добавление/удаление LESS-файлов.
О, спасибо что заметили. По лени (и ещё отсутствующих классах и стилях) при сборке функционала такое встречается.— — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — — —
По поводу LESS. Мне, лично, не хватает кучи вспомогательных классов, к примеру:
прерывистое подчёркивание инлайн-ссылок,
выделение цветом,
расширение блочного функционала.
Мне не нужны GlythIcons, я заменяю их на FontAwesome (т.е. вырезается одно, подключается другое)
Вот к примеру подключаемые мной кастомные файлы со стилями из одного проекта
@import "custom/timeline.less";
@import "custom/custom.less";
@import "custom/fileinput.less";
@import "custom/select.less";
@import "custom/slider.less";
@import "custom/badges.less";
@import "custom/animations.less";
@import "custom/nav-filter.less";
А вот как обстоят дела с Javascripts.
src: [
'js/transition.js',
'js/alert.js',
'js/button.js',
'js/collapse.js',
'js/dropdown.js',
'js/tooltip.js',
'js/popover.js',
'js/scrollspy.js',
'js/tab.js',
'js/custom/slider.js',
'js/custom/inputmask.js',
'js/custom/select.js',
'js/custom/fileinput.js',
'js/custom/maxlength.js'
],
dest: 'dist/js/<%= pkg.name %>.js'
}
Нет карусели, модальных окон, эффикса. Добавлены мои скрипты. В основном, это украшательства, но функциональные
На замену модальным окнам — Fancybox, на замену карусели — OwlCarousel
Вот пример дополнительных инлайн-ссылок
Спойлеров нет, так что сорри за простыню.
a.dashed {
color: @Brand-dark;
border-bottom: 1px dashed @Brand-dark;
text-decoration: none;
&:hover,
&:focus,
&.active {
color: @Brand-dark-hover;
border-bottom: 1px solid @Brand-dark-hover;
text-decoration: none;
}
&.primary {
color: @Brand-primary;
border-bottom: 1px dashed @Brand-primary;
&:hover,
&:focus,
&.active {
color: @Brand-primary-hover;
border-bottom: 1px solid @Brand-primary-hover;
text-decoration: none;
}
}
&.success {
color: @Brand-success;
border-bottom: 1px dashed @Brand-success;
&:hover,
&:focus,
&.active {
color: @Brand-success-hover;
border-bottom: 1px solid @Brand-success-hover;
text-decoration: none;
}
}
&.info {
color: @Brand-info;
border-bottom: 1px dashed @Brand-info;
&:hover,
&:focus,
&.active {
color: @Brand-info-hover;
border-bottom: 1px solid @Brand-info-hover;
text-decoration: none;
}
}
&.warning {
color: @Brand-warning;
border-bottom: 1px dashed @Brand-warning;
&:hover,
&:focus,
&.active {
color: @Brand-warning-hover;
border-bottom: 1px solid @Brand-warning-hover;
text-decoration: none;
}
}
&.danger {
color: @Brand-danger;
border-bottom: 1px dashed @Brand-danger;
&:hover,
&:focus,
&.active {
color: @Brand-danger-hover;
border-bottom: 1px solid @Brand-danger-hover;
text-decoration: none;
}
}
}
Здесь ещё и по цветам раскиданы ссылки, т.е. вид инлайн-ссылок будет таким:
<a class="dashed success" href="#">инлайн-ссылка</a>
<a class="dashed info" href="#">инлайн-ссылка</a>
<a class="dashed warning" href="#">инлайн-ссылка</a>
<a class="dashed danger" href="#">инлайн-ссылка</a>
Я дорабатываю свой Бутстрэп, как будет готов, выложу на Гитхабе.
Моё мнение, что использовать Bootstrap в дефолтном виде нет смысла: часть не используется, чего-то не хватает. Переопределять существующие классы — плодить кучу лишних и повторяющихся строк.
Ну так АХулиOS ждемс.
А компилируются less-файлы каким образом? Пробовала модулем (https://www.drupal.org/project/less), но у меня не работало.
Что то не так делаете. Модуль рабочий.
Для бутстрапа с рекомендуемым парсером - не рабочий, сыпется на обработке extend. Нужно ставить другой парсер или переделывать исходники.
grund distВот справка
Спасибо!
Я подтему делал вот этого https://www.drupal.org/project/bootstrap У мну модуль Less работает
Не пользовался никогда базовыми темами. Проверь, если интересно, подавится или нет:
.a {
color: black;
}
.b:extend(.a) {
background: white;
}
Если еще актуальна критика, то страница заказа как простыня.
P.s. просто тоже сейчас бьюсь над темизацией заказа.
Можно вопрос:
вот тут http://eneservice.ru/catalog/dir/arhitekturnoe_osveshchenie/
раньше по наведению на товар тема с помощью JS плоявлялась. А теперь с помощью CSS. Почему?
а в чем причина?