Bulma의 장점

Binsu·2021년 8월 3일
1

Front-End

목록 보기
1/1

Bulma: the modern CSS framework that just works.
출처 : https://bulma.io/

Bulma는 반응형 웹을 JS 없이도 쉽게 모던 웹을 구현할 수 있는 오픈소스 CSS 프레임워크다.

공식 사이트에서도 100% Responsive, Designed for mobile first를 자랑하고 있다.

또한, Modularity가 뛰어나다.

Bulma는 39개의 .sass 파일로 이루어져 있으며 개별적으로 원하는 기능만 import하여 사용할 수 있다.
아래 코드는 Bulma에서 버튼 스타일만 사용하고 싶을 때의 활용 예시다.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/elements/button.sass"

해당 .sass 파일만 import 해주면 아래와 같이 .button클래스와 함께 제어자를 덧붙여 사용할 수 있다.

  • .is-active
  • .is-primary, .is-info, .is-success...
  • .is-small, .is-medium, .is-large
  • .is-outlined, .is-inverted, .is-link
  • .is-loading, [disabled]
<button class="button">
  Button
</button>

<button class="button is-primary">
  Primary button
</button>

<button class="button is-large">
  Large button
</button>

<button class="button is-loading">
  Loading button
</button>

0개의 댓글