Yumma CSS - La nouvelle alternative aux frameworks CSS modernes

Si vous êtes familier avec Bootstrap et Tailwind CSS, vous savez à quel point il peut être difficile de déboguer votre base de code, surtout lorsque vous travaillez sur une grosse application. Honnêtement, chaque projet CSS Bootstrap ou Tailwind sur lequel j'ai travaillé se retrouvait avec beaucoup trop de lignes de code, et j'en suis arrivé à un point où je m'ennuyais avec cette approche.

Comment Yumma CSS se compare-t-il ?

Yumma CSS utilise une convention de dénomination abrégée similaire à la syntaxe CSS standard.

Centrage à l'aide de Flexbox

Voyons comment le centrage avec Flex box se déroule dans ces cadres :

Utiliser Bootstrap

<div class="align-items-center d-flex justify-content-center">...</div>

Utiliser Tailwind CSS

<div class="items-center flex jc-c">...</div>

Utiliser Yumma CSS

<div class="ai-c d-f jc-c">...</div>

Requêtes multimédias et variantes

Yumma CSS propose un ensemble de pseudo-classes et de points d'arrêt réactifs tels que sm:*, md:*, lg:*, xl:* et xxl:*. Cela facilite l'adaptation de vos conceptions en fonction de la taille de l'écran et des interactions de l'utilisateur.

Composants du bâtiment

Voyons comment Yumma CSS se compare à Tailwind CSS lors de la création d'un composant Card Grid.

Carte 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>

Carte 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>

Maintenabilité et évolutivité

Lorsque vous travaillez sur un gros projet, il est vraiment important de pouvoir maintenir votre travail. C'est pourquoi nous avons conçu Yumma CSS pour qu'il soit modulaire et évolutif. C'est un excellent choix pour les applications qui utilisent des frameworks modernes comme React ou Vue. Ses noms de classe concis et sa structure organisée vous aident à garder vos styles gérables et votre code propre.

Yumma CSS	Property
ai-c	align-items: center;
bg-blue	background-color: #3575dd;
d-f	display: flex;
jc-c	justify-content: center;
m-4	margin: 1rem;
p-4	padding: 1rem;
rad-1	border-radius: 4px;
ta-c	text-align: center;
tc-white	color: #ffffff;
w-full	width: 100%;

Conclusion

Yumma CSS vise à garder les choses simples et minimalistes en matière de style. Cela peut vraiment aider à réduire la complexité et la verbosité de votre code. Ses conventions de dénomination et sa conception modulaire sont extrêmement concises et en font un excellent outil pour le développement Web moderne. Essayez Yumma CSS et voyez comment il peut vous aider à travailler plus efficacement sur vos projets !

En savoir plus sur Yumma CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!