유용한 Bulma CSS 팁

나는 몇 년 전에 Bulma를 처음 발견한 이후로 Bulma의 열렬한 팬이었습니다. Bulma은 Jeremy Thomas가 만든 Flexbox 기반의 무료 오픈 소스 CSS 프레임워크입니다.

나는 단순함을 좋아한다

나는 Bulma가 순전히 CSS이고 자바스크립트가 없다는 사실을 좋아합니다. Here's a nice comparison with Bootstrap . 클래스 이름과 수정자는 모두 기억하기 쉽고 직관적입니다. (몇 번 사용한 후에는 수정자에 대한 명명 체계를 빠르게 선택하고 문서를 참조하는 빈도가 점점 줄어들 것입니다.) !important 가 필요 없이 사용자 정의하거나 덮어쓰기도 매우 쉽습니다.

팁

다음은 Bulma의 테이블 클래스를 사용하는 간단한 테이블입니다.

<table class="table is-fullwidth">
    <tr>
      <td>Hall of Fame</td>
    </tr>
    <tr>
      <td>Michael Jordan</td>
    </tr>
    <tr>
      <td>Magic Johnson</td>
    </tr>
    <tr>
      <td>Larry Bird</td>
    </tr>
    <tr>
      <td>Shaq</td>
    </tr>
  </tbody>
</table>

대부분의 사람들과 마찬가지로 저는 HTML 표 작성을 좋아하지 않습니다. 많은 마크업입니다.

하지만 Bulma.panel-block 클래스를 사용하면 훨씬 적은 마크업으로 동일한 표와 같은 모양을 얻을 수 있습니다.

<p class="panel-block">Hall of Fame</p>
<p class="panel-block">Michael Jordan</p>
<p class="panel-block">Magic Johnson</p>
<p class="panel-block">Larry Bird</p>
<p class="panel-block">Shaq</p>

결과는 다음과 같습니다. (약간 더 큰 padding-top과 padding-bottom은 조금 더 읽기 쉽게 만듭니다.)



읽어 주셔서 감사합니다. 더 많은 Bulma "해킹"및 팁 제공...