jgthms/bulma

어떤 프로젝트인가요?

핵심 기능

• 01Flexbox 기반 레이아웃 시스템
• 02JavaScript 의존성 없이 단일 CSS 파일로 제공
• 03Sass 변수를 사용해 커스터마이즈 가능
• 04npm, Yarn, Bower 또는 CDN으로 설치 가능
• 05더 폭넓은 브라우저 호환성을 위한 autoprefixer 지원

활용 사례

• 처음부터 CSS를 작성하지 않고 정적 웹사이트나 랜딩 페이지 스타일링하기
• Django 또는 Rails의 서버 렌더링 앱에 일관된 UI 스타일 적용하기
• Bulma의 Sass 변수를 활용해 커스텀 테마 만들기
• React나 Vue 같은 JavaScript 프레임워크에 시각적 스타일 계층 추가하기

빠른 시작

1. 1

   npm에서 Bulma 설치하기

   npm install bulma
2. 2

   CSS 파일을 프로젝트로 가져오기

   @import 'bulma/css/bulma.css'

사용 전 알아둘 점

• !Bulma는 CSS만 제공하며 JavaScript는 포함하지 않습니다. 따라서 인터랙티브한 컴포넌트에는 자체 JS가 필요합니다.
• !Internet Explorer 10 이상은 부분적으로만 지원됩니다.

토픽

자주 묻는 질문

bulma은(는) 무엇인가요?

Bulma는 Flexbox 기반의 최신 CSS 프레임워크로, JavaScript 없이 바로 사용할 수 있는 컴포넌트와 레이아웃 클래스가 담긴 단일 스타일시트를 제공합니다. Bulma는 Flexbox 기반의 CSS 프레임워크입니다. 결과물은 CSS 파일 하나뿐이며, 그대로 사용하거나 Sass 소스를 내려받아 변수를 수정해 원하는 대로 꾸밀 수 있습니다. npm, Yarn, Bower로 설치하거나 CDN에서 불러올 수 있습니다.

bulma은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

bulma은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

bulma은(는) 아직 유지보수되고 있나요?

6개월 이내 업데이트. bulma의 마지막 커밋은 2026년 9월 21일입니다.

bulma은(는) 어디에 사용할 수 있나요?

처음부터 CSS를 작성하지 않고 정적 웹사이트나 랜딩 페이지 스타일링하기 Django 또는 Rails의 서버 렌더링 앱에 일관된 UI 스타일 적용하기 Bulma의 Sass 변수를 활용해 커스텀 테마 만들기 React나 Vue 같은 JavaScript 프레임워크에 시각적 스타일 계층 추가하기

bulma는 어떻게 설치하나요?

npm에서 Bulma 설치하기: npm install bulma CSS 파일을 프로젝트로 가져오기: @import 'bulma/css/bulma.css'

bulma은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/jgthms/bulma