Bulma v1로 마이그레이션

Bulma v1로 마이그레이션 (Migrating to Bulma v1)

Bulma v1은 기본적으로 Sass의 주 구현체인 Dart Sass를 사용한 프레임워크의 전면 재작성이에요. 개발 세부사항은 달라졌지만, 전환을 최대한 쉽게 만들기 위해 노력했어요. 무엇이 그대로이고 무엇이 바뀌었는지 확인해 보세요.

출처: 문서

본문

Bulma v1은 기본적으로 Sass의 주 구현체인 Dart Sass를 사용하는 프레임워크의 전면 재작성이에요. 일부 개발 세부사항에 영향을 주지만, 전환을 최대한 쉽게 할 수 있도록 모든 것이 준비되어 있습니다.

그대로 유지되는 것 (What remains the same)

모든 HTML 스니펫은 동일해요. 즉 마크업을 업데이트할 필요가 없습니다. 이는 Bulma를 "그대로(out of the box)" 사용한다면 아무것도 바꿀 필요가 없다는 뜻이에요. 그냥 CDN의 [email protected]/css/bulma.min.css 파일을 [email protected]/css/bulma.min.css로 교체하면 모든 것이 동작합니다. 모양은 조금 달라 보이겠지만, 여전히 잘 동작해요.

바뀌는 것 (What changes)

• Dart Sass가 Bulma를 빌드하는 데 사용됩니다
• sass npm 패키지를 사용한다면 이미 Dart Sass를 쓰고 있는 셈이에요
• CSS 변수가 리터럴 대신 사용됩니다: color: hsl(171deg, 100%, 41%); 대신 color: var(--bulma-primary);처럼요. 즉 Sass 없이 CSS만으로도 Bulma를 커스터마이징할 수 있어요
• Sass 변수에 직접 값을 설정하는 커스터마이징 방식이 달라졌어요. Sass로 Bulma를 커스터마이징하는 방법을 참고하세요.

새로 추가된 것 (What's new)

• 테마(Theme) 개념이 도입되었어요. 테마는 특정 컨텍스트 안에 있는 CSS 변수 모음이며, Bulma를 커스터마이징하는 가장 좋은 방법입니다
• 그 결과 다크 모드용 테마가 포함되어 있어요
• 7가지 기본 색상 각각에 대해 색상 팔레트(Color Palettes) 가 만들어졌어요
• 스켈레톤 로더(Skeleton loaders) 가 독립 컴포넌트로도, 다른 컴포넌트의 변형으로도 존재합니다
• 모든 Bulma 클래스에 접두사를 붙일 수 있어서 .button이 .my-prefix-button이 됩니다
• 미리 만들어진 접두사 버전이 대체 버전(alternative versions) 중 하나로 존재해요

주요 변경사항 (Breaking Changes)

<!-- Before -->
<div class="tile is-ancestor">
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="tile is-parent">
<article class="tile is-child box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
</div>

<!-- After -->
<div class="grid">
<div class="cell">
<article class="box">
<p class="title">Hello World</p>
<p class="subtitle">What is up?</p>
</article>
</div>
<div class="cell">
<article class="box">
<p class="title">Foo</p>
<p class="subtitle">Bar</p>
</article>
</div>
</div>

// Before
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;

// Update some of Bulma's component variables
$control-border-width: 2px;
$input-background-color: $beige-lighter;
$input-border-color: transparent;
$input-shadow: none;

// Import the rest of Bulma
@import "../path/to/bulma";

// After
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;

// Path to Bulma's sass folder
@use "path/to/bulma/sass" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px,
$input-h: color.hue($beige-lighter),
$input-s: color.saturation($beige-lighter),
$input-background-l: color.lightness($beige-lighter),
$input-border-l: color.lightness($beige-lighter),
$input-shadow: none
);

더 알아보기 (Learn more)

• Bulma 반응형 (Responsiveness)
• Bulma 대체 버전 (Alternative versions)