Bulma v1への移行

Bulma v1に移行する方法

Bulma v1は基本的にDart Sassを使用してフレームワークを完全に書き換えたものです。これはSassの主要な実装です。これはいくつかの開発の詳細に影響しますが、移行をできるだけ簡単にするためにすべてが行われています。

変更のない点 #

すべてのHTMLスニペットは同じです。つまり、マークアップを更新する必要はありません。これは重要です。Bulmaをそのまま使用している場合、何も変更する必要がないことを意味するためです。

[email protected]/css/bulma.min.cssを[email protected]/css/bulma.min.cssに置き換えるだけで、すべてが機能します。見た目は少し異なりますが、機能は変わりません。

変更点 #

Bulmaの構築にはDart Sassが使用されます
- sass npmパッケージを使用している場合、既にDart Sassを使用しています
リテラルの代わりにCSS変数が使用されます。color: hsl(171deg, 100%, 41%);の代わりにcolor: var(--bulma-primary);を使用します。つまり、Sassを使用せずにCSSのみでBulmaをカスタマイズできます
Sass変数に独自の値を設定することによるカスタマイズは、動作が異なります。SassでBulmaをカスタマイズする方法をご覧ください。

新機能（つまり、以前は存在しなかったもの） #

テーマの概念が導入されました。テーマとは、コンテキスト内のCSS変数のコレクションであり、Bulmaをカスタマイズするための最良のアプローチです
その結果、ダークモードのテーマが含まれています
7つの主要な色のそれぞれにカラーパレットが作成されます
スケルトンローダーはスタンドアロンコンポーネントとしてだけでなく、他のコンポーネントのバリアントとしても存在します
すべてのBulmaクラスにプレフィックスを追加して、.buttonを.my-prefix-buttonにすることができます
- プレフィックス付きのバージョンが代替バージョンの1つとして存在します

破壊的変更 #

⛔️ 廃止予定 ✅ 修正方法

⛔️ 廃止予定	✅ 修正方法
タイルは廃止予定です `<!-- 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>`
`@import`は推奨されません `// 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";`	Dart Sassの新しい`@use`と`@forward`キーワードを使用してください // 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 );

タイルは廃止予定です

<!-- 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>

@importは推奨されません

// 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";

Dart Sassの新しい@useと@forwardキーワードを使用してください

// 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
);

ここから始める

機能

Sassツール

カスタマイズ

CSSライブラリ

CSSヘルパー

スポンサー