Резюмируя предыдущую статью

Я действительно думаю, что вы должны прочитать предыдущую статью (хотя бы сделать быстрый просмотр), чтобы понять, что происходит.

В предыдущей статье была представлена ​​методология CSS Molecules , заявив, что это идеальный баланс между двумя антагонистическими способами — обычно представленными CSS Zen Garden и Tailwind CSS .

Я понял, что фрагментов кода недостаточно, чтобы четко представить методологию и ее преимущества по сравнению с другими.

Поэтому я решил пойти по пути реального кода, создав реплику воображаемой статьи на Medium.

Затем я предложил другим разработчикам сделать то же самое. Я имел в виду две цели

1. понимание друг друга
2. учиться друг у друга

Список претендентов

1. Джоана Борхес Лейт (я) — защита принципов молекулярной науки CSS
2. Джейсон Найт — несет знамя CSS Zen Garden Temple (или представляет рыцарей-тамплиеров)

Вне конкурса

В случае, если вы хотите показать свою копию, сделанную на JavaScript, она будет принята как внеконкурсная работа: на самом деле, не «оспаривая» конкурс, а просто поразив респектабельную публику своими потрясающими навыками.

*Воображаемый* артикль — ядро

Чтобы было понятно, что воображаемая статья не является статьей Medium, мы будем писать «Tedium» вместо «Medium». И я изменил логотип и фавикон.

Заголовок и подзаголовок такой статьи:

Затем идет ее ИЗОБРАЖЕНИЕ (показано в начале текущей статьи).

За этой картинкой следует все, что написано ниже (ПОКА НЕ НАЙДЕТЕ ТРЕХТОЧЕЧНЫЙ РАЗДЕЛИТЕЛЬ):

«Роскошный стиль» — спортивный седан Maxima GLE 1996 года выпуска.

Здесь вы найдете видео с субтитрами на португальском языке .

Реальная история: очень опытный арт-директор создал это УДИВИТЕЛЬНОЕ видео, превратив все дефекты своего старого автомобиля в преимущества для покупателя, прямо на ваших глазах! Видео имело такой успех во всем мире, что Nissan решил выкупить автомобиль.

Моя бабушка сказала мне, что эта сделка нанесла такой ущерб Nissan, что в результате ее президент был уволен, а правительство Японии арестовало его по обвинению в коррупции .

Более того, моя бабушка еще раз показала свою глубокую мудрость:

«Очень талантлив и водит плохую машину? Никто не зарабатывает на рекламе, я всегда вам это говорил!»

История любви геккона

Я ничего не могу сказать об истории этого видео, кроме того, что Уильям Шекспир никогда не умирал. Очевидно, он зарабатывает на жизнь как сценарист для рекламной индустрии.

Моя бабушка тоже ничего не может сказать. Она все еще плачет. Как я.

ДИАНА РОСС В последний раз я видела его на Маппет Шоу

Моя бабушка твердо верит, что это видео — лучшее сочетание развлечения, мелодии, веселья, интерпретации (человек и куклы) и мудрости/любви/надежды (обратите внимание на слова).

Я могу засвидетельствовать, что она действительно чувствует, от всего сердца, что это лучшее видео.

Когда она трезвая.

Когда она пьет, она все время смотрит это .

Окончательно

Мы с бабушкой надеемся, что вам понравилось!

*Воображаемая* статья — автор, читатели и их аватары

*Воображаемая* статья — ответы

Эксперт Waldorf CSS автору: Я хотел бы купить этот автомобиль .

Gonzo HTML Expert — Waldorf CSS Expert: Автомобиль не выглядит в хорошем состоянии .

Автор Waldorf CSS Expert: Почему? Вы коллекционер ?

Эксперт по JS для животных автору: НЕТ! ОН ХОЧЕТ ПОКАЧАТЬ ВАШУ БАБУШКУ ХАХАХАХАХАХА !

*Воображаемая* статья — предлагаемые статьи (и их иконки)

Когда позволяет ширина экрана: 3 статьи справа и 3 статьи внизу. Если нет, то все 6 статей внизу.

Список статей (и их авторов):

1. 1500 фреймворков JavaScript, которые вы должны использовать сегодня от Animal JS Expert
2. Почему отказ от использования тегов сделает ваш HTML-код намного чище
3. Как выучить CSS ВСЕГО за 5 часов и быть уволенным ВСЕГО за 5 минут от Waldorf CSS Expert
4. Почему Линус Торвальдс выбрал JavaScript для написания ядра Linux: « Rust не поставляется с Garbage Collector :( » от эксперта по Animal JS
5. Тонкие различия между Markdown и Upside Down Markup от Gonzo HTML Expert
6. CSS НЕ является императивным языком, так что… F#$%K YOU!!! от Waldorf CSS Expert

На веб-странице статьи Medium есть несколько меню/подвижных частей/плавающих блоков.

Все эти части (ПЕРВОЙ СТЕПЕНИ) должны присутствовать в реплике и работать. Но ответвления НЕ являются частью реплики.

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

Веб-страница недоступна для редактирования. Пользователь читает его, не пишет ответы.

JavaScript допустим для движущихся частей.

Ресурсы (шрифты и изображения)

Вот простая веб-страница , которая рассказывает о шрифтах каждой части реплики: цвет и семейство шрифтов/жирность/стиль. Я выбрал только (общедоступные) шрифты Google.

Эта веб-страница содержит все необходимые значки и изображения (некоторые в формате SVG).

Авалиация

Все реплики будут проверены с помощью валидатора W3C , PageSpeed ​​Insights и Lighthouse .

Реплики

В идеале каждый претендент должен написать статью с описанием техник/методов, которые он/она использовал, плюс ссылку на работающую реплику.

Я буду размещать все ссылки здесь, когда они будут у меня.