- PVSM.RU - https://www.pvsm.ru -
Всем друзьям большой привет! Флексбокс шагает по планете — наступает эпоха комфортной веб-разработки. Сегодня я покажу как можно верстать таблицы и текст флексбоксами, и немного раскажу о моем фреймворке. Это действительно ненормальное программирование.
Флексбокс — это простой и удобный способ позиционирования элементов внутри блока. Таблицы тоже могут быть свёрстаны флексбоксами потому что их структура — элементы внутри блоков. Вёрстка традиционных html-таблиц значительно сложней чем верстка флексбоксов.
Для флексбокс-таблиц типа ОС, ООО, ООН, ОСО может быть достаточно всего пяти кнопок управления:
→ Код редактора таблиц, 700 строк [1]
Обычный текст это тоже элементы внутри блока, поэтому текст вполне возможно верстать флексбоксами. Для этого надо каждое слово поместить в собственный span — абзац это div в котором span-слова. Каждое span-слово может иметь собственные id, class и data. При редактировании span-слова, каждая его буква временно помещается в собственный span.
Мне так удобнее работать с текстом на сенсорном экране.
→ Код редактора текста, 600 строк [2]
При таком способе сокращается количество CSS-cвойств, необходимых для оформления текста, до десяти:
Я инженер-программист, в программирование пришел из лингвистики. Изучив языки JS CSS HTML, я выделил в каждом простое ядро-подмножество. Это мой «супер строгий режим» — максимальный минимализм.
Веб-программирование прекрасно тем что оно в десять раз проще обычного классического, например на С++Qt. Выделив главное и отбросив избыточное, я уменьшил сложность еще в десять раз.
Например мне достаточно десяти тегов языка HTML внутри body:
Мой фреймворк уменьшает сложность, а не увеличивает её как обычные фреймворки. Моё понимание принципа KISS — программирование должно быть простым и понятным даже детям 12+. Моя задача — максимально снизить порог вхождения в программирование.
По умолчанию всё есть Флексбокс.
*
{
position:relative;
display:flex;
}
title,script,style
{
display:none;
}
Свойство display принимает только два значения — flex или ничего.
В рамках этого шаблона я сделал свой дипломный проект — WCMS.
Об этом — в следующей Хабре.
Автор: maxminimus
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/html/235530
Ссылки в тексте:
[1] Код редактора таблиц, 700 строк: http://codepen.io/max_minimus/pen/appQGm
[2] Код редактора текста, 600 строк: http://codepen.io/max_minimus/pen/WRRYMm
[3] Источник: https://habrahabr.ru/post/320022/?utm_source=habrahabr&utm_medium=rss&utm_campaign=sandbox
Нажмите здесь для печати.