Yumma CSS - 최신 CSS 프레임워크의 새로운 대안-CSS 튜토리얼-php.cn

Yumma CSS - 최신 CSS 프레임워크의 새로운 대안

PHPz

풀어 주다： 2024-09-03 10:33:55

원래의

495명이 탐색했습니다.

Yumma CSS - The new alternative to modern CSS Frameworks

Bootstrap 및 Tailwind CSS에 익숙하다면 특히 대규모 애플리케이션에서 작업할 때 코드베이스를 디버깅하는 것이 얼마나 힘든지 알 것입니다. 솔직히 제가 작업한 Bootstrap이나 Tailwind CSS 프로젝트는 모두 코드 줄이 너무 많아서 결국 그런 접근 방식이 싫증이 날 지경이었습니다.

Yumma CSS는 어떻게 비교되나요?

Yumma CSS는 일반 CSS 구문과 유사한 축약된 명명 규칙을 사용합니다.

Flexbox를 사용한 센터링

다음 프레임워크에서 Flex Box 요금을 사용하여 센터링하는 방법을 살펴보겠습니다.

부트스트랩 사용

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

로그인 후 복사

Yumma 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는 스타일을 단순하고 미니멀하게 유지하는 데 중점을 둡니다. 코드의 복잡성과 장황함을 줄이는 데 정말 도움이 될 수 있습니다. 명명 규칙과 모듈식 디자인은 매우 간결하며 현대적인 웹 개발을 위한 훌륭한 도구입니다. Yumma CSS를 사용해 보고 이것이 프로젝트에서 보다 효율적으로 작업하는 데 어떻게 도움이 되는지 알아보세요!

Yumma CSS에 대해 자세히 알아보기

위 내용은 Yumma CSS - 최신 CSS 프레임워크의 새로운 대안의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!