Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…
Этот сайт в основном посвящен тому, что мне интересно вне работы. Ведется в порядке хобби.
Все изложенное на сайте - мое частное оценочное мнение и не может быть истолковано иначе.
Со всеми вытекающими из этого последствиями.

flex

Подписаться на эту метку по RSS

Flex шаблон сайта с меню

Просмотров: 2912Комментарии: 0
Alib.spb.ru

Я доработал шаблон для сайта о котором тут писал.

Суть доработки сводилась к тому, чтобы поработать с header'ом. Теперь для мобильной версии сайта "подсвывается" свой header, в который копируется содержание текущего + меню не остается на экране, а прячется под кнопку. Реализацию сделал с использованием jquery (версии 1.7 или выше). Выбор этой библиотеки очевиден: у меня все проекты используют её, и смысла "заморачиваться" на трюки с CSS лично я не видел. Соответственно, появился блок JavaScript кода. Да и возможностей у jQuery побольше (в плане простоты реализации, всё тоже самое можно и на чистом JS сделать).

Итак, дополнительные возможности текущего шаблона:

  • Меню в мобильной версии сворачивается под кнопку
  • Header в мобильной версии становится полосой с меню
  • Также в мобильной версии можно прятать и сайдбары (ничего сложного)
Что добавилось из настроек: классы CSS в "настроченой" части позволяют настроить всё, что угодно.

Да, если необходимо прятать сайдбар для мобильной версии, то добавляем следующий CSS код:

@media screen and (max-width: 599px) {
 .aside-1 {display: none;}
}

Соответственно, для того, чтобы спрятать первый или второй сайдбар, используем имена классов .aside-1 и .aside-2. Аналогично можно прятать footer (класс .footer).

Ссылка для скачивания шаблона: flex-univ-mnu.zip

Скриншоты:

Полный вид:

Мобильный вид:

Flex шаблон сайта

Просмотров: 3711Комментарии: 0
Alib.spb.ru

На досуге запилил некий универсальный шаблон для сайта... Точнее, даже не так. Я тут писал что познакомился с flex css - современным расширением css, которое позволяет буквально творить чудеса. :) Решил поискать, что на эту тему есть в сети - с точки зрения готовых шаблонов сайтов на flex. Ожидаемо, их оказалось немного. В итоге взял один из и "немного допилил". Что вылилось в итоге универсальный шаблон, из которого легко можно сделать:

  • сайт шапка + подвал + 2 сайдбара + основной текст
  • сайт может быть как "резиновым", так и фиксированной ширины
  • легко и изящно может быть исключен любой компонент, то есть шаблон можно использовать для создания сайта типа шапка + подвал + сайдбар и основной текст, или, например, шапка + 2 сайдбара + основной текст...
  • сайдбары могут иметь фиксированную ширину
  • сайдбары могут иметь произвольный порядок
  • и всё это с минимумом кода
Немного про настройку. Я постарался документировать код так хорошо, как это только возможно, поэтому, после настройки но перед исползованием - комментарии лучше порезать. Собственно, правки состоят из 2х частей: правки html и css.

Что касается правок html, то там всё просто: если нужно что-то удалить, то удаляется именно там. Например, надо удалить левый сайдбар - удаляем в части html Aside 1. Ну и т.д. Теги там современные, "говорящие", так что вероятность "пролететь" - невысока.

Сложнее с настройкой CSS. Весь CSS код разделён на 3 части:

  • Неизменная часть для верстки - её менять не надо.
  • Настроечная часть для кастомизации сортировки - это часть, которая описывает последовательность расположения блоков на экране. Меняя параметр order для блоков, можно добиться того, что сайдбары будут справа. Или слева. Иные параметры (вон, высота-ширина-шрифты-и т.д.) в этой части менять не стоит!
  • Настроечная часть для кастомизации - вот тут можно и нужно менять фоны-шрифты и т.д.
Отдельно обращу внимание на параметр width: 1200px для класса wrapper-style. Если его удалить, то макет становится "резиновым". Если изменить - то это и будет искомая ширина вашего будущего сайта.

Да, для работы с шаблоном потребуется знание html + css.

Ссылка на архив с шаблоном: flex-univ.zip

Про MaxSite CMS и flex css

Просмотров: 2161Комментарии: 0
MaxSite

Как я тут писал, инсталлировал я тут MaxSite CMS (версии 0.95) - для того, чтобы сделать сайт-блог. Давно не работал с этой CMS -  в итоге было любопытно посмотерть, что же получилось.

А получилось, доложу я вам, очень даже. Система ощутимо выросла. Первое и основное - шаблон по-умолчанию, который, кажется, позволяет если не всё - то очень и очень многое. Повторюсь: там полностью настраиваемый и расширяемый шаблон. Это означает, что в шаблоне много чего можно настроить через админку, не вникая в структуру файлов. Там же, в админке, можно прописать свои CSS или же подключить свои компоненты, CSS. В общем, реально - сила. Силища. То есть, если вдохновиться как-то свободной темой - то создать на дефолтном шаблоне что-то похожее вполне реально.

Теперь о ложке дегтя. Если нужно "запилить" "совсем свою" тему, то будет ад и треш. Документации нормальной на систему нет. (И кажется - не предвидится). Структура темы по отношению к версиям ниже 0.9 изменена достаточно сильно - в итоге, разобраться что к чему, достаточно сложно. Помогает коллективный разум, это факт. Но сам процесс не вдохновляет.

Кстати, многие в Интернете пишут как раз о том, что система отличная, а вот с документацией - беда.

Ну и параллельно узнал о такой чудесной штуке как flex. На ней построена вся новая тема. Flex - это CSS свойство (семейство свойств), которые очень сильно упрощают верстку для многоколоночных и многострочных страниц. Не bootstrap, конечно, но очень впечатлило. Хорошая статья про flex тут. Век живи, век учись, ага. Особенно, если ты не имеешь с этим дела каждый день.