Yumma CSS – Die neue Alternative zu modernen CSS-Frameworks

Wenn Sie mit Bootstrap und Tailwind CSS vertraut sind, wissen Sie, wie schwierig es sein kann, Ihre Codebasis zu debuggen, insbesondere wenn Sie an einer großen Anwendung arbeiten. Ehrlich gesagt hatte jedes Bootstrap- oder Tailwind-CSS-Projekt, an dem ich gearbeitet habe, viel zu viele Codezeilen und irgendwann wurde mir dieser Ansatz langweilig.

Wie vergleicht sich Yumma CSS?

Yumma CSS verwendet eine abgekürzte Namenskonvention, die der regulären CSS-Syntax ähnelt.

Zentrierung mit Flexbox

Sehen wir uns an, wie sich die Zentrierung mit Flex-Box in diesen Frameworks schlägt:

Bootstrap verwenden

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

Tailwind CSS verwenden

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

Yumma CSS verwenden

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

Medienabfragen und -varianten

Yumma CSS bietet eine Reihe von Pseudoklassen und responsiven Haltepunkten wie sm:*, md:*, lg:*, xl:* und xxl:*. Dadurch können Sie Ihre Designs ganz einfach an die Bildschirmgröße und Benutzerinteraktionen anpassen.

Bauteile

Sehen wir uns an, wie sich Yumma CSS beim Erstellen einer Card Grid-Komponente im Vergleich zu Tailwind CSS schlägt.

Tailwind CSS-Karte

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

Yumma CSS-Karte

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

Wartbarkeit und Skalierbarkeit

Wenn Sie an einem großen Projekt arbeiten, ist es wirklich wichtig, dass Sie Ihre Arbeit aufrechterhalten können. Aus diesem Grund haben wir Yumma CSS modular und skalierbar gestaltet. Es ist eine großartige Wahl für Anwendungen, die moderne Frameworks wie React oder Vue verwenden. Seine prägnanten Klassennamen und die organisierte Struktur helfen Ihnen, Ihre Stile überschaubar und Ihren Code sauber zu halten.

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%;

Abschluss

Bei Yumma CSS geht es darum, die Dinge beim Styling einfach und minimalistisch zu halten. Es kann wirklich hilfreich sein, die Komplexität und Ausführlichkeit Ihres Codes zu reduzieren. Die Namenskonventionen und der modulare Aufbau sind äußerst prägnant und machen es zu einem großartigen Werkzeug für die moderne Webentwicklung. Probieren Sie Yumma CSS aus und sehen Sie, wie es Ihnen helfen kann, effizienter an Ihren Projekten zu arbeiten!

Erfahren Sie mehr über Yumma CSS

Das obige ist der detaillierte Inhalt vonYumma CSS – Die neue Alternative zu modernen CSS-Frameworks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!