Доступная верстка

2021-12-06 09:10:08 Поговорим еще про препроцессор SCSS

Последние 2 момента, которые хочу показать:

1) Наследование - @extend - возможность передать свойства от одного селектора к другому. Но есть отличный плюс его использования: по сути, мы создаем класс-шаблон, который используется только тогда, когда он необходим. На скрине можно увидеть отличный пример, где:

message-shared и equal-heights - это классы, которые будут наследоваться

а дальше организован их вызов в других классах.

Справа, на скрине, то, что будет в css.

Обратите внимание, что класс equal-heights есть в scss, но в css он не попадает, т.к.нигде не используется)

2) Вложенность файлов - когда есть общий файл scss , в котором организовываем подключение остальных файлов (а на выходе имеем 1 файл css), что позволяет улучшить возможность ориентироваться в коде (скрин в комментах) Открыть/Комментировать

2021-12-03 09:33:00 Теперь сделаем сетку для сайта!
С учетом наших знаний единиц измерения ( читать тут https://t.me/creation_website/59 и тут https://t.me/creation_website/79 ) достаточно посмотреть на скрин и увидеть там размер шрифта, заданный для тега html и один медиазапрос (переход на мобилу) с изменением этого же значения (там есть формула как высчитать для разных мобильных экранов размер шрифта), которые несут в себе нагрузку полностью адаптируемого макета, больше ничего не надо. А все значения внутри макета будем верстать на rem/em. Вот и вся магия.

Если будут вопросы, идем в комментарии

P.s. про медиазапрос для принтера помню

P.p.s. В комментах можно увидеть запись экрана того же макета с изменением размера браузера, что и тут https://t.me/creation_website/79 Открыть/Комментировать

2021-12-03 09:31:11 #6 vh/vw и сетка для сайта с одним медаизапросом

Единицы измерения vh/vw - очень мощные и гибкие характеристики. В чем их особенность?

По сути, эти представляют из себя процентные величины от текущей области просмотра браузера.

Т.е. vw (viewport width) - это процент от той ширины браузера, который мы видим на экране монитора. Не важно какой монитор : 2k или с разрешением на 1366px - это всегда процент от того, что мы видим, и отправная точка - это viewport браузера.

vh (viewport height) - то же самое, только по высоте.

Дальше просто математика: 10vw - это 10% от ширины области просмотра в браузере. С высотой такая же тема.

#csstricks Открыть/Комментировать

2021-12-01 09:26:11 Небольшие и удобные моменты:
1) при работе с textarea в формах иногда есть необходимость поддержки функционала, чтобы в самом этом элементе нельзя было поменять размер (на скрине показано). П.ч.по умолчанию в нижнем правом углу есть значок, при клике на который и удержании левой клавиши мыши можно менять размеры элемента.
Для этого достаточно задать textarea в стилях css

resize: none;

2) В scss есть удобный функционал вложенности элементов. Достаточно родительский отделить от потомка через тире / нижнее подчеркивание (для удобства), а последующие элементы использовать в скобках без повторения имени (в комментариях скрины для наглядности)

#short Открыть/Комментировать

2021-11-29 07:29:16 #5 screen em/rem

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

В чем суть подхода, который я хочу показать? Сама сетка сделана на em , начальный размер шрифта делаю 10px (для удобства), а все размеры верстаю на rem .

Что это дает? По сути, получается следующее: до мобильного переключения никаких перескакиваний контента нет, только масштаб меняется, на мобильном экране происходит перестройка экрана, а дальше - снова уменьшение масштаба.

Т.к.тема требует немного большего разъяснения, смотрите видео тут



Код из видео - https://github.com/SAlexVL/web-site-work Открыть/Комментировать

2021-11-26 16:28:02 Как хорошо знать свои рабочие инструменты!

Когда начал работать с большим количеством кода, полотно в десятки (10) тысяч строк, понял, что нужно использовать клавиатуру чаще для выполнения разных операций. Горячие клавиши - это хорошо и быстро.

Например, в редакторе кода VSCode при нажатии на Shift и клик левой клавишей мыши можно свернуть весь код по фигурным скобкам. Удобно!

Есть много сокращений, под себя надо подбирать. Мораль - используйте горячие клавиши. Открыть/Комментировать

2021-11-25 15:25:38 У препроцессоров есть возможность использовать миксины (хотя и не только у них ). Я использую в работе разные, но, есть самые любимые и больше всего используемые. Они помогают сократить немного код в процессе написания.

#scss Открыть/Комментировать

2021-11-25 11:10:15 Возможности препроцессоров иногда реально упрощают работу, особенно когда речь идет о масштабировании проекта. Чаще всего я использую переменные в SCSS для работы с цветом (иногда с размерами блока, шрифта, отдельных элементов).

Например, задав цвет переменной и используя ее в нескольких участках кода можно изменить цвет этих элементов изменив лишь значение одной переменной.

#scss Открыть/Комментировать

2021-11-24 16:20:33 white-space

Совсем недавно понабилось сделать так, чтобы на десктопе текст шел строго в одну строчку, а на мобильном экране имел нормальное отображение в несколько строк. Что для этого пришлось использовать ? Правильно, скрин вышел информативный!)

p.s. У white-space есть и другие значения: pre, pre-wrap, pre-line и break-spaces. В основном там отступ абзаца присутствует, я не встречал его использование, но можно поискать. Открыть/Комментировать

2021-11-23 11:43:50 Делаем варианты input="radio" на чистом css

Делаем опрос через CSS:
1) сначала структуру html input / label (скрин 1)

2) скрываем input="radio" (выше на несколько постов можно увидеть как именно )

3) задаем input псевдоэлемент и стилизуем его для выбора варианта (скрин 2)

4) стилизуем label (скрин 3) [стили зачеркнуты п.ч.в дальнейшем их немного переопределил]

5) связываем input c псевдоэлементом с label - показать, что выбран вариант (скрин4 и скрин5)



Скрины в комментариях Открыть/Комментировать