Как прижать элемент div class bl вниз Boostrap 5?

У родителя должен быть флекс колонками.
У bl margin-top auto.

Альтернатива - flex-grow 1 для параграфа.

Есть ли какие-то общепринятые инварианты для размещения страниц по интуитивной составляющей?

Верстальщику удобно, когда рядом расположены все версии вьюпортов одной страницы/блока. А не в разных углах Фигмы.
Клиенту или самому дизайнеру при разработке, скорее удобен другой вариант, похожий ваш или типа того.
Вот уже появились два варианта близких к "хорошо и правильно".

Какие принципы нужно соблюдать при разработке фреймворков по типу Bootstrap/Tabler, UIKit и прочих?

Все ИИ обосновывают и всё звучит логично, причём разные по сути решения, но хочется услышать мнение от живых людей

А по-вашему, ИИ на основе чего вам всё это насоветовал?

Спрашивал у разных ИИ — советы у разных моделей иногда противоположные:

Да, люди ответят вам тоже самое.
Только в вашем перечне ещё перепутались исходники и конечный код - это раз.
Сейчас появился нативный нестинг в CSS - это два.

mobile-first vs desktop-first

Ну логично, целевые аудитории разные, задачи разные. Откуда возьмется один ответ "делай только так"?
В большинстве случаев сейчас будет mibile-first.

чтобы потом не пришлось ничего ломать и переделывать в будущем?

Вроде называете себя разработчиком, а мечтаете о какой-то утопии.

+Базово только 2 брейкпоинта, до 768 и после.

Вообще страшно, но возможно, под ваши проекты подходит. Мы их не видим.

Всё оформление в отдельный файл аля theme.css потом переопределяя другим файлом по необходимости, в т.ч это касается и темных тем.

Не понятно зачем в отдельный файл. А при наличии кастомок, так совсем.
При разработке чаще всего удобно, когда стили одного блока в одном месте и не надо скакать по файлам (речь про файлы исходников, а не в билде).

модульность

В целом логично.

Есть интересные ресурсы с HTML-сниппетами?

NeKt0, верно.
И кастомные свойства тое помогают уменьшить вложенность.

Есть интересные ресурсы с HTML-сниппетами?

Natalia Baženova, да, в чужих проектах или при использовании сторонних плагинов, такое может быть, если кто-то изначально её повысил просто так и приходится перебивать.

Есть интересные ресурсы с HTML-сниппетами?

NeKt0, да, хорошо бы обходится вообще без вложенности. Если нужно, то один уровень, максимум два.

Тут body вообще идиотизм, потому что нет тегов не в body и не имеет смысла повышать специфичность. С wrapper аналогично.
details не в article тоже нет, нет смысла уточнять.

Почему не центрируются элементы TabBar RN EXPO?

Обведите tabBar рамочкой и, очень вероятно, узнаете, что всё таки центрируются.
Если всё не так, то делайте рабочий пример.

Как пригласить другого эксперта?

Ivnika, ох, ладно, давайте разъясню медленно и по порядку.

Отменить никак. Позвать конкретно через ту менюшку второй раз - никак. Но может позвать другой пользователь.

Указанным мною способом вы можете пригласить любого, в том числе и человека из того списка экспертов.
Это, если вам действительно нужна помощь эксперта. Т.е. "ехать", а не "шашечки".

При этом нужно понимать, что в той менюшке "эксперты" совсем не всегда эксперты, а лишь люди, которые активно (относительно) отвечали по данному тегу (и не факт, что это были толковые ответы). Более того, попасть они могут в этот список также по причине неверных тегов у вопроса.

Т.е. эта функциональность тут скорее похожа на артефакт, чем на полезную вещь.

Едем дальше: все живые и имеющие возможность, время и желающие поотвечать и так увидят ваш вопрос в ленте.
Используя кнопку позвать эксперта, вы просто дергаете человека в личку и этим очень мало повышаете вероятность ответа. Особенно, если спрашивающий тычет в неё через пару минут после создания вопроса, даже не подождав. Типа бегите все ко мне, мне срочно надо.

Если разрешить менять эксперта, то пользователи начнут злоупотреблять этой кнопкой и звать всех подряд. Т.е. бесить людей. А если они недобросовестные и вопрос задан ради спама, то выйдет совсем жесть.

Как мне еще перефразировать чтобы мне не отвечали что попало?

На этом сервисе так не выйдет. Видимо, вы не до конца понимаете его суть.

