CodeQuest часто стали встречаться макеты не по сетке сделанные или отдельные блоки выходят за сетку, это не косяки а так задумано, интересно про комбинирование
Да, это приемлемо. Сетка же не распространяется на весь макет, по сути мы применяем ее к каждой отдельной секции. Так, где сетка не нужна, мы просто используем свои стили. С еще большим развитием GridCSS, эта проблема, я думаю, исчезнет =)
@@CodeQuestRu , жалко новичку трудно самому под себя создать такой фреймворк!) Но вот я загорелся такой идей, потому что у самого уже маленькая библиотека миксинов. Недавно начал изучать фремворк BULMA , и потихоньку стал переносить классы в миксины. Тут если знать струткуру и логику сайта и использовать правила именования классов, то можно запилить так (я уже пробовал) что количество кода уменьшается не в два-три раза, а чуть ли не в четыре раза . Причем это уменьшение не просто шаблонное сокращение, где непонятно, что под самим миксином, а выражние логики верстки. Так одним миксином можно прибить футер к подвалу, приписывая сразу параметры и wrapper и main,. Можно ОДНИМ МИКСИНОМ сразу задавать адаптивную высоту для фискированного heаder на разных экранах, и тут же автоматичеки добавлять отступы для последующих блоков, и паддинги для меню гамбургера. .. Само создание сложного миксина заставляет тебя увидеть сквозные связи между разными компнентами .Простыми классами такого не добиться.
Привет. Сказать, что у тебя отлично получается - ничего не сказать. Видно глубокое понимание вопроса. Эта тема однозначно достойна продолжения не только в плане сетки, но и в отношении других компонентов. И в этой связи есть вопрос: чтобы не тянуть неиспользуемые стили, можно ли, например, добавить бутстрап в devDependencies (package.json), а затем через @extend своим селекторам/классам добавлять классы бутстрапа? Если какие-либо подобные варианты есть, прошу снять об этом видео. Спасибо.
Спасибо, приятный отзыв! В devDependencies ставят пакеты, которые не должны попадать в продакшен, т.е. от которых наш проект никак не зависит: сборщики, линтеры и т.д. С другой стороны, если мы используем предварительную сборку, то в продакшен в любом случае попадают только наши конечные CSS-файлы, куда bootstrap уже будет импортирован и само его наличие в node_modules в продакшене нам не нужно. Тут не будет особой разницы, как его ставить. Но тут проблема в другом, как только вы импортируете Bootstrap в свой проект, все его классы уже будут в вашем конечном CSS, даже если он установлен как devDependencies. Тип установки не решает нашей проблемы =) А вот оставить только миксины, сделать на их основе свои классы и их уже наследовать можно. Надеюсь, что смог вам помочь!
контент топ) возникла идея для тебя! : bootstrap mobile first на русском ютубе мало контента по mf, а с бутстрапом mf нету видосов (по крайней мере новых) вот и подумал, что такой контент, который поймут, может сделать чел, который сильно шарит в этом)) надеюсь помог за идею)
Спасибо! Серию по Bootstrap я пока закончил, нужно еще очень много всего рассказать, но может позже еще к нему вернусь. На всякий случай сделаю себе заметку =)
Спасибо огромное за уроки! Ничего подобного не находила. Вопрос: а как можно изменить высоту .gy-3? И еще: у .container для экранов больше sm, нужно изменить padding-left и padding-right. Как это сделать?
Спасибо! Все что делает класс `.gy-3`, это определяет переменную `--bs-gutter-y: 1rem;`, которая затем используется на всех колонках через `margin-top`. Вы можете попробовать другие классы от `gy-1` до `gy-5`, либо определить эту переменную в родительской строке с нужным значением. Поля у контейнера можно поменять также через переменные `--bs-gutter-x`. Просто измените его в нужной контрольной точке =)
@@CodeQuestRu Мне подходит ближе всего gy-3, А как ее нужно переопределить? Я работаю с Sass. Так же неправильно будет ее определять в scss: . g-3, .gy-3 { --bs-gutter-y: 1.25rem; }
@@CodeQuestRu Понятно. Еще хочу уточнить по горизонтальному отступу у .container-fluid. Мне для мобильных нужен padding слева и справа 15px, а дальше - 20px. Я использовала переопределение: $grid-gutter-width: 1.875rem; $spacer: 1rem; $spacers: ( 0: 0, 1: $spacer * 0.25, 2: $spacer * 0.5, 3: $spacer, 4: $spacer * 1.5, 5: $spacer * 2.5, ); Т.е. изменила значение переменных: $grid-gutter-width: 1.875rem и 5: $spacer * 2.5, Но почему-то стало так, что на этих больших разрешениях у .container-fluid padding-left и padding-right стали по 40px вместо 20px. У .col и .row по 15px (-15px) - все как надо. Почему так?
Как-то слишком много изменений. Я бы просто поменял переменную, например так: .container-fluid { --bs-gutter-x: 15px; @include media-breakpoint-up(sm) { --bs-gutter-x: 20px; } }
Возможно когда-нибудь позже я вернусь к этой серии и подумаю про добавление компонентов и т.д., но сейчас больший упор хочу сделать в сторону верстки. Давно ничего не выкладывал на эту тему, нужно исправляться
Да, в этом и фишка. Используем его возможности, но не засоряем свой код =) Довольно интересная вещь, которой мало кто пользуется, поэтому решил показать.
0:00 - Вступление
0:39 - Недостатки сетки на классах
1:20 - Миксины
1:50 - Убираем генерацию классов
3:18 - Миксин контейнера
4:17 - Миксины для рядов сетки
4:44 - Миксины для колонок сетки
7:09 - Промо блоки
7:38 - Секция клиентов
8:05 - Секция цен
8:27 - Секция команды
8:50 - Подвал сайта
9:35 - Адаптивня версия сайта
10:26 - Адаптив шапки сайта
11:23 - Адаптив промо блоков
11:44 - Адаптив секции клиентов
12:31 - Адаптив блока цен
12:45 - Адаптив секции команды
13:12 - Адаптив подвала сайта
14:09 - Вертикальный отступ между элементами
14:41 - Зависимость контейнера от контрольных точек
15:02 - Пишем свой миксин для контейнера сетки
17:10 - Промежуточные итоги
17:28 - Группировка медиа-выражений
18:40 - Подведение итогов
ну красава !
не верится, что есть такие знатоки своего дела.
Блин, не могу молчать - автор гений объяснений) Слушаешь других каша- здесь всё по полкам. Большое спасибо.)
Рад, что не зря старался) спасибо за добрые слова =)
Балдёж. Лучший курс по бутстрапу.
Годнота!
Спасибо!
Рад, что пригодилось =)
Вот это уже интересно. Аж изменил своё отношение к бутстрапу) Продолжай в этом направление.
Спасибо!
Да, об этом почему-то мало кто говорит, решил исправить эту несправедливость =)
Очень круто! Большое спасибо!
Очень интересная серия видео, благодарен за такую крутую инфу!
Контент-огонь!
Спасибо, старался =)
круто блин, давай еще
На какие темы было бы интересно посмотреть видео? Может есть конкретные вопросы =)
CodeQuest часто стали встречаться макеты не по сетке сделанные или отдельные блоки выходят за сетку, это не косяки а так задумано, интересно про комбинирование
Да, это приемлемо. Сетка же не распространяется на весь макет, по сути мы применяем ее к каждой отдельной секции. Так, где сетка не нужна, мы просто используем свои стили. С еще большим развитием GridCSS, эта проблема, я думаю, исчезнет =)
То, что нужно. Продолжай в том же духе
Спасибо!
Что-то сложные темы хуже заходят людям. Даже не знаю, продолжать гнуть свою линию или упрощать =)
Продолжай, это действительно полезная информация. Скоро 5-й бутстрап наберёт популярность и твои советы будут актуальными
Хорошо, постараюсь =)
Затащило видео с таким объяснением.
Супер! Приятно слышать =)
Круто!
Рад, что понравилось!
Надеюсь, пригодится в ваших проектах =)
Идея заменить классы миксинами -- перкрасна!
Согласен. Как минимум, знать о такой возможности полезно =)
@@CodeQuestRu , жалко новичку трудно самому под себя создать такой фреймворк!) Но вот я загорелся такой идей, потому что у самого уже маленькая библиотека миксинов. Недавно начал изучать фремворк BULMA , и потихоньку стал переносить классы в миксины. Тут если знать струткуру и логику сайта и использовать правила именования классов, то можно запилить так (я уже пробовал) что количество кода уменьшается не в два-три раза, а чуть ли не в четыре раза . Причем это уменьшение не просто шаблонное сокращение, где непонятно, что под самим миксином, а выражние логики верстки. Так одним миксином можно прибить футер к подвалу, приписывая сразу параметры и wrapper и main,. Можно ОДНИМ МИКСИНОМ сразу задавать адаптивную высоту для фискированного heаder на разных экранах, и тут же автоматичеки добавлять отступы для последующих блоков, и паддинги для меню гамбургера. .. Само создание сложного миксина заставляет тебя увидеть сквозные связи между разными компнентами .Простыми классами такого не добиться.
@@ЯкобФилин такие вещи это очень хороший опыт, практика на максималках =)
Привет. Сказать, что у тебя отлично получается - ничего не сказать. Видно глубокое понимание вопроса. Эта тема однозначно достойна продолжения не только в плане сетки, но и в отношении других компонентов. И в этой связи есть вопрос: чтобы не тянуть неиспользуемые стили, можно ли, например, добавить бутстрап в devDependencies (package.json), а затем через @extend своим селекторам/классам добавлять классы бутстрапа? Если какие-либо подобные варианты есть, прошу снять об этом видео. Спасибо.
Спасибо, приятный отзыв!
В devDependencies ставят пакеты, которые не должны попадать в продакшен, т.е. от которых наш проект никак не зависит: сборщики, линтеры и т.д. С другой стороны, если мы используем предварительную сборку, то в продакшен в любом случае попадают только наши конечные CSS-файлы, куда bootstrap уже будет импортирован и само его наличие в node_modules в продакшене нам не нужно. Тут не будет особой разницы, как его ставить.
Но тут проблема в другом, как только вы импортируете Bootstrap в свой проект, все его классы уже будут в вашем конечном CSS, даже если он установлен как devDependencies. Тип установки не решает нашей проблемы =)
А вот оставить только миксины, сделать на их основе свои классы и их уже наследовать можно. Надеюсь, что смог вам помочь!
контент топ)
возникла идея для тебя! : bootstrap mobile first
на русском ютубе мало контента по mf, а с бутстрапом mf нету видосов (по крайней мере новых)
вот и подумал, что такой контент, который поймут, может сделать чел, который сильно шарит в этом))
надеюсь помог за идею)
Спасибо!
Серию по Bootstrap я пока закончил, нужно еще очень много всего рассказать, но может позже еще к нему вернусь. На всякий случай сделаю себе заметку =)
@@CodeQuestRu благодарю)
Спасибо огромное за уроки! Ничего подобного не находила. Вопрос: а как можно изменить высоту .gy-3? И еще: у .container для экранов больше sm, нужно изменить padding-left и padding-right. Как это сделать?
Спасибо!
Все что делает класс `.gy-3`, это определяет переменную `--bs-gutter-y: 1rem;`, которая затем используется на всех колонках через `margin-top`. Вы можете попробовать другие классы от `gy-1` до `gy-5`, либо определить эту переменную в родительской строке с нужным значением.
Поля у контейнера можно поменять также через переменные `--bs-gutter-x`. Просто измените его в нужной контрольной точке =)
@@CodeQuestRu Мне подходит ближе всего gy-3, А как ее нужно переопределить? Я работаю с Sass. Так же неправильно будет ее определять в scss: .
g-3,
.gy-3 {
--bs-gutter-y: 1.25rem;
}
Если это работает, то можно и так. Или создать свой класс и использовать его =)
@@CodeQuestRu Понятно. Еще хочу уточнить по горизонтальному отступу у .container-fluid. Мне для мобильных нужен padding слева и справа 15px, а дальше - 20px.
Я использовала переопределение:
$grid-gutter-width: 1.875rem;
$spacer: 1rem;
$spacers: (
0: 0,
1: $spacer * 0.25,
2: $spacer * 0.5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 2.5,
);
Т.е. изменила значение переменных:
$grid-gutter-width: 1.875rem и 5: $spacer * 2.5,
Но почему-то стало так, что на этих больших разрешениях у .container-fluid padding-left и padding-right стали по 40px вместо 20px. У .col и .row по 15px (-15px) - все как надо. Почему так?
Как-то слишком много изменений. Я бы просто поменял переменную, например так:
.container-fluid {
--bs-gutter-x: 15px;
@include media-breakpoint-up(sm) {
--bs-gutter-x: 20px;
}
}
Работу с картинками шрифтами таблицами я бы посмотрел
А что конкретно по ним интересно?
CodeQuest адаптивность, если уж двигаться к созданию своего фреймворка
Возможно когда-нибудь позже я вернусь к этой серии и подумаю про добавление компонентов и т.д., но сейчас больший упор хочу сделать в сторону верстки. Давно ничего не выкладывал на эту тему, нужно исправляться
Очень интересно, так и не скажешь, что бутстрап подключен!
Да, в этом и фишка. Используем его возможности, но не засоряем свой код =)
Довольно интересная вещь, которой мало кто пользуется, поэтому решил показать.
а не проще на гридах уже сделать макет, а не городить костыль?
Смотря какой макет и какая задача. И Bootstrap и Grids - это всего-лишь инструмент =)
У меня у одного под этим видео отображается только один лайк?
Это глюк такой или что? =/
Это не глюк))
Мои друзья как минимум смотрели и ставили лайки.
Это первое видео, с которым так происходит =/
Убрал свой лайк) Проверяй, должно быть 0
Нет, все равно один)
Я уверен, что как минимум 10 человек уже ставили
Лайки починились, ну хотя бы так =)