vedernickov.ru

свободное место

Дорабатываем свою адаптивную тему оформления сайта, продолжение

Предыдущая запись ( смотрите здесь ).

Немного подправил шаблон предыдущей заготовки сайта. Добавил немного функций, проверил на адаптивность.

В тему оформления внёс адаптивное меню, поменял шапку сайта. Над виджетом календаря надо ещё поработать, оформление комментариев так же нуждается в доработке. Если у вас не будет что-то работать, то напишите мне в комментариях.

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

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

Делается это в файле style.css, находим:

Для больших экранов первое, для маленьких второе изображение.

grid-template-areas:
"topnav topnav topnav" /*-- меняем topnav и header --*/
"header header header"
"nav article aside"
"sBottom sBottom sBottom"
"footer footer footer";

Поменять шапку и навигацию местами:

grid-template-areas:
"header header header"
"topnav topnav topnav"
"nav article aside"
"sBottom sBottom sBottom"
"footer footer footer";

Это очень легко, согласитесь.

Для мобильных ещё проще:

grid-template-areas:
"topnav"/*-- меняем в любом порядке --*/
"header"
"nav"
"article"
"aside"
"sBottom"
"footer";

В любое место для вывода, блоки отобразятся сверху вниз:

grid-template-areas:
"article"
"topnav"
"header"
"nav"
"aside"
"sBottom"
"footer";

Поменять отображение сайдбаров:

body {
display: grid;
grid-template-areas:
"topnav topnav topnav"
"header header header"
"nav article aside"/*-- меняем article и nav --*/
"sBottom sBottom sBottom"
"footer footer footer";

grid-template-rows: .1fr .1fr 1fr .1fr .1fr;
grid-template-columns: minmax(280px, .5fr) minmax(280px, 1fr) minmax(280px, .5fr);
grid-row-gap: 1px; 
grid-column-gap: 1px;
 height: 100vh;
 margin: 0; 
background: #cccccc;
 }

Меняем местами не только блок, но и ширину блока:

body {
display: grid;
grid-template-areas:
"topnav topnav topnav"
"header header header"
"article nav aside"
"sBottom sBottom sBottom"
"footer footer footer";

grid-template-rows: .1fr .1fr 1fr .1fr .1fr;
grid-template-columns: minmax(280px, 1fr) minmax(280px, .5fr) minmax(280px, .5fr);
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
background: #cccccc;
}

Надеюсь понятно, повторюсь можете спросить в комментариях, отвечу.

Либо почитайте про сетку Grid.

Наберите в поиске Яндекса слово Grid.
Вот активная ссылка понятного описания работы с гридами:

https://css-live.ru/articles/vyorstka-realnyx-proektov-na-gridax-css-grid-layout-uzhe-sejchas.html

Это для примера, не хочу рекламировать чужие сайты, перепечатывать их не вижу смысла.

Раньше всё это очень сложно было проделать, в процентах под все экраны.
Теперь есть отличное решение — «гриды» и новые величины fr и vh.

Пользуйтесь, если есть предложения по исправлению, буду рад.

Ссылка для скачивания архива с темой оформления: скачать архив.zip

 

 

Автор: admin

Метки: , , , , , , , ,

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.