У минулій хабре я коротко описав мій незвичайний нанофреймворк, в якому всього десять тегів і flexbox за замовчуванням. Для освоєння якого треба вчити менше, а не більше. Він може бути корисний, наприклад для навчання дітей, або для творчих людей, яким важко вивчити звичайний веб-програмування та його складні незрозумілі фреймворки.

У цій статті я розповім про дизайні WCMS зробленої в рамках шаблону HTML10, і знову поділюся вихідним кодом — це моя дипломна робота інженера-програміста.

Завдання — розробити клієнт-серверну програму для збереження знань у вигляді дерева-ієрархії документів (як у бібліотеці, максимально просту та зручну, щоб впоралися навіть діти 12+ і дуже п'яні інваліди.

Це найпростіший движок сайту в природі, поріг входження відсутня, все інтуїтивно зрозуміло.

Ця WCMS може бути використана наприклад студентом або письменником, будь Видавцем веб-документів. Можливо зробити свою енциклопедію подібну Вікіпедії, але функція пошуку документів поки можлива тільки для власника і тільки на локальному сервері.

image

Читати далі →

«Flexbox first». Верстка таблиць і тексту флексбоксами

Флексбокс впевнено крокує по планеті — настає епоха комфортного веб-розробки. У цій статті я розповім про незвичайний спосіб верстки всього флексбоксами, і поділюся готовим кодом для верстки таблиць і тексту флексбоксами.

Три методу позиціонування:
image

1) Флексбокс за замовчуванням. Замість звичайного класичного потоку можна використовувати флексбокс-форматування. Результат буде аналогічний, крім можливості float-обтікання, без якого цілком можна обійтися.

2) Абсолютна або фіксоване розташування відносно батьківського контейнера або вікна. Для того щоб у кожному контейнері можна було так позиціонувати елементи — для кожного елемента за замовчуванням position:relative.

3) Зсув щодо свого становища, і трансформації. Зміщення через position:relative не анимируется, тому краще використовувати translate.

Графічна композиція — це комбінація цих трьох методів + ефекти і прозорість.

*
{
position:relative;
display:flex;
}

title,script,style
{
display:none; //Властивість display приймає тільки два значення — flex або нічого
} 

От і все! Це дуже простий фреймворк, але він значно спрощує верстку.

Читати далі →

Flexbox або нічого, хардкор веб-програмування

Всім друзям великий привіт! Флексбокс крокує по планеті — настає епоха комфортного веб-розробки. Сьогодні я покажу як можна верстати таблиці і текст флексбоксами, і трохи розкажу про моє фреймворку. Це справді ненормальний програмування.

1. Верстка таблиць флексбоксами
Флексбокс — це простий і зручний спосіб позиціонування елементів всередині блоку. Таблиці теж можуть бути зверстані флексбоксами тому що їх структура — елементи всередині блоків. Верстка традиційних таблиць html значно складніше ніж верстка флексбоксов.

Для флексбокс-таблиць типу ОС, ТОВ, ООН, ВЗГ може бути достатньо всього п'ять кнопок управління:

image

Код редактора таблиць, 700 рядків

Читати далі →