최신 CSS 프레임워크

쉬운 것에서 복잡한 것으로, 단순한 것에서 최고로

훌륭한 CSS 프레임워크는 얼마나 유용합니까? 당신도 알다시피 그것들 중 하나는 쉽고 다른 것들은 더 복잡하지만 모두 정말 도움이 됩니다.

선택한 것은 내가 가장 좋아하는 것입니다. 이미 인기가 있고 점점 더 많아지고 있습니다.

불마.io CSS

This is a powerful CSS framework which its primary feature is the fact that all its components are dependent of flex box, making it a nice CSS to create easy layouts.
Its simple classes make it very intuitive. Let see an example:

<section class="section">
    <div class="container">
      <h1 class="title">Section</h1>
      <h2 class="subtitle">
        A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading
     </h2>
   </div>
</section>

설명서를 한 번만 읽으면 됩니다. 놀랍지 않나요?

Bulma.io CSS

내가 좋아하는 2번째 이야기를 해보자

부트스트랩 v.5

Almost everybody in web development know about Bootstrap.
And it's simple amazing, the recent arrival of its new version made a big step just leaving out jQuery and rewriting back all its plugins in simple JavaScript. (lighter and faster).
Also, a new feature is the responsive fonts and headings, plus the gutter. 😍

<div class="container px-4">
  <div class="row gx-5">
    <div class="col">
     <div class="p-3 border bg-light">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3 border bg-light">Custom column padding</div>
    </div>
  </div>
</div>

부트스트랩은 학습해야 하는 강력한 프레임워크입니다. 가장 많이 사용되는 것입니다.

See more about v5.Bootstrap

그리고 첫 번째 위치의 마지막....

테일윈드 CSS

How amazing a CSS framework can be? Its prefix classes as...

    'sm': '640px',
    // => @media (min-width: 640px) { ... }

    'md': '768px',
    // => @media (min-width: 768px) { ... }

    'lg': '1024px',
    // => @media (min-width: 1024px) { ... }

    'xl': '1280px',
    // => @media (min-width: 1280px) { ... }

🦄🦄🦄🦄

놀라운 HTML 웹을 구축하기 위해 생각하고 사용할 수 있는 모든 것, Tailwind는 이미 사용할 준비가 되어 있습니다.

그래도 날 못 믿어?
이 CSS 프레임워크는 기능으로 가득 차 있으며 거의 ​​모든 것이 애니메이션, 전환, 음수 여백 또는 패딩, 다크 모드 😍😍와 같은 클래스에서 수행됩니다.
더 이상 style.css가 필요하지 않습니다. 저를 믿으세요!

Tailwindcss

글을 마치며 친구가 하는 사이드 프로젝트를 소개하려고 합니다.


.ltag__user__id__ .follow-action-button {
배경색: #19063A !중요;
색상: #dce9f3 !중요;
border-color: #19063A !중요;
}

[삭제 된 사용자]

& 나 자신이 노력하고 있습니다.
WickedTemplates

우리는 내가 작성한 CSS 프레임워크를 기반으로 순수한 HTML 템플릿을 만들고 있습니다.

우리는 CSS 프레임워크의 스타일을 사용하지 않으며 보시다시피 이러한 CSS 프레임워크는 많은 잠재력을 가지고 있습니다.

읽어 주셔서 감사합니다!.