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

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

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

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

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

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

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

*
{
position:relative;
display:flex;
}

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

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

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

Верстка традиційних таблиць html значно складніше ніж верстка флексбоксов.

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

image

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

Верстка тексту флексбоксами
Звичайний текст це теж елементи всередині блоку, тому текст цілком можливо верстати флексбоксами. Для цього треба помістити кожне слово в власний 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;
Мій нанофреймворк
Я інженер-програміст, програмування прийшов з лінгвістики. Вивчивши мови 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
А як же семантика і роботи? Насправді для нормальної індексації достатньо цього:
<meta name="author" lang="ru" content="ім'я автора" />
<meta name="description" content="опис документа в пошуку" />
<meta name="keywords" content="тег, тег, тег, не більше десяти" />
<meta name="document-state" content="Dynamic/Static" />
<title>заголовок документа < /title>

При бажанні можна додати теги — я виділив мінімальне ядро.
Я більше орієнтуюся не на сайтостроение, а на кросплатформенную розробку додатків для мобайл і десктоп платформ.

Мій фреймворк зменшує складність, а не збільшує її як звичайні фреймворки. Моє розуміння принципу KISS — програмування повинно бути простим і зрозумілим навіть дітям 12+. Моє завдання — максимально знизити поріг входження в програмування.

image
Джерело: Хабрахабр

0 коментарів

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