Объясню: вопросы тут не принадлежат лично вам. Также ими пользуются и другие люди, столкнувшиеся с аналогичными проблемами. Если ответ или комментарий не помог лично вам, это не значит, что, во-первых, он не является объективным ответом, во-вторых, не поможет кому-то другому.

Как изменить цвета текста, который поверх картинки?

Полно аналогичных вопросов
Как реализовать шторку на js?
Как реализовать инверсию цвета поверх картинки?

Или
Дублировать текст в дата-атрибут и псевдоэлемент обертки картинки + overflow.
Расположить поверх основного (гридами удобно)

Оччень старая песочница (гридов тогда ещё не было и дубликат текста в контенте(так не надо), но суть должна быть ясна)
https://jsfiddle.net/Ankhena/sfybvL8g/

Как пригласить другого эксперта?

Ivnika,

Впрочем не жду ответа, уже все понятно

Извините, но вы умеете читать?

Верну вам ваш же вопрос.
Потому что как раз таки в моем комментарии написано как можно позвать кого угодно.

Как пригласить другого эксперта?

Вот так и позовите Ivnika
Правда, нужно понимать, что это как обращение в личку и вы дергаете человека.

Эксперт по каким-то причинам не отвечает

Вы лишь в 17% вопросов выбирали что-то ответом.
Так что нет причин удивляться.

Есть интересные ресурсы с HTML-сниппетами?

MDN, Дока, спека опять же.
И заодно ресурсы с интересными статьями типа css-tricks.com, dev.to ...

Вы зря хотите ограничится только тегами. Типа details или dialog, есть и интересные атрибуты, например, popover, а также весьма интересные свойства CSS.

p.s.
body .wrapper article details это ужасные селекторы.

Как правильно называется подгонка соотношения сторон?

например, так

Как и где начинающему верстальщику найти работу фрилансом? Или же "подмастерьем" у опытного программиста?

Как и где начинающему верстальщику найти работу фрилансом?

Очевидно, на биржах фриланса, там же где и опытным.
Сделав достойное портфолио и научившись отвечать на заявки.

Или же «подмастерьем» у опытного программиста?

Сколько вы готовы за это платить? Решите для себя этот вопрос.
А потом просто найдите ментора за эти деньги. Если они адекватные.
Так больше вероятность добиться желаемого. Потому что проще провести ревью вашего кода или консультацию, чем разгребать за вами в реальном клиентском проекте.

Хотелось бы найти для себя практику.

Просто практику довольно сложно НЕ найти.
Берете любой сайт - повторяете.
Берете любое задание с фриланса - делаете.
Берете макеты из групп в телеграме и т.д. Их там не просто много, а верстать не переверстать.

Как сделать "прилегание" элементов к друг другу?

Dmitry, абсолют от абсолюта это нормально. Правда, не понятно где там на скрине модальное окно. И обычно модалки имеют fixed, а не absolute. Но это сути не изменит.
Ваше описание намекает на неверно выбранные единицы измерения.
Но вы не предоставляете песочницу.
Сделайте песочницу на codepen.io или аналоге в которой видно проблему и как вы её решали.

Как убрать дробь в размере картинки?

imko,
Да, но

что ширина пластична и зависит от ширины картинки

Т.е. стили не участвуют (ну или, может быть, участвуют частично чем-нибудь вроде max-w 100%, мы не знаем)

Как коректно получить бордер? Чтобы не делать его svg?

Антон Антон, откуда столько?
Один псевдик с абсолютом и inset -2px

z-index либо банально -1, если фон позволяет.
Либо, если не позволяет, то с корректировкой родительского.

Зачем два псевдика я не придумала.

Как коректно получить бордер? Чтобы не делать его svg?

Антон Антон,

добавил. как-то сильно больше кода получилось

Песочницу не смотрела.
Но замена <div></div> на &::before {content: ""} не должна быть дать прям большой прибавки кода.

Как коректно получить бордер? Чтобы не делать его svg?

Лучше бы псевдоэлементы вместо пустых div.
Ещё вариант - масками (mask + mask-composite).

Как правильно расположить блоки через grid-area?

Начать бы с подсчета колонок. Узнать, что их 4 (по крайней мере).
Дальше осознать, что 1 и 5 блоки занимают по 2 колонки.

Задать им span 2. Это если вы не знаете сколько будет элементов.
Если знаете, то можно и через area, только писать больше.

"a a b c"
"d e e f";