Yumma CSS - 最新の CSS フレームワークの新しい代替手段-CSSチュートリアル-php.cn

Yumma CSS - 最新の CSS フレームワークの新しい代替手段

PHPz

リリース： 2024-09-03 10:33:55

オリジナル

528 人が閲覧しました

Yumma CSS - The new alternative to modern CSS Frameworks

Bootstrap と Tailwind CSS に精通している場合は、特に大規模なアプリケーションで作業している場合に、コードベースをデバッグすることがいかに難しいかをご存知でしょう。正直に言うと、私が取り組んだ Bootstrap プロジェクトや Tailwind CSS プロジェクトはどれも、最終的にはコード行数が多すぎて、そのアプローチには飽きてしまうところまで来ていました。

Yumma CSS はどのように比較されますか?

Yumma CSS は、通常の CSS 構文に似た短縮された命名規則を使用します。

フレックスボックスを使用したセンタリング

これらのフレームワークでフレックスボックスを使用したセンタリングがどのように機能するかを見てみましょう:

ブートストラップの使用

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

ログイン後にコピー

Tailwind CSS の使用

<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 とどのように比較できるかを見てみましょう。

Tailwind CSS カード

<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 カード

<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 などの最新のフレームワークを使用するアプリケーションに最適です。簡潔なクラス名と整理された構造により、スタイルを管理しやすく、コードをクリーンに保つことができます。

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

結論

Yumma CSS は、スタイリングをシンプルかつミニマリストに保つことを目的としています。コードの複雑さと冗長性を軽減するのに非常に役立ちます。その命名規則とモジュール設計は非常に簡潔で、最新の Web 開発に最適なツールとなっています。 Yumma CSS を試して、プロジェクトの作業効率を高めるのにどのように役立つかを確認してください!

Yumma CSS について詳しく見る

以上がYumma CSS - 最新の CSS フレームワークの新しい代替手段の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。