Последний урок из серии "CSS и инструменты разработчика в браузере".

Здесь мы поговорим о компонентном подходе на примере модального окна "Подробная информация" WordPress плагина WP-Recall. Вы увидите: что каждый компонент имеет свои уникальные классы, в зависимости от того где он применяется. Таким образом вы можете тонко настраивать нужное не затрагивая весь компонент и его работу в других местах.

Я покажу как менее чем за 10-ть минут работы можно легко изменить блок "Подробная информация" под свои нужды. Работаем в консоли браузера быстро и переносим результат в наш css-файл.

Урок №4

- Поговорим о компонентах
- Поправим только там, где нужно
- Ничего не поломаем
- Допилим окно "Подробная информация"

Timeline:

1. Вступление 0:15
2. Компонентный подход 0:55
3. Начало изменения окна "Подробная информация" 1:15
4. Подводим итоги серии уроков 12:00

Получилось?
Как вам серия уроков в целом?
Научились и теперь с консолью на "Ты"?
- жду вас в комментариях. Также вы можете предложить тему для следующей серии уроков

В этом уроке у нас будет практика с реальными примерами. И рассмотрим некоторые хитрости в борьбе за свои стилевые правила.

Итак:
Мы уменьшим обложку в личном кабинете который выводится WordPress плагином WP-Recall.
Мы зададим размер h3 в виджете. И сделаем это выборочно - чтобы не задеть другие подзаголовки h3
Мы перебьем inline CSS - рассмотрим пару вариантов.
Мы подкорректируем размер кнопки - и при этом не затронем другие такие же кнопки в других местах.

Вы увидите на примере body-тега как можно использовать его удобные классы, которые меняются в зависимости от условий и страниц - для более тонкой подстройки css правил.

Урок №3

- уменьшим обложку
- h3 размер
- inline css
- правим только нужное

Timeline:

1. Пример 1. Уменьшим высоту обложки 0:29
2. Пример 2. Изменим шрифт h3 - и увидим что порядок загрузки css важен 3:25
3. Пример 3. inline css - body всему голова, а !important - не так и важен 6:44
4. Пример 4. Стили только для одной страницы. body всему голова. Снова! p.s. на правильной WordPress теме 9:09

Плагин Simple Custom CSS

По всем вопросам - жду в комментариях

В этом уроке поговорим о сложностях - когда в WordPress теме разработчик решил использовать id или, ещё хуже, хакает через !important. Как это дело перебить или "перевесить". Ведь каждый сайт или плагин написанный вами требует четкой верстки, а другие ВП темы или плагины так и норовят залезть в него своей вёрсткой и перекосить её.

Разберем специфичность, посмотрим на калькулятор специфичности, чтобы вы смогли в уме оперировать "весом" используемых элементов. В качестве альтернативы я предложу метод "генералов" - может быть это будет вам проще и наглядней.

В данном видео тоже больше теории чем практики. Хотя последняя половина видео будет рассказывать о практике "на бумаге" - это вводная часть. т.к. в последующих 2-х видео мы будем много практиковаться и рассматривать возможные подводные камни.

Урок №2

- специфичность
- калькулятор специфичности
- кто тут генерал?
- примеры на теории

Timeline:
1. Специфичность 0:16
2. Калькулятор специфичности 1.30
3. Кто тут генерал? 2:23
4. div и id в вёрстке 3:43
5. Примеры на теории, курьёзы и подставы. Решим всё 4:19

Калькулятор специфичности - онлайн сервис.

По всем вопросам - жду в комментариях

Часто пользователю в WordPress необходимо чуток подкорректировать стили к плагину под свою тему. т.к. не все темы работают корректно с десятками тысяч плагинов - то и возникает небольшая задача по корректировке стилей. Там margin дикий, там наоборот z-index маленький и меню самого сайта перекрывает что-то... В общем тут про это.

Небольшая серия уроков покажет как работать с консолью браузера (F12 - я так кратко называю инструменты разработчика в браузере)
Мы рассмотрим специфичность CSS (так называемый "вес"), рассмотрим - как порядок загрузки и вес влияют на наши корректировки. Будет несколько примеров. Рассмотрим возможные подводные камни, работу с inline стилями. В общем будет познавательно.

Урок №1

- инспектор браузера
- куда мне вставить эти стили
- каскадность
- порядок загрузки ВАЖЕН

Timeline:

1. О чем это видео и почему неверно править стили ядра 0:17
2. Куда мне вставить код и стили 1:10
3. Как найти мне то, что нужно изменить. Инструменты разработчика в браузере 1:23
4. Рассмотрим панель подробней 2:40
5. Создать правило - легко! 4:36
6. margin & padding 5:55
7. Каскадность, правила и конструкции 7:00
8. Порядок загрузки css-файла важен 9:28

Если у вас возникли вопросы - жду в комментариях.

Давно была идея о подобной группе и вот она появилась.
В данной группе я буду рассказывать вещи по кастомизациям. Вернее даже так сказать - буду давать направление вам - как и куда смотреть при кастомизациях. Начнем мы с простого - CSS. Но он тоже хитрый лис. Не стоит недооценивать всю силу CSS. И возможно вы думаете - "да, я знаю его!". Увы и ах - эта тема гораздо шире и глубже чем многие думают. CSS - это дьявол в мелочах. CSS - это для педантичных (в хорошем смысле) и аккуратных людей. CSS - это модульность и переносимость.

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

Я достаточно давно работаю с вордпресс, его плагинами и занимаюсь разработкой плагинов и дополнений. Так вот я накопил достаточно богатый багаж знаний по ним. А именно - если вы разрабатываете плагин или расширение (дополнение) для WordPress - то вы наверно видели как ВП темы иногда уродуют вывод форм, кнопок и прочих фронтенд элементов вашего продукта. В данной группе я также затрону вопрос: как сделать массовый продукт и как сделать его устойчивым - чтобы его многие ВП темы не поломали и он остался выглядеть именно так как вы задумали.

Будут рассматриваться вопросы - как работать с исходным кодом малознакомого плагина, чтобы разобраться с ним и кастомизировать его. Как найти те места для зацепок и подстроить тонко под себя плагин опираясь лишь на его исходный код. Не у каждого плагина есть хорошая документация для разработчика. А бывают плагины, что активно развиваются и автор просто не успевает содержать документацию в актуальном виде. Самая лучшая документация - исходный код. Я научу вас его читать и понимать.

От вас лишь нужно:
- учитесь гуглить на английском - это просто важно.
- css - понимание базовых принципов и умение искать информацию по нужным вам свойствам и т.д.
- php - синтаксис, владение документацией на уровне: умею найти и прочитать.
- js/jquery - синтаксис и простые вещи
- WordPress - апи и умение работать с документацией

("ого - вот это зарядил" - подумаете вы. Ну а как же - сфера IT - необъятные просторы. И нужно уметь искать информацию на разных площадках. Да и смысл дублировать тут синтаксис и общие правила описанные в доках? Так я сдохну быстрей и толку не будет)

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

Давайте попробуем. Регистрируйтесь на сайте - так вы сможете подписаться на группу и получать уведомления о новых материалах из группы. Тут вам будет доступно комментирование - отвечу на коварные вопросы или подскажу куда погуглить. Ну и возможно тут появится закрытый раздел для персональной помощи в вопросах обучения.

Начнём!