Luna CSS — компонент временной шкалы

Предыстория

Недавно мне пришлось работать над проектом, в котором было решено использовать scss, поскольку он уже встроен в Angular. Я посмотрел следующее руководство SASS Tutorial (Build Your Own CSS Library). На основе этого урока я решил создать библиотеку для быстрого оформления моих личных проектов. Это то, что я всегда хотел сделать, но так и не смог!

Luna

Luna CSS Простой css фреймворк, который может (однажды) иметь компоненты css, которые вы ищете.

Установка

npm install luna-css
Для быстрого использования перейдите по ссылке luna-css/css/index.css для всех скомпилированных css в папке node modules вашего проекта.

Компоненты

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

Настольный

Мобильный

Код

Пример использования временной шкалы в собственном проекте

      <div class="timeline p-1">
        <div class="timeline-body">
          <div class="timeline-item">
            <div class="content">
              <p class="time">Sept 2021</p>
              <h2 class="title font-lg">Associate Software Developer</h2>
              <h3>Rocket Innovation Studio</h3>
              <div class="mt-1">
                <span class="badge-red text-white mr-1">.NET Core</span>
                <span class="badge-blue text-white mr-1">Angular</span>
              </div>
            </div>
          </div>
          <div class="timeline-item">
            <div class="content">
              <p class="time">Sept 2017</p>
              <h2 class="title font-lg">Software Developer</h2>
              <h3>Flex-N-Gate Canada</h3>
              <div class="mt-1">
                <span class="badge-red text-white mr-1">Laravel</span>
                <span class="badge-blue text-white mr-1">Vue</span>
              </div>
            </div>
          </div>
        </div>
      </div>

Проблемы

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

Что дальше

Я думаю, что меньший пузырь для демонстрации начала временной шкалы будет выглядеть отлично, и, возможно, изменение цветовой палитры библиотеки на что-то другое…. посмотрим 🙂

Оставайтесь с нами!