Система для удобства создания html-файлов из блоков (css, js, html блоки)
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
DEMO
css-collection
fonts-collection
html-collection
images-collection
js-collection
LICENSE-FULL-EN.txt
LICENSE-RU.txt
README.md
favicon.ico
index.html
style.css

README.md

[Block-Engine] (http://webdesign.ru.net)

Система для удобства создания новых html-файлов (css, js, html блоки)

###ЧТО ЭТО?

Сумма файлов (блоков) из которых можно быстро собрать необходимый вам сайт.

###ЗАЧЕМ?

Работая над темами для [Ruxe-Engine] (https://github.com/maindefine/ruxe-engine) я обратил внимание на то, что каждый раз заново пишу файл стилей. Но обязательно включаю в него определённые, уже ставшие привычными части, как например Eric Meyer CSS reset, стили lightbox и прочие необходимые части. (UPDATE: сейчас я уже использую аксиоматический reset собственного приготовления). Порой, открыв старый, написанный мною же файл стилей, я долго не мог его понять, так как уже забыл, почему я назвал так или иначе тот или иной блок. Для того, чтобы более не мучиться, я решил построить какую-то общую систему, логически понятную и достаточно универсальную.

Система будет содержать отдельные блоки, из которых можно будет "собрать" html-файл для дальнейшей работы по созданию сайта.

###ПРЕИМУЩЕСТВА РАБОТЫ С СИСТЕМОЙ

  • Не надо писать код "с нуля" - Блоки-заготовки позволяют это делать быстро и качественно.
  • Оценка кода "на лету" - Вы всегда можете запустить страничку для проверки работоспособности.
  • Доступность кода - Код открытый и доступен для изменений.
  • Минимальный "вес" кода - Но об этом ниже...

###МИНИМАЛЬНЫЙ ВЕС - ГЛАВНОЕ ПРЕИМУЩЕСТВО ЭТОЙ СИСТЕМЫ!

Я всегда пытался оптимизировать код своих сайтов, чтобы даже старенький смартфон, на любом тарифе, с ограничениями по скорости доступа в интернет и с ограничениями по объёму загруженного контента, "не тормозил". Поэтому в css-файлах я использую селекторы строки и подстроки (и стараюсь использовать их по-максимуму), не стесняюсь использовать мультиклассы, структурные псевдоклассы и все возможности операторов! Для понимания достаточно внимательно посмотреть код, который я выкладываю в этом проекте!

####Это, в первую очередь, Аксиоматический CSS

Аксиоматический CSS препятствует "разрастанию" кода. В дефинициях я не описываю какой-то определённый класс. Я даю определения ОБЩИМ классам. Если вы внимательно проанализируете css-файлы, которые я здесь выкладываю, то вы обнаружите, что я использую метод индукции, а не дедукции. Я описываю общие значения классов, а частные можно построить, опираясь на общие дефиниции. То есть, если вы хотите с помощью моей системы задать "резиновый" блок шириной 80% с отступом 10% слева, то вам не надо объявлять этот класс. Вы просто пишете:

	<div class="block-80-off-10">
	    <p>Содержание блока</p>
	</div>

Причём в файле style.css вы не найдёте класса .block-80-off-10! Его там просто нет, потому что дефиниции даются только ОБЩИМ значениям классов, а не частным вариантам. Так, к примеру, если вы решили создать мульти-блок шириной 90% с полями по краям в 5%, а в нём содержание в две колонки по 50%, то вы просто пишете такой код (все значения выдуманы, можете подставить свои):

<div class="group-90-offset-05">
    <div class="block-50">
	    Содержание блока №1
    </div>
    <div class="block-50">
	    Содержание блока №2
    </div>
</div>

Имя класса group-90-offset-05 обозначает, что это блок шириной 90% с полями слева и справа по 5%. Это "обёртка", за пределы которой не выходит содержание. Раньше я рекомендовал "закрывать" вложенные блоки классом "clearfix" для защиты от "выползания" содержимого за пределы обёртки, но теперь я нашёл более изящное решение. Достаточно к "обёртке" добавить стиль overflow: auto;. Это семантически правильно и кратко.

Классы block-50 описывают два блока по 50% без отступов по краям. А если бы я захотел создать блок шириной 40% с левым отступом в 2%, то запись класса выглядела бы так - .block-40-off-02. Если вы заметили, что такого описания, как [class=-off-02] в системе нет, но его можно добавить в процессе работы, используя синтаксис, который я вам предлагаю*. "Лишние", ненужные вам в этом проекте классы, можно потом просто удалить. Это ускорит загрузку сайта.

Этим и отличается система! Вам не надо описывать КАЖДЫЙ класс. Вы просто пишете код, в котором сами определяете, какие общие описания класса подключить к этому, конкретному объекту, который вы только что придумали! Это продвинутый метод работы с императивами, позволяющий на лету описывать класс и давать ему определения, в том числе и цисловые!

И, как результат, свобода творчества! Ведь вы же веб-художник ё-моё, а не какой-то там "юзер-с-мышкой"! Сейчас передо мной стоит задача развития системы. Я не откажусь от посильной помощи тех, кто реально занимается веб-дизайном. Меня интересуют даже не ответы, а ваши вопросы! Я сейчас делаю систему "под себя". То есть, я реализую СВОИ запросы и требования. А мне хотелось бы, чтобы любой веб-художник поставил задачу и мы вместе нашли решение.

Давайте работать вместе!

###ПРИМЕЧАНИЕ

В состав проекта включил несколько директорий, в которых будут находиться вспомогательные файлы, необходимые для построения сайта и демонстрационные страницы:

dir /DEMO - примеры работы с блоками

dir /css-collection - готовые css-блоки

dir /fonts-collection - необходимые шрифты (font-awesome)

dir /html-collection - заготовки страниц разных стандартов (html5, loose, strict, transitional)

dir /images-collection - коллекция фоновых и вспомогательных изображений

dir /js-collection - необходимые скрипты

Они необходимы для того, чтобы пробный html-файл полностью функциональным.

Кроме того в систему включены блоки-заготовки, в которых содержатся части кода:

Название файла Содержание файла
block.css Основные стили блоков системы
addition.css Дополнительные стили
button.css Стили кнопок "по умолчанию"
form.css Стили форм
fontawesome.css Стили иконочного шрифта + сжатый файл css
layout.css Дополнительные стили, применительно к определённому сайту
lightbox.css Стили лайтбокса, если таковой используется
normalizer.css Нормалайзер CSS от Nicolas Gallagher
reset.css Аксиоматический CSS Reset
table.css Стили для построения таблиц "зебра"

Коллекция будет пополняться, поэтому содержание папок может оличаться от описанного здесь.

В корне проекта находятся файлы для "сборки" рабочей страницы (не забудьте указать кодировку файлов utf-8 без BOM в начале работы с ними).

Название файла Содержание файла
index.html Индексный файл для проверки вносимых изменений
style.css Пустой файл каскадной таблицы стилей, в который производится сборка необходимых стилей

##ПРИНЦИПЫ РАБОТЫ С БЛОКАМИ

Скачайте архив проекта на свой компьютер и разархивируйте его. Теперь можно приступать к работе.

Система представляет из себя своего рода конструктор, пока ещё разобранный на блоки. Процесс сборки начинается с оформления файлов index.html и style.css, с добавления в них содержимого блоков и вспомогательных файлов и директорий.

Исходя из названия системы, главными в ней являются блоки. Блокам присваиваются классы .group и .block. Особой разницы в этих классах нет, они абсолютно идентичны. Разные названия я им присвоил только для того, чтобы легче было читать созданный код. Блоки класса group удобнее делать внешними. Они будут служить "обёрткой" для вкладываемых в них блоков с классом block. Такую "конструкцию" легче читать. Глаз сразу будет выхватывать внешний div и легко определять внутренние, даже если построение будет достаточно сложным!

В файле block.css даются описания основных блоков, которые вы всегда можете дополнить и изменить по своему усмотрению. Самое первое, что вы должны сделать, это понять принцип функционирования данной системы, чтобы получить лёгкий, понятный код. Проверяю я готовый код даже на IE8 (уж если он понял, то остальные уж точно поймут). Итак, я жду ваших "коммитов" и "пулл реквестов"!

Система "block-engine" на данный момент существует и распространяется по открытой CC (Creative Commons) лицензии.