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>