Периодическая таблица австралийских стартапов, созданных с помощью CSS Grid ??

1656660496 periodicheskaya tablicza avstralijskih startapov sozdannyh s pomoshhyu css grid

от Shooting Unicorns

1s8rvVX57jWnnTN0N02H3y4T-BpDLKnoJldh
Фото Адама Морса на Unsplash

В этом месяце два разработчика из Shooting Unicorns начали свое путешествие, чтобы изучить CSS Grid, построив периодическую таблицу. Как маленькая дань работе в компании в течение 5 лет и недавнему прощанию, чтобы присоединиться к жизни стартапа, derps считал, что обмен корпоративными модными словами будет идеальным проектом.

  1. Положите его на блокчейн
  2. Прорывная технология
  3. Мы гибкая компания
  4. Передовая технология
  5. Это в облаке
  6. Наш дизайн ориентирован на человека
  7. Цифровая трансформация
  8. Лидерство мнения
  9. Большие данные и аналитика
  10. 360-градусный обзор
  11. Дизайны на заказ
  12. Включено IoT
  13. Создание синергии
  14. Разбивание силосов
  15. Автоматизация в реальном времени
  16. …?

Но они не знали, что в периодической таблице действительно всего 118 элементов. Вскоре им стало ясно, что придумать столько корпоративных модных слов будет труднее, чем выучить сам CSS Grid. Несомненно, корпоративный мир усеян тысячами и тысячами модных слов, но, к сожалению, для дуэта вспомнить какие-либо более 7 плюс-минус 2 пункта было бы очень сложной задачей.

xSQ7fXrbp8pQeuhnKwuYACkhOZzvEgtRD7Nk

Теперь у них не остается другого выбора, кроме как делать то, что они умеют лучше… поворот в последнюю минуту! ?

И таким образом… В то же время была создана Периодическая таблица австралийских стартапов! Или, как они любят это называть, сетка полностью выборочного запуска (CSS Grid) (◔_◔)

Идея

Если серьезно, то нас вдохновило Deck, презентационное бревно, разработанное без использования какого-либо Javascript, что действительно вдохновило нас испытать его.

yntoXwQCEDWkGtV6Qd7kDu9SaaXBeXFia31C

Это, пожалуй, мощная система макета, доступная в CSS, и позволила нам обрабатывать как столбцы, так и строки, делая ее многомерной. В тот день мы были очень взволнованы и очень хотели создать нашу собственную колоду Shooting Unicorns Deck, но почему-то вместо этого решили создать периодическую таблицу ??.

Мы предполагаем, что одна из причин состоит в том, что, хотя бревно выглядит очень круто, его хороший вид ушел бы много времени на изучение самой сетки CSS. Вы можете просмотреть исходный код бревна здесь.

Поэтому за последние две недели…

Мы придерживались того, что считали секретным рецептом, и выяснили макет сетки с помощью…

XYH4DLH45utbfKvHEG1skHgOZKoizbWMnuwS

Чтобы определить, сколько коробок должно состоять из сетки, нам нужно было думать о строках и столбцах, учитывая пробелы.

Периодическая таблица состоит из 118 частей. Итак, если наша математика не подвела нас, чтобы наша сетка выглядела так, как одна, понадобится 18 столбцов и 9 строк, что делает ее в общей сложности 162 коробками.

Наша первая итерация периодической таблицы выглядела так:

.firstElement {   grid-row: 1 / span 1;   grid-column: 1 / span 1;}
.secondElement {   grid-row: 2 / span 1;   grid-column: 1 / span 1;}
...nthElement{}

Как вы можете себе представить, через некоторое время мы в конце концов сделали 118 классов, чтобы просто показать периодическую таблицу… хммм? Конечно, есть более чистый и более удобный способ сделать это, не правда ли? Поэтому мы решили не брать дело в свои руки, а последовали здесь примеру.

Мы обнаружили, что сетка CSS использует волшебные алгоритмы компоновки, которые могут определять поток сетки. Если мы не укажем направление потока (с помощью grid-auto-flow), то сначала он заполнит все столбцы в строке, а затем перейдет к следующей.

Второй тур. Мы удалили исходный код CSS и начали снова. На этот раз мы были умнее. Вы можете просмотреть остальную часть этой статьи по нашему исходному коду здесь.

4hUYozPfP7dQS-VF0Bmx1yfYBtCwjZYpJCcq

Во-первых, давайте посмотрим на первую строчку периодической таблицы. Первый элемент автоматически размещается в строке 1, в столбце 1. По умолчанию второй элемент будет размещен в строке 1, в столбце 2, но это не то, чего мы хотим. Следуя диаграмме, чтобы разместить его в 18-м столбце, мы можем сделать это так:

.itemInEighteenthColumn {   grid-column-start: 18;}

Итак, чтобы получить следующий элемент во втором столбце, мы просто приказываем CSS разместить его в строке 2, столбце 1, верно?

.thirdElement {   grid-column-start: 1;   grid-row-start: 2;}

Это один из способов, но в сетке CSS определение начала сетки-столбца для дочернего элемента автоматически создаст такое количество столбцов. Поэтому мы сказали, что второй элемент должен начинаться с 18 столбца, поэтому наша сетка будет содержать 18 столбцов. Любой элемент после этого переходит к следующей строке.

NLwWeR-UQXFH2uB4eBgpep7RxaVVZxIc9UXb

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

.secondRowThirdElement {   grid-column-start: 13;}

Это делает все столбцы перед строкой 13 пустыми, а остальные элементы примут свой обычный поток, начиная с 13 до 18. То же касается следующей строки после этого:

.secondRowThirdElement, .thirdRowThirdElement {   grid-column-start: 13;}

Единственным особым случаем, который нам пришлось учесть, были последние две строчки внизу, требовавшие определенных свойств сетки. Причина этого в том, что эти элементы не были последними несколькими элементами в нашем HTML, поэтому они в конечном итоге были бы неуместны в строках выше. Чтобы получить эти элементы в строках 8 и 9, нам нужно явно указать свойство grid-row-start для этих отдельных элементов (нужно добавить эти классы к каждому отдельному элементу в HTML):

.row-8 {   grid-row-start: 8;}
.row-9 {   grid-row-start: 9;}
07-ihShFAeTkGeRHOkrfV9Ceeoxt0KvRysii
Результат после установки .row-8 и .row-9

И благодаря этой магии CSS Grid мы получили нашу первую периодическую таблицу.

RxBFT9R2dHly4c37Svl8cNy4R0SYda5HSl2H

Сценарии

Чтобы вручную скопировать и вставить данные запуска в файл HTML, потребовалось бы слишком много усилий. Чтобы выполнить работу, мы создали сценарии Python для преобразования CSV в JSON, а затем из JSON в HTML. Вот фрагмент того, как мы сгенерировали HTML (не самый лучший, но он все равно сработал):

import json
with open('./startups.json') as startup_data:with open('./startups.html', 'w+') as f:
d = json.load(startup_data)   for startup in d:   name = startup['name']   city = startup['city']   founded = startup['founded']   description = startup['description']      htmlString= "\   <div class=\"startup-detail-container %s\"> \n\   <div class=\"startup-em\"></div>\n\   <div class=\"name\">%s</div>\n\   <div class=\"description\">%s</div>\n\   </div>\n\n"%(city.lower(), name, description)   f.write(htmlString.encode('utf-8'))

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

Остальные головоломки

С этого момента остальные заключались в нажатии пикселей и игре с цветами. Сначала мы выбрали цветовую схему Shooting Unicorns, но какой бы красочной она ни выглядела, тема казалась несколько «нетематической».

r7PQ0SXP5U9hJVy3dEsG3lc5y7DLHc1iQGrP

Через много дней… мы наконец остановились не на чем другом, как на цветах нашего терминала… потому что… разработчики.

Qyc7Jp5DotCQPayiNIAxX-aJnEEFxEW8bhOQ
Живая версия здесь

Мы все еще не знакомы с CSS, но надеемся, что этот проект по крайней мере вдохновит или поможет другим сделать то же самое. Если вы еще не видели наш код, вы можете проверить наше репо здесь. Мы также хотели бы получить отзывы о том, как мы можем улучшить текущую кодовую базу. Пожалуйста, не стесняйтесь делиться своими мыслями ниже или даже посылать запрос на получение!

Что дальше? ?

Ежемесячно Shooting Unicorns будет отправлять восторженный проект при изучении другой технологии. В январе это был проект React под названием Hustle Club, платформа, помогающая людям найти идеальный ускоритель в прекрасной Австралии.

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

Оставайтесь с нами и до следующего раза, счастливого взлома!

Количество поворотов: 100% ✌️

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *