Пройти тест на коронавирус - онлайн, сейчас и сразу ... Быстрый экспресс-анализ по симптомам и признакам ...

Встроенный фреймворк и гибкие конструкции макета сайта.

Framework CSS Grid, как средство создания макета табличного вида на основе сетки.

Не знаю, правильно ли будет называть сеточно / макетный стиль CSS Grid - фреймворком ? ... Но, люди - так говорят ... А, мы, спорить - и не собираемся ... Нам, главное - качественные знания и результаты ...

# ... Большая и полезная статья на тему ... Почему CSS Grid лучше Bootstrap для создания макетов сайтов ... Смысл статьи в сравнении способа создания макета сетки на фреймворке разметки CSS Grid по сравнению с Bootstrap ... В качестве особенностей отмечаются : более легкий и чистый (понятный) программный код разметки ... Меньшее усложнение правил разметки при / от усложнения макета страницы ... Увеличение гибкости макета путем перемешивания порядка отображения HTML кода / source order independence ... Независимость от количества колонок путем переопределения их числа в CSS ...

В качестве недостатка указывается явная необходимость использования собственных правил в CSS, что обычно не требуется при использовании Bootstrap ... Framework CSS Grid дает больше гибкости макету не затрагивая его содержимого и, в тех случаях, когда его использование - уместно ... Возможно, CSS Grid - не самое лучшее решение для создания меню, но он может создать условия адаптивности - даже без использования @media запросов от ширины экрана (практически полностью на функциях авто / подстройки) ...

# ... Верстка на Grid в CSS ... Grid CSS - руководство и справочник ... Как работает технология верстки макета на линиях сетки, по русски, описание свойств и примеры ...

# ... CSS Grid Layout - простой старт в два шага, хорошее объяснение ... О верстке ... Быстрое, краткое и понятное введение в использование линейной сетки для кода макета веб страниц ...

# ... Базовый концепт CSS Grid от разработчиков Mozilla MDN web docs ... Веб-технологии для разработчиков ... Основные понятия Grid Layout (двумерной сетки для CSS), компоновка и новая терминология ; функции, руководство ...

Линейная сетка CSS макета и специальные семантические теги разметки HTML5.

Особенно удобно создавать простой сетчатый CSS макет страницы с использованием блоков, специально выделенных для этих целей в HTML5 ... Стандартное использование плохо / читаемых div="ID" заменено новыми структурными тегами разметки HTML5 : ...

header - Заголовок, верхний колонтитул документа, шапка страницы сайта ...
aside - Боковая панель, блок текста связанный со страницей, но не являясь частью основного контента ... Используется для блока меню или другой (повторяемой) служебно-технической информации, например автор поста (рейтинг, сообщения, дата, репутация, связь) ...
nav - Блок навигации по сайту, ссылки меню страницы и разделов групп страниц ...
footer - нижний колонтитул страницы, подвал ...
main - Основной контент / текст содержимого страницы ... Не должен включать структурные блоки сайта, указанные выше
section - Глава страницы, существенный блок текста ... Допускаются несколько секций и вкладывание одной в другую ...
article - Важные разделы / артикли секции, посты блога ...

К сожалению 100% поддержка этих тегов была реализована только в Mozilla и Chrome ... Как скоро изменится ситуация и текущая обстановка - мне неизвестно ... Равно, как и оправданность внедрения более специфичных тегов контента : ...
details summary /summary /details - разворачиваемая / сворачиваемая информация ...
audio / video source - вставка аудио / видео контента на страницу ...
meter - Числовое значение измерения с указанием диапазона value, min, max, low, high, optimum ...
figure (img src) figcaption Подпись к картинке в блоке /figcaption /figure ... Более одной подписи не допускается ...
time (datetime, pubdate) ...
немного отвлекся и отклонился от маршрута ...

В любом случае, стандартные строчные / блочные элементы с идентификатором - еще никто не отменял и, в некоторых ситуациях, их применение может быть оправдано : ... span, div, p, textarea ...

Особенности CSS Grid.

Framework сеточного макета страницы уже встроен в браузер, поэтому - не подключается,
а - инициализируется, в CSS, стилем : grid ... После, этого, все вложенные элементы тега - также становятся сеточными, наследуя свойство родительского контейнера ... Вложенные элементы - также можно представить, как под / сетку ...

Одинаковые отступы со всех сторон, в CSS Grid, задаются не через margin, а с помощью -gap / зазор, отступ ... По этой причине, за вычетом отступов, все остальное пространство делится с помощью дробных единиц fr / фракция (хотя и другие единицы могут применяться) ... Правда, внутренние отступы - по прежнему : padding, px ...
1fr 4fr = 1 / 4 = 20% к 80% ... (100% / 5 столбцов = 20% ширина столбца) ...
2fr 3fr = 2 / 3 = 40% к 60% ...
6fr 4fr = 6 / 4 = 60% к 40% ... (100% / 10 столбцов = 10% ширина столбца) ...

Ячейки сетки образуются с помощью столбцов и строк ; отсчет также можно вести по линиям начала и конца края ячейки ... По умолчанию, при уменьшении размера окна - сетка пропорционально сжимается до минимально допустимого размера ... Чтобы придать ей адаптивной гибкости - можно воспользоваться оригинальным решением ...

# ... CSS Grid revisited ... Using CSS Grid where appropriate ... Использование там, где это уместно ...

Надо бы упомянуть, что для выравнивания размеров - создаются еще и неявные ячейки сетки, которыми (кстати) тоже как-то можно управлять (но я не стал вдаваться) ... На самом деле, все интересующие теги CSS Grid (правда - не совсем полные конструкции, как предложены гуру по ссылкам) - легко / можно найти прямо в самом браузере (как и многие другие), например, в Chrome ...

# Для этого создайте пустую страничку test.htm и, двойным нажатием мышки - откройте ее в браузере ...

# На пустом экране браузера, правой кнопкой мыши - в контекстном меню выбрать : посмотреть код ... Или нажать горячую клавишу F12 - это одно и тоже, откроется консоль разработчика ...

# Далее, выбрать в меню консоли вкладку Elements ... Даже, для пустого документа - браузер сгенерит минимально необходимый, для отображения, HTML код, хотя его реально и не будет в документе ...

html head /head body /body /html ...

# Если дополнительное меню Styles Computed Event Listeners - будет внизу - нужно мышью сдвинуть вертикальную разделительную линию влево ... Навести указатель до появления двунаправленной горизонтальной стрелки и нажатием левой кнопки сдвинуть влево, в пропорции экрана 1 / 3 - 1 / 4 ... Панель сама переместится в положение : справа от кода ...

# Интересует / выбрать вкладку Styles ... Нажав левой кнопкой на область с надписью element.style { автоматически появится конструкция ввода CSS правила, вида : ; , где слева от двоеточия вводят параметр, справа - его значение ... Чтобы конструкция не пропадала - осуществлять переход от параметра ко вводу значения - не указателем мышки, а клавишей TAB ... Пустая или неполная конструкция правила стиля - автозакроется ; неправильная пара параметр : значение - будет отмечена желтым треугольником (и игнорирована в контексте страницы ? ) ...

Итак, слева от двоеточия ввести grid - и уже, начиная с первой буквы - автоподсказка выдаст большинство возможных вариантов стилей ... Выбрав нужный параметр стиля и нажав на TAB - автоматически откроется форма с наиболее употребимыми значениями ... Еще раз повторюсь, что секретных комбинаций адаптивных параметров, как указано по ссылкам - браузер не предложит ... Но эти секреты CSS Grid - весьма и весьма работоспособны ...

Какие CSS Grid параметры стилей сетки макета предлагает для ознакомлений Chrome (Firefox может отличаться, я не сравнивал) ...

-area (auto, none) ...

-auto (-columns [auto, max min -content] ; ... -flow [column, dense, row, auto, max min -content] ; ... -rows [auto, max min -content]) ...

-column (-end -gap -start) [auto, none] ...

-gap ...

row (-end -gap -start) [auto, none] ...

-template (-areas) ; (-columns -rows) [auto, max min -content, none] ...

none ...

display : grid, inline-grid ...

Вот, собственно - и, все ... Хотя, по факту - далеко не все ... Ибо, нет предела совершенству ...

...

...

...

Быстрый поиск по сайту :


Популярное : ...

... | ... Найти ... | ... Погода ... | ... Торрент ... | ... Радио ... | ... Тюнинг ... | ... ПК ... | ... Статьи ... | ... Софт ... | ... Пособие ... | ... Музыка ... | ... Авто ... | ... Десктоп ... | ...

TechStop-Ekb.ru : познавательные развлечения, техника, технологии ... На сайте, для работы и соответствия спецификациям - используются ... Протокол HTTPS шифрования для безопасного соединения с сервером и защиты пользовательских данных ... Антивирус DrWeb для превентивной защиты пользователей от интернет угроз и вирусов ... Ресурс входит в рейтинги Рамблер Топ 100 (познавательно-развлекательные сайты) и Mail Top 100 (авто мото информация) ...

Тех Стоп Екб RU (РФ) официальный сайт, знакомство с выбором тем, новости, обзоры без регистрации и бесплатно ...

Меню раздела, новости и новые страницы.

Framework CSS Grid, как средство создания макета табличного вида на основе сетки.


© techstop-ekb.ru, 2016++, 2020.