+7 (937) 449-34-42
info@quasar-media.ru
Создание и продвижение сайтов во всех городах России
Список городов

Фреймворк "Pulsar"

Фреймворки сильно упрощают жизнь веб-разработчику, но, к сожалению, в последнее время появилось несколько проблем в их использовании, например, они "тащат" поддержку методом костылей совместимость со старыми версиями IE, которые давно не подддерживаются, и, зачастую, многие из них используют для совместимости устаревшие свойства, поддержка которых более не актуальна, что приводит к большому размера фреймворка и падению производительности.

Фреймворк "Pulsar" - пишется с нуля под типичные задачи вебмастера и используется в повседневной деятельности. Малый размер является его главным преимуществом.

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

Варианты подлючения

Подключение в 1 строку:
<link rel="stylesheet" type="text/css" href="https:///quasar-media.ru/prog/pulsar/pulsar-frwrk-1.00.css">
Данное содержимое поместить между тегами head.

Скачивание и подключение вручную:
Загрузить Закачать данный файл на хостинг и подключить как и все файлы css.


Возможности фрейворка

2 столбца адаптивом

Контент 1
Контент 2

Техническая реализация:

<div class="p-block-1-2 p-center">Контент 1 </div><div class="p-block-1-2 p-center">Контент 1</div>

p-block-1-2 - класс, где 1-2 переводится как 1/2 ширины
p-center - аналог "text-align:center"


3 столбца адаптивом

Контент 1
Контент 2
Контент 3

Техническая реализация:

<div class="p-block-1-3 p-center">Контент 1 </div><div class="p-block-1-3 p-center">Контент 1</div><div class="p-block-1-3 p-center">Контент 3</div>

p-block-1-3 - класс, где 1-3 переводится как 1/3 ширины
p-center - аналог "text-align:center"


4 столбца адаптивом

Контент 1
Контент 2
Контент 3
Контент 4

Техническая реализация:

<div class="p-block-1-4 p-center">Контент 1 </div><div class="p-block-1-4 p-center">Контент 2</div><div class="p-block-1-4 p-center">Контент 3</div><div class="p-block-1-4 p-center">Контент 4</div>

p-block-1-4 - класс, где 1-4 переводится как 1/4 ширины
p-center - аналог "text-align:center"


5 столбцов адаптивом

Контент 1
Контент 2
Контент 3
Контент 4
Контент 5

Техническая реализация:

<div class="p-block-1-5 p-center">Контент 1 </div><div class="p-block-1-5 p-center">Контент 2</div><div class="p-block-1-5 p-center">Контент 3</div><div class="p-block-1-5 p-center">Контент 4</div><div class="p-block-1-5 p-center">Контент 5</div>

p-block-1-5 - класс, где 1-5 переводится как 1/5 ширины
p-center - аналог "text-align:center"


Переворачивающийся блок

Лицевая сторона
Обратная сторона

Техническая реализация:

<div id="p_flip_container" style="width:350px; height:200px;"> <div id="p_flip_card"> <div class="front face" style="background: #6889A9;">Лицевая сторона</div><div class="back face center" style="background: #6889A9;"> Обратная сторона </div> </div> </div>

Увеличение картинки при наведении

<div class="p-block-1-4 p-center">Контент 1 <div class="zoom1" style="width: 260px; height: 200px;"><img src="/images/blog/ceny.jpg" alt=""/></div>

Высоту и ширину указывать обязательно.


Уменьшение картинки при наведении

<div class="p-block-1-4 p-center">Контент 1 <div class="zoom2" style="width: 260px; height: 200px;"><img src="/images/blog/ceny.jpg" alt=""/></div>

Высоту и ширину указывать обязательно.


Всплывающий блок при клике

Открыть окно
X Всплывающий блок

<a href="#ModalOpen">Открыть блок</a> <div id="ModalOpen" class="p-window"> <div><a href="#close" title="Закрыть" class="p-close">X</a>

Дополнительные мелкие свойства

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

p-hide1100 - скрывать блок, если ширина окна меньше значения, доступные значения: 1100, 1000, 900, 800, 700, 600, 500, 400

p-mhide1100 - скрывать блок, если ширина окна ,больше значения, доступные значения: 1100, 1000, 900, 800, 700, 600, 500, 400

p-padding5 - Отступ внутри блока, значения 5, 10, 15

p-center, p-left, p-right - выравнивание текста внутри блока


Обратная связь

Ваше сообщение было успешно отправлено

Обратная связь

Обратная связь

Ваше сообщение было успешно отправлено

Обратная связь

Обратная связь

Ваше сообщение было успешно отправлено

Заказать
сайт
Задать
вопрос
+7 (937) 449-34-42
Онлайн-калькулятор