Как верстается каркас страницы?

Question

[Егор]

Всем привет! Подскажите, как правильно верстается каркас (скелет) страницы (учитывая, что нормальный вид страницы уже полностью сверстан, со всеми стилями)?

Пример скелета предзагрузки (у ютуба):

Comments

[Дмитрий Пыркин]

Как сделать скелет сайта до загрузки?

[Антон Литвиненко]

называется skeleton loader, если вдруг решите гуглить

[Егор]

Антон Литвиненко, если задаю вопрос тут - значит не удалось найти гуглежом)) В целом, должно быть логично.

[Антон Литвиненко]

Егор, Вполне возможно вы не знаете что именно гуглить, я тоже когда-то не знал как это называется

[Ankhena]

Егор,
Сложно представить как вы гуглили и не нашли, зная слово.
Например, https://css-tricks.com/building-skeleton-screens-c...

Answer 1

[tempick]

с помощью grid или flexbox. Либо я не понял вопрос

Answer 2

[Zettabyte]

у ютуба

Полагаю, что у ютьюба под капотом столько хитрой логики, что вы сильно замучаетесь её повторять.

Вероятнее всего, вам надо смотреть в сторону фреймворков наподобие React или Angular, обращая внимание на то, что они могут в плане single-page application (SPA). Дальше строить работу с API, проверяя и подгружая то, что не загружено для запрашиваемой страницы (новый визит), либо то, что изменилось (переходы по сайту).

Чтобы внешне было совсем как на Youtube, можете прикрутить что-то в духе этого: https://ricostacruz.com/nprogress/

учитывая, что нормальный вид страницы уже полностью сверстан

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

Будет интересно увидеть, если кто-то предложит готовый вариант, но я с трудом представляю что-то универсальное в данном направлении.

Comments

[Иван]

Вы кажется не поняли вопроса

Answer 3

[Vladimir Onokhov]

Grid

Answer 4

[Iurii_Sol]

Проинспектируйте страничку. Полезный навык для веб разработчика. Как я понял Ваш пример построен на Grid.