Общее описание
Bicycle Framework - это минималистичный CSS/JS фреймворк для быстрой разработки адаптивных веб-сайтов. Название отражает его философию - "не изобретать велосипед", а предоставить только необходимый набор инструментов для комфортной верстки.
Фреймворк использует:
- Глобальные стили и переменные CSS.
- Flexbox для построения адаптивной сетки с 5 контрольными точками.
- Утилитарные классы для быстрой стилизации.
- Системные шрифты и SVG-иконки для максимальной производительности.
- Готовые компоненты (модальные окна, слайдер, аккордеон и др.) на базе CSS и JavaScript без зависимостей
Фреймворк предназначен для совместной работы с движком MyEngine CMS, который является простой и легкой системой для управления контентом, использующей в своей работе чистый HTML и JavaScript.
Bicycle Framework - это простой и эффективный инструмент для быстрого создания адаптивных сайтов. Сайты созданные на связке MyEngine и Bicycle Framework однозначно будут загружаться значительно быстрее, чем сайты созданные на популярных движках и фреймворках, как, например, Woordpres+Bootstrap. Это связано стем что движок MyEngine работает без использования MySQL, т.е. весь скрипт движка и база данных, которая хранится в текстовых файлах, находятся на одном сервере. А Bicycle Framework работает без зависимости от избыточного функционала тяжелых CSS и jQuery библиотек.
Файловая структура фреймворка
1. Файл bicycle-1.0.css
Назначение: основной файл стилей для веб-сайта.
Характеристика:
- Содержит глобальные стили, которые по умолчанию являются стандартными для любого сайта и не зависят от оформления сайта.
- Реализует адаптивную вёрстку с медиазапросами для разных разрешений экрана (от 320px до 1280px и выше).
- Включает стили для адаптивной сетки, типографики (заголовки, тексты, ссылки), кнопок, форм, иконок и отступов.
- Оптимизирован для кросс-браузерной совместимости.
2. Файл components-1.0.css
Назначение: дополнительные стили для компонентов интерфейса.
Характеристика:
- Содержит стили для сложных UI-компонентов:
- Оформление мобильного меню.
- Модальные окна.
- Фотогалерея.
- Аккордеон (раскрывающиеся блоки с анимацией).
- Карусель и слайдер.
- Табы (переключение между вкладками).
- Кнопка "Наверх".
- Использует CSS-переменные из bicycle-1.0.css для согласованности дизайна.
- Оптимизирован для работы с touch-устройствами (свайп-навигация).
3. Файл components-1.0.js
Назначение: JavaScript-логика для интерактивных компонентов.
Характеристика:
- Управляет поведением элементов сложных UI-компонентов:
- Открытие/закрытие мобильного меню.
- Модальные окна (открытие/закрытие, валидация форм, AJAX-отправка
данных через send.php).
- Фотогалерея (переключение фото, навигация).
- Аккордеон (раскрытие/сворачивание блоков).
- Карусель и слайдер (автопрокрутка, обработка свайпов, адаптация под
количество слайдов).
- Табы (переключение контента).
- Кнопка "Наверх".
- Реализует отправку форм с валидацией полей (имя, email, телефон, чекбокс согласия).
- Поддерживает адаптивность (изменение логики для мобильных устройств).
- Обрабатывает ошибки и выводит пользователю сообщения (например, при некорректном email).
4. Файл send.php
Назначение: обработчик отправки данных форм.
Характеристика:
- Принимает POST-запросы от форм (из components-1.0.js).
- Проверяет данные из полей формы на валидность:
- Имя (только буквы, цифры, дефисы).
- Телефон (только цифры, скобки, пробелы).
- Email (стандартная валидация).
- Чекбокс согласия (обязательное поле).
- Формирует и отправляет письмо.
- Возвращает JSON-ответ с кодом результата (A – успешное отправление
сообщения, B-Y – ошибки).
- Защищён от XSS (использует htmlspecialchars).
- Реализует отправку форм с валидацией полей (имя, email, телефон, чекбокс согласия).
- Поддерживает адаптивность (изменение логики для мобильных устройств).
- Обрабатывает ошибки и выводит пользователю сообщения (например, при некорректном email).
5. Папка html
Папка содержит html-файлы статичных страниц с примерами использования Bicycle Framework. Если содержимое этой папки вы загрузите на сервер, то получите реальные примеры работы Bicycle Framework, вплоть до отправки сообщений из форм. Для этого в файле send.php в переменной $emails нужно указать свой почтовый адрес.
Полная версия документации - https://bicycle.3shaga.ru/dokumentaciya. Там же можно скачать сам фреймворк. Пример шаблона на базе фреймвока - https://yt.3s-cms.ru.