Добро пожаловать на демо-страницу CSSE!
CSSE - библиотека для редактирования CSS сайта онлайн по принципу WYSIWYG (What You See Is What You Get).Вы можете посмотреть, как это работает, прямо на этой странице. :-)
Идея проста: в отдельный CSS выносим все стили, которые можно редактировать.
CSS файл парсится, в результате строится форма редактирования.
Библиотека написана на PHP, JavaScript, в стиле ООП, с использованием Jquery и Ajax. База данных не нужна.
CSS файл парсится, в результате строится форма редактирования.
Библиотека написана на PHP, JavaScript, в стиле ООП, с использованием Jquery и Ajax. База данных не нужна.
Для чего нужна CSSE:
- В конструкторах сайтов.
- Пользователи художественного портала, социальной сети, форума могут настраивать его внешний вид каждый на свой вкус.
- Наглядная демонстрация того, как работает CSS, в учебных целях.
- Быстрое макетирование дизайна при обсуждении с заказчиками, отладка CSS для администраторов и т.д.
Особенности:
- Все значения форм валидируются, гарантируя целостность CSS.
- CSS файл кешируется, благодаря чему нет надобности парсить его каждый раз (кеширование можно отключить для отладки).
- Комментарии в CSS могут использоваться в качестве понятных пользователю заголовков - названий селекторов - в форме редактирования.
- Мультилингвальность интерфейса.
- CSSE распространяется по свободной лицензии MIT.
- CSSE предельно проста и минималистична. PHP код - 20Кб, JavaScript - 170Кб, где 160Кб занимает Jquery.
- CSSE легко настраивается и интегрируется в ваш проект, а также легко дополняется новыми типами полей.
- Тестировалось в Firefox 3.5, Opera 9, Google Chrome, IE6, IE7, IE8.
Пример CSS этой страницы:
body {
color: #000000;
}
/* CSSE_SPAN_CSSE */
span.csse_name {
color: #0019f5;
}
/* CSSE_DIV_ABOUT */
div.about {
border-bottom-width: 1px;
border-bottom-style: dashed;
border-bottom-color: #ccc;
}
/*
CSSE_DIV_HEADER
*/
h3 {
font-size: 17pt;
padding: 3px;
color: #f9ff4c;
background-color: #1f7519;
}
Пример использования:
<?php
// Constants from CSS in English
define('CSSE_SPAN_CSSE', 'CSSE title');
define('CSSE_DIV_ABOUT', 'Paragraph');
define('CSSE_DIV_HEADER', 'Header');
// Show edit form
require('csse/csse_request.php');
CSSE_Request::edit('css/edit.css');
?>
Архитектура CSSE:
