CodeQuest часто стали встречаться макеты не по сетке сделанные или отдельные блоки выходят за сетку, это не косяки а так задумано, интересно про комбинирование
Да, это приемлемо. Сетка же не распространяется на весь макет, по сути мы применяем ее к каждой отдельной секции. Так, где сетка не нужна, мы просто используем свои стили. С еще большим развитием GridCSS, эта проблема, я думаю, исчезнет =)
Привет. Сказать, что у тебя отлично получается - ничего не сказать. Видно глубокое понимание вопроса. Эта тема однозначно достойна продолжения не только в плане сетки, но и в отношении других компонентов. И в этой связи есть вопрос: чтобы не тянуть неиспользуемые стили, можно ли, например, добавить бутстрап в devDependencies (package.json), а затем через @extend своим селекторам/классам добавлять классы бутстрапа? Если какие-либо подобные варианты есть, прошу снять об этом видео. Спасибо.
Спасибо, приятный отзыв! В devDependencies ставят пакеты, которые не должны попадать в продакшен, т.е. от которых наш проект никак не зависит: сборщики, линтеры и т.д. С другой стороны, если мы используем предварительную сборку, то в продакшен в любом случае попадают только наши конечные CSS-файлы, куда bootstrap уже будет импортирован и само его наличие в node_modules в продакшене нам не нужно. Тут не будет особой разницы, как его ставить. Но тут проблема в другом, как только вы импортируете Bootstrap в свой проект, все его классы уже будут в вашем конечном CSS, даже если он установлен как devDependencies. Тип установки не решает нашей проблемы =) А вот оставить только миксины, сделать на их основе свои классы и их уже наследовать можно. Надеюсь, что смог вам помочь!
@@CodeQuestRu , жалко новичку трудно самому под себя создать такой фреймворк!) Но вот я загорелся такой идей, потому что у самого уже маленькая библиотека миксинов. Недавно начал изучать фремворк BULMA , и потихоньку стал переносить классы в миксины. Тут если знать струткуру и логику сайта и использовать правила именования классов, то можно запилить так (я уже пробовал) что количество кода уменьшается не в два-три раза, а чуть ли не в четыре раза . Причем это уменьшение не просто шаблонное сокращение, где непонятно, что под самим миксином, а выражние логики верстки. Так одним миксином можно прибить футер к подвалу, приписывая сразу параметры и wrapper и main,. Можно ОДНИМ МИКСИНОМ сразу задавать адаптивную высоту для фискированного heаder на разных экранах, и тут же автоматичеки добавлять отступы для последующих блоков, и паддинги для меню гамбургера. .. Само создание сложного миксина заставляет тебя увидеть сквозные связи между разными компнентами .Простыми классами такого не добиться.
Спасибо огромное за уроки! Ничего подобного не находила. Вопрос: а как можно изменить высоту .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; } }
контент топ) возникла идея для тебя! : bootstrap mobile first на русском ютубе мало контента по mf, а с бутстрапом mf нету видосов (по крайней мере новых) вот и подумал, что такой контент, который поймут, может сделать чел, который сильно шарит в этом)) надеюсь помог за идею)
Спасибо! Серию по Bootstrap я пока закончил, нужно еще очень много всего рассказать, но может позже еще к нему вернусь. На всякий случай сделаю себе заметку =)
Возможно когда-нибудь позже я вернусь к этой серии и подумаю про добавление компонентов и т.д., но сейчас больший упор хочу сделать в сторону верстки. Давно ничего не выкладывал на эту тему, нужно исправляться
Да, в этом и фишка. Используем его возможности, но не засоряем свой код =) Довольно интересная вещь, которой мало кто пользуется, поэтому решил показать.
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
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 - Подведение итогов
Балдёж. Лучший курс по бутстрапу.
Блин, не могу молчать - автор гений объяснений) Слушаешь других каша- здесь всё по полкам. Большое спасибо.)
Рад, что не зря старался) спасибо за добрые слова =)
Вот это уже интересно. Аж изменил своё отношение к бутстрапу) Продолжай в этом направление.
Спасибо!
Да, об этом почему-то мало кто говорит, решил исправить эту несправедливость =)
Годнота!
Спасибо!
Рад, что пригодилось =)
Очень круто! Большое спасибо!
Контент-огонь!
Спасибо, старался =)
То, что нужно. Продолжай в том же духе
Спасибо!
Что-то сложные темы хуже заходят людям. Даже не знаю, продолжать гнуть свою линию или упрощать =)
Продолжай, это действительно полезная информация. Скоро 5-й бутстрап наберёт популярность и твои советы будут актуальными
Хорошо, постараюсь =)
Очень интересная серия видео, благодарен за такую крутую инфу!
круто блин, давай еще
На какие темы было бы интересно посмотреть видео? Может есть конкретные вопросы =)
CodeQuest часто стали встречаться макеты не по сетке сделанные или отдельные блоки выходят за сетку, это не косяки а так задумано, интересно про комбинирование
Да, это приемлемо. Сетка же не распространяется на весь макет, по сути мы применяем ее к каждой отдельной секции. Так, где сетка не нужна, мы просто используем свои стили. С еще большим развитием GridCSS, эта проблема, я думаю, исчезнет =)
Затащило видео с таким объяснением.
Супер! Приятно слышать =)
Круто!
Рад, что понравилось!
Надеюсь, пригодится в ваших проектах =)
Привет. Сказать, что у тебя отлично получается - ничего не сказать. Видно глубокое понимание вопроса. Эта тема однозначно достойна продолжения не только в плане сетки, но и в отношении других компонентов. И в этой связи есть вопрос: чтобы не тянуть неиспользуемые стили, можно ли, например, добавить бутстрап в devDependencies (package.json), а затем через @extend своим селекторам/классам добавлять классы бутстрапа? Если какие-либо подобные варианты есть, прошу снять об этом видео. Спасибо.
Спасибо, приятный отзыв!
В devDependencies ставят пакеты, которые не должны попадать в продакшен, т.е. от которых наш проект никак не зависит: сборщики, линтеры и т.д. С другой стороны, если мы используем предварительную сборку, то в продакшен в любом случае попадают только наши конечные CSS-файлы, куда bootstrap уже будет импортирован и само его наличие в node_modules в продакшене нам не нужно. Тут не будет особой разницы, как его ставить.
Но тут проблема в другом, как только вы импортируете Bootstrap в свой проект, все его классы уже будут в вашем конечном CSS, даже если он установлен как devDependencies. Тип установки не решает нашей проблемы =)
А вот оставить только миксины, сделать на их основе свои классы и их уже наследовать можно. Надеюсь, что смог вам помочь!
Идея заменить классы миксинами -- перкрасна!
Согласен. Как минимум, знать о такой возможности полезно =)
@@CodeQuestRu , жалко новичку трудно самому под себя создать такой фреймворк!) Но вот я загорелся такой идей, потому что у самого уже маленькая библиотека миксинов. Недавно начал изучать фремворк BULMA , и потихоньку стал переносить классы в миксины. Тут если знать струткуру и логику сайта и использовать правила именования классов, то можно запилить так (я уже пробовал) что количество кода уменьшается не в два-три раза, а чуть ли не в четыре раза . Причем это уменьшение не просто шаблонное сокращение, где непонятно, что под самим миксином, а выражние логики верстки. Так одним миксином можно прибить футер к подвалу, приписывая сразу параметры и wrapper и main,. Можно ОДНИМ МИКСИНОМ сразу задавать адаптивную высоту для фискированного heаder на разных экранах, и тут же автоматичеки добавлять отступы для последующих блоков, и паддинги для меню гамбургера. .. Само создание сложного миксина заставляет тебя увидеть сквозные связи между разными компнентами .Простыми классами такого не добиться.
@@ЯкобФилин такие вещи это очень хороший опыт, практика на максималках =)
Спасибо огромное за уроки! Ничего подобного не находила. Вопрос: а как можно изменить высоту .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;
}
}
контент топ)
возникла идея для тебя! : bootstrap mobile first
на русском ютубе мало контента по mf, а с бутстрапом mf нету видосов (по крайней мере новых)
вот и подумал, что такой контент, который поймут, может сделать чел, который сильно шарит в этом))
надеюсь помог за идею)
Спасибо!
Серию по Bootstrap я пока закончил, нужно еще очень много всего рассказать, но может позже еще к нему вернусь. На всякий случай сделаю себе заметку =)
@@CodeQuestRu благодарю)
Работу с картинками шрифтами таблицами я бы посмотрел
А что конкретно по ним интересно?
CodeQuest адаптивность, если уж двигаться к созданию своего фреймворка
Возможно когда-нибудь позже я вернусь к этой серии и подумаю про добавление компонентов и т.д., но сейчас больший упор хочу сделать в сторону верстки. Давно ничего не выкладывал на эту тему, нужно исправляться
Очень интересно, так и не скажешь, что бутстрап подключен!
Да, в этом и фишка. Используем его возможности, но не засоряем свой код =)
Довольно интересная вещь, которой мало кто пользуется, поэтому решил показать.
а не проще на гридах уже сделать макет, а не городить костыль?
Смотря какой макет и какая задача. И Bootstrap и Grids - это всего-лишь инструмент =)
У меня у одного под этим видео отображается только один лайк?
Это глюк такой или что? =/
Это не глюк))
Мои друзья как минимум смотрели и ставили лайки.
Это первое видео, с которым так происходит =/
Убрал свой лайк) Проверяй, должно быть 0
Нет, все равно один)
Я уверен, что как минимум 10 человек уже ставили
Лайки починились, ну хотя бы так =)