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

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

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

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

image

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

2. Верстка тексту флексбоксами
Звичайний текст це теж елементи всередині блоку, тому текст цілком можливо верстати флексбоксами. Для цього треба помістити кожне слово в власний span — це абзац div у якому span слова. Кожне span-слово може мати власні id, class і data. При редагуванні span-слова, кожна його буква тимчасово поміщається у власний span.

Мені так зручніше працювати з текстом на сенсорному екрані.

image

Код редактора тексту, 600 рядків

При такому способі скорочується кількість CSS-властивостей, необхідних для оформлення тексту, до десяти:

  1. color
  2. direction
  3. font-family
  4. font-style
  5. font-size
  6. text-decoration
  7. text-transform
  8. text-shadow
  9. text-overflow: ellipsis;
  10. white-space: nowrap;
3. Мій нанофреймворк
Я інженер-програміст, програмування прийшов з лінгвістики. Вивчивши мови JS, CSS, HTML, я виділив в кожному просте ядро-підмножина. Це мій «супер строгий режим» — максимальний мінімалізм.

Веб-програмування чудово тим, що воно в десять разів простіше звичайного класичного, наприклад на С++Qt. Виділивши головне і відкинувши надмірне, я зменшив складність ще в десять разів.

Наприклад мені достатньо десяти тегів мови HTML всередині body:

  1. span
  2. div
  3. img
  4. audio
  5. video
  6. svg
  7. canvas
  8. iframe
  9. form
  10. input
Мій фреймворк зменшує складність, а не збільшує її як звичайні фреймворки. Моє розуміння принципу KISS — програмування повинно бути простим і зрозумілим навіть дітям 12+. Моє завдання — максимально знизити поріг входження в програмування.

image

За замовчуванням усі є Флексбокс.

*
{
position:relative;
display:flex;
}

title,script,style
{
display:none;
} 

Властивість display приймає тільки два значення — flex або нічого.

В рамках цього шаблону я зробив свій дипломний проект — WCMS.
Про це — в наступній Хабре.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.