• Что такое CSS Switcher
  • Возможности
  • Требования
  • Test it!
  • Скачать

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

CSS Switcher помогает делать дизайны умными и красивыми одновременно, не прибегая к каким либо изощренным методикам. Он легок, прост в использовании и кроссбраузерен.

HTML5 Powered with CSS3 / Styling, Device Access, Graphics, 3D & Effects, Performance & Integration, Semantics, and Offline & Storage

В какой-то степени данный plugin можно рассматривать в качестве альтернативы @media-queries, описаных в спецификации CSS3, но не поддреживаемых многими старыми браузерами.

CSS Switcher может использоваться для управления вариантом отображения сайта в нескольких режимах:

  • Переключение цветовых схем
  • Переключение стилей шрифтов
  • Автоматическая адаптация дизайна под разрешение экрана

Плагин поддерживает многопоточность, что позволяет использовать одновременно несколько css-схем или стилей. Гибкое и умное API гарантирует простоту настройки, а возможность хранить в памяти выбранную пользователем схему отображения на стороне клиента обеспечивает комфортное применение.

  • Подрежка HTML5 Local Storage
  • Поддержка Cookies для старых браузеров
  • Гибкое и понятное API

Стоит сказать, что данное решение, на данном этапе, ни в коей степени не претендует на роль каркасаного фреймфорка и предоставляет лишь базовый набор идей для организации ваших css стилей. Смотрите примеры и варианты сеток.

CSS Switcher не имеет каких либо жестких требований. Достаточно подключить все библиотеки, подготовить css-схемы и оформить переключатели в соответсвии с требованиями макета.

  • jQuery 1.6.4
  • jQuery local storage

Часть логики опирается на новые возможности HTML5, такие, как local storage, однако, CSS Switcher способен работать со старыми браузерами вплоть до IE 6.

Пример работы для переключения шрифтов.

Пример работы для переключения цветов.

Текущая версия jQuery CSS Switcher 1.5 Beta:

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

  • API reference
  • Grid reference
  • HTML & CSS reference
  • Множественное использование

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

//пример использования для автомачиеской адаптации под разрешение экрана
$(function(){
	
   $('body').cssSwitcher({
       grid: 'auto',
       step: 'mob|smin|wmin',
       path: '/schemas/grids/'
   });

});

Описание аргументов вызова:


@grid: переключение плагина в режим автоматической адаптации css схемы под разрешение экрана 
@step: шаги срабатывания: mob, smin, wmin; смотрите таблицу Grid Reference 
@path: путь до папки со схемами сеток

Плагин будет автоматически подключать нужный css в зависимости от разрешения дисплея. Доступны несколько вариантов, которые позволяют уточнить пороги переключения. Например, для того, чтобы активировать css для мобильных устройств достаточно указать параметр mob( mob.css должен лежать в папке соответствующей path ).

//Пример запуска CSS Switcher для коррекции размера шрифтов
$(function(){
	
   $('#content').cssSwitcher({
      group: 'fonts',   
      path: '/pathToCSS/',
      range: 3,
  });

});

Синтаксис в примере выше ничем не отличается от традиционного jQuery API. Требуется указать селектор, к которому будет прикреплено меню переключателя, уникальное имя группы, количество стилей и путь до папки с css схемой.

Следует отметить, что имена css файлов обязательно должны соответствовать шаблону: st1.css, st2.css, st3.css и т.д.

//Управление стилем меню переключения и отладка
$(function(){
	
   $('#selector').cssSwitcher({
      group: 'colors',   
      path: '/pathToCSS/',
      controls: 'menu',
      range: 10,
      debug: 1
  });

});

Для предотвращения кэширования стилей на момент отладки используется debug: 1.

Чтобы выбрать стиль вывода меню переключателей используйте controls. Без явного указания переключатели будут оформлены в теги <ul>. Также доступны варианты controls: 'menu'( аналог ul для HTML5 ), controls: 'div' и controls: 'plain' для вывода в виде строчного блока.

Чтобы узнать больше смотрите HTML reference.

Таблица описывает соответсвие параметров запуска плагина, порогов переключения css схемы и нужных для работы стилей.
mobile laptop wide параметры необходимые css
480px - 960px 1024px - 1280px 1280px - ∞ mob|smin|wmin mob.css; smin.css; wmin.css
1024px - 1440px 1440px - ∞ mob|smax|wmax mob.css; smax.css; wmax.css
mobile laptop wide параметры необходимые css

Обратите внимание на то, что нельзя указывать вместе smax и wmin т.к. они описывают одни и те-же разрешения. Позже это будет исправлено.

По мере необходимости список режимов будет пополняться. Не увидели нужного? Пишите на shift@shift-web.ru и он обязательно появится.

CSS Switcher автоматически создает нужную для переключателей HTML разметку и подключает в <head> стили.

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

//пример запуска для управления схемой шрифтов
$(function() {

		$('#content').cssSwitcher({
		    range: 5,
		    group: 'font',
		    path:  'schema/font/',
		});	

});

В обычном случае меню переключателя строится на базе маркированного списка <ul>:

<div id="content"> <!-- селектор к которому крепится меню -->
<ul class="switcher" data-gr="font">
	<li id="st1_usr_style" data-gr="font" data-st="st1_font">[1]</li>
	<li id="st2_usr_style" data-gr="font" data-st="st2_font">[2]</li>
	<li id="st3_usr_style" data-gr="font" data-st="st3_font">[3]</li>
	<li id="st4_usr_style" data-gr="font" data-st="st4_font">[4]</li>
	<li id="st5_usr_style" data-gr="font" data-st="st5_font">[5]</li>
</ul>
...

Таким образом, для оформления переключателей надлежащим образом можно использовать селекторы:

//общие селекторы по каркасному родителю
ul.switcher { }
.switcher li { }

//уникальные идентификаторы группы
#st1_usr_style { }
#st2_usr_style { }
#st3_usr_style { }
#st4_usr_style { }
#st5_usr_style { }

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

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

Плагин поддерживает многопоточность. Можно создавать неограниченное количество схем с неограниченным количеством вариантов оформления всего, что угодно.

Пример запуска в многопоточном режиме:


$(function() {

	//grid auto switcher
	$('body').cssSwitcher({
		grid: 'auto',
		step: 'mob|smax|wmax',
		path: '/schemas/grids/'      
	});


	//font switcher
	$('#selector').cssSwitcher({
		range: 5,
		group: 'fonts',
		path:  'schemas/fonts/'
	});

	//colors switcher
	$('#selectorX').cssSwitcher({
		range: 28,
		path:  'schemas/colors/',
		group: 'colors',
		controls: 'menu'                  			
	});

	//layout align switcher
	$('#selectorY').cssSwitcher({
		range: 12,
		path:  'schemas/layout/',
		group: 'layout',
		controls: 'plain'			
	});
			
});

Каких-либо жетских ограничений нет, но помните о важности чувства меры. И да прибудет с вами сила.