Первые шаги в LESS - вложенные правила

Итак. Первое упрощение, с которым я хочу вас познакомить — это вложенные правила. По сути своей они облегчают процесс как написания, так и чтения кода. Сразу приведу пример на верстке шапки сайта:

Код CSS

#header {background: #333;}
#header h1 {font-size: 36px;}
#header p {font-size: 24px;}
#header p a {color: #fff;}
#header p a:hover {color: yellow;}

Код LESS

#header {background: #333;
  h1 {font-size: 36px;}
  p {font-size: 24px;
    a {color: #fff;
      &:hover {color: yellow;}
    }
  }
}

Объясню теперь подробнее. Хотя по коду уже должно быть все понятно.

В коде LESS первый селектор #header имеет свойство цвета фона и затем фигурная кавычка не закрывается, это значит что все последующие селекторы имеют вложенность в данный селектор. Эта вложенность может быть многоуровневая. Хороший пример многоуровневой вложенности показывает 5 строка (кстати, строки в коде CSS и LESS соответствуют друг другу).

Где здесь удобство:

Компиляция LESS в CSS

Итак, в предыдущем топике я слегка описал, что такое LESS, а сейчас я расскажу вам как начать использовать LESS вместо CSS.

Первое что мы сделаем, это переименуем наш css файл в less

styles.css = styles.less

Далее нам необходимо откомпилировать наш LESS файл и дать браузеру CSS (тоесть сделать почти обратное действие переименованию). И только после этого мы сможем полноценно использовать динамику в наших таблицах стилей. Есть несколько вариантов компиляции:

Локальная компиляция LESS:
  • Специальной программой (компилятором) компилируем LESS в CSS. После этого вставляем готовый файл на сайт.
    минус — надо сначала писать — потом компилировать — заливать и проверять на рабочем сайте
    Но иногда именно локально и требуется. Я попробовал три приложения, 1,3 и 4 и оставил 4… но это уже на ваш личный выбор.

    Ссылки:

    • LESS.app (для Mac OS)
    • WinLESS (для Windows)
    • LESS parser (для Adobe AIR — значит кросплатформенное)
    • Crunch (для Adobe AIR — значит кросплатформенное) — есть компрессия

Использование LESS

Добрый день.

Я использую при верстке шаблонов для Joomla не CSS, а LESS. Кто знаком с этим динамическим языком стилевой разметки (динамическим CSS), можете пропустить данный топик и сразу написать комментарий, остальным советую обратить внимание на текст ниже. Я планирую написать так сказать «цикл» статей по данной тематике, надеюсь у меня хватит сил, терпения, времени и т.д.

Есть всякие официальные текстовки (en ru) но я расскажу все по своему.

Что такое LESS и чем он отличается от CSS?

  • LESS это тот-же самый CSS, в который добавили динамики.

Что за динамика?

  • Это когда вы можете сделать какое-либо условие, смешать свойства, пользоваться переменными.

Для чего это?

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

Собственная страница ошибок (Joomla 1.7/2.5)

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

Хостинг для Joomla, стоит подумать.

Так как вопросы хостинга всегда будоражили мой мозг и, на самом деле, потребность в хостинге у меня высока, а потребность до сих пор не удовлетворена, в полной мере я попытаюсь написать свои мысли в этой статье именно как пользователя, по какому принципу я выбираю хостинг, почему я выбираю именно тот или иной сервис. Возможно, она кому то покажется не объективной и однобокой, однако постараюсь быть объективным и написать, что думаю о тех или иных хостинг-провайдерах.

А нужен ли сторонний SEF joomla? По следам sh404sef

Я был всегда противником стороннего SEF даже на joomla 1.0, однако желание иметь «красивые ссылки» почему-то не покидает людей. При этом в погоне за ссылками люди, как правило придают им очень большое значение и совершенно не понимают смысл формирования ЧПУ из-за этого бесконечные холивары на форумах о том использовать сторонние компоненты SEF для joomla или нет.

Наверное многие скажут, что да в этом есть какой, то смысл, но я спустя несколько лет разработки под joomla могу почти с 95% вероятностью сказать, что ломать копья из-за этого бесполезно и даже более того вредно :).

Для более глубокого понимания вопроса, давайте обратимся к теории и посмотрим, что есть такое SEF? Если отбросить мешуру — это удобство для вашего пользователя, как гласили лозунги лет 5 назад, забудь длинные и не красивые url, куда проще набрать короткий и красивый адрес, да это так можно в командной строке браузера набрать site.ru/news, однако большая часть пользователей ни когда этого делать не будет потому

Вывод модуля «Login» во всплывающем окне.

Разработка шаблона модуля Разработка шаблона модуля «Login»: вывод формы регистрации в SqueezeBox (Joomla 1.6/Joomla 1.7/Joomla 2.5).

SqueezeBox — стандартный для Joomla тип модального окна, использующий в качестве основной библиотеки mootools.

Для подключения SqueezeBox в шаблоне используется конструкция:

JHTML::_('behavior.modal');

, это добавит в страницы следующий JS:

window.addEvent('domready', function() { SqueezeBox.initialize({}); SqueezeBox.assign($$('a.modal'), { parse: 'rel' }); }); 

В Joomla 1.6/1.7/2.5 есть возможность создания собственных альтернативных шаблонов компонентов/модулей, и возможность выбора их в настройках, ей и воспользуемся.

Использование в шаблонах Twitter Bootstrap - часть 2.

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

Почему мы запустили проект Joomclub?

Так как возникло много вопросов зачем, мы решили сделать этот проект я попытаюсь рассказать об основной идее проекта, а так же пролить свет на тот вопрос, почему же мы все таки начали наш проект.

Для начала хочу отметить, что мы не собираемся откалывать какую то часть сообщества от joomlaportal и joomlaforum, наоборот мы только, за объединение. И если будет желание администрации ресурсов, то мы готовы приложить все усилия для слияния сервисов в один единый портал. Теперь вернемся к причинам создания сервиса блогов о joomla.

Использование в шаблонах Twitter Bootstrap - часть 1.

Не буду описывать особенности данного фреймворка, для этого есть документация:

Сразу перейдем к разработке шаблона: Начнем с того, что оптимально использовать html5+css3 при верстке сайта, т.к. сам фреймворк использует данную связку, т.е. структура файла index.php шаблона будет примерно следующей