Yumma CSS — новая альтернатива современным CSS-фреймворкам
3 сентября 2024 г.Если вы знакомы с Bootstrap и Tailwind CSS, вы знаете, как сложно бывает отлаживать кодовую базу, особенно когда вы работаете над большим приложением. Честно говоря, каждый проект Bootstrap или Tailwind CSS, над которым я работал, заканчивался слишком большим количеством строк кода, и в какой-то момент мне стало скучно с таким подходом.
Как выглядит Yumma CSS в сравнении?
Юмма CSSиспользует сокращенное соглашение об именовании, похожее на обычный синтаксис CSS.
Центрирование с помощью Flexbox
Давайте посмотрим, как центрирование с помощью Flex-box работает в этих фреймворках:
Использование Bootstrap-а
<div class="align-items-center d-flex justify-content-center">...</div>
Использование CSS Tailwind
<div class="items-center flex jc-c">...</div>
Использование Yumma CSS
<div class="ai-c d-f jc-c">...</div>
Медиа-запросы и варианты
Yumma CSS предлагает набор псевдоклассов и адаптивных точек останова, таких какsm:*
, md:*
, lg:*
, xl:*
, иxxl:*
. Это позволяет легко адаптировать дизайн в зависимости от размера экрана и взаимодействия с пользователем.
Строительные компоненты
Давайте посмотрим, как Yumma CSS сравнится с Tailwind CSS при создании компонента Card Grid.
CSS-карта Tailwind
<div class="grid h-screen w-full gap-4 p-6 md:grid-flow-dense md:grid-cols-3 md:grid-rows-3">
<div
class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-span-1 md:row-span-2">
<div class="flex-grow">
<h1 class="mb-2 text-2xl font-semibold text-gray-800">
Yumma OS 7.2
</h1>
<p class="mb-4 text-sm text-gray-600">
This update has some important bug fixes and also fixes an issue that
was preventing users from enabling or disabling Advanced Data Protection.
</p>
<a class="text-sm text-pink-500 underline" href="/">
What's new?
</a>
</div>
<div class="mt-auto flex flex-col space-y-4">
<button class="h-12 rounded-md bg-pink-600 px-6 font-semibold text-white">
Update Now
</button>
<button class="h-12 rounded-md border border-gray-200 px-6 font-semibold text-gray-900">
Update Tonight
</button>
</div>
</div>
<div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-1">
<div class="flex-grow">
<h1 class="mb-2 text-2xl font-semibold text-gray-800">
Patch 6.2
</h1>
<p class="mb-4 text-sm text-gray-600">
This update fixes security issues. Install it to keep your system safe.
</p>
</div>
<button class="mb-4 mt-auto h-12 rounded-md bg-pink-600 px-6 font-semibold text-white">
Update Now
</button>
</div>
<div class="flex flex-col overflow-hidden rounded-xl border border-gray-200 bg-white p-6 shadow-lg md:col-start-2 md:row-start-2">
<div class="flex-grow">
<h1 class="mb-2 text-2xl font-semibold text-gray-800">
What's new?
</h1>
<p class="mb-4 text-sm text-gray-600">
Take a look at the new features in the latest release, including better user interface elements and a more stable system.
</p>
<a class="text-sm text-pink-500 underline" href="/">
Learn more
</a>
</div>
</div>
</div>
Карточка CSS Yumma
<div class="d-g h-1/1 w-full g-4 p-6 md:gaf-d md:gtc-3 md:gtr-3">
<div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gc-s-1 md:gr-s-2">
<div class="fg-1">
<h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
Yumma OS 7.2
</h1>
<p class="mb-4 fs-sm tc-l-lead-3">
This update has some important bug fixes and also fixes an issue that was preventing users from enabling or disabling Advanced Data Protection.
</p>
<a class="fs-sm tc-pink tdl-u" href="/">
What's new?
</a>
</div>
<div class="mt-auto d-f fd-c s-y-4">
<button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white">
Update Now
</button>
<button class="h-12 rad-2 b-1 bc-l-silver-5 px-6 fw-600 tc-lead">
Update Tonight
</button>
</div>
</div>
<div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-1">
<div class="fg-1">
<h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
Patch 6.2
</h1>
<p class="mb-4 fs-sm tc-l-lead-3">
This update fixes security issues. Install it to keep your system safe.
</p>
</div>
<button class="h-12 rad-2 bg-pink px-6 fw-600 tc-white mt-auto mb-4">
Update Now
</button>
</div>
<div class="d-f fd-c ovf-h rad-3 b-1 bc-l-silver-6 bg-white p-6 bs-sm md:gcs-2 md:grs-2">
<div class="fg-1">
<h1 class="mb-2 fs-xl fw-600 tc-d-lead-2">
What's new?
</h1>
<p class="mb-4 fs-sm tc-l-lead-3">
Take a look at the new features in the latest release, including better user interface elements and a more stable system.
</p>
<a class="fs-sm tc-pink tdl-u" href="/">
Learn more
</a>
</div>
</div>
</div>
Поддерживаемость и масштабируемость
Когда вы работаете над большим проектом, очень важно иметь возможность поддерживать свою работу. Вот почему мы разработали Yumma CSS как модульный и масштабируемый. Это отличный выбор для приложений, использующих современные фреймворки, такие как React или Vue. Его лаконичные имена классов и организованная структура помогут вам поддерживать ваши стили управляемыми, а ваш код — чистым.
Юмма CSS | Свойство |
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Заключение
Yumma CSS — это простота и минимализм в стилизации. Он действительно может помочь сократить сложность и многословность вашего кода. Его соглашения об именовании и модульная конструкция очень лаконичны и делают его отличным инструментом для современной веб-разработки. Попробуйте Yumma CSS и посмотрите, как он может помочь вам работать над вашими проектами более эффективно!
Узнайте больше о Yumma CSS
Оригинал