Skip to content

css

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

css

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
.gitignore
.gitignore
 
 
CHANGELOG.md
CHANGELOG.md
 
 
README.md
README.md
 
 
build.js
build.js
 
 
package.json
package.json
 
 

README.md

@burger-editor/css

npm version

BurgerEditorブロック用の統合スタイルシートパッケージです。

概要

@burger-editor/cssは、@burger-editor/blocksで定義されている全ブロックとアイテムのCSSスタイルを統合した配布パッケージです。general.cssと各アイテムのstyle.cssを1つのファイルにまとめて提供します。

インストール

npm install @burger-editor/css

または

yarn add @burger-editor/css

使用方法

JavaScriptからのインポート

import '@burger-editor/css';

HTMLからの読み込み

<link rel="stylesheet" href="/node_modules/@burger-editor/css/style.css" />

Viteでの使用

import '@burger-editor/css';

Webpackでの使用

import '@burger-editor/css';

Webpackの設定でcss-loaderが有効になっている必要があります。

含まれるスタイル

このパッケージには以下のスタイルが含まれています：

General CSS

ブロック全体の基本スタイルを定義します：

ブロックコンテナ ([data-bge-container])

  • レイアウトタイプ（grid, inline, float）
  • 最大幅とマージンの管理
  • 背景色とパディングのカスタマイズ
  • コンテナクエリによるレスポンシブデザイン

グリッドレイアウト (data-bge-container="grid")

  • 1〜5カラムのグリッドレイアウト
  • auto-fit/auto-fillによる自動調整
  • サブグリッドによる複雑なレイアウト
  • カスタマイズ可能な行・列間隔

インラインレイアウト (data-bge-container="inline")

  • フレックスボックスベースの横並びレイアウト
  • justify-content（start, center, end, between, around, evenly）
  • align-items（start, center, end, stretch, baseline）
  • 折り返し設定（wrap, nowrap）

フロートレイアウト (data-bge-container="float")

  • テキスト回り込みレイアウト
  • 画像の左右配置（start, end）

Wysiwyg内専用スタイル

  • フレックスボックス ([data-bgc-flex-box]): リッチテキスト内での横並びレイアウト
  • 段落整列 ([data-bgc-align]): テキストの左寄せ（start）、中央寄せ（center）、右寄せ（end）

各アイテムのスタイル

各アイテム固有のスタイル：

  • button
  • details
  • download-file
  • google-maps
  • hr
  • image
  • table
  • title-h2
  • title-h3
  • wysiwyg
  • youtube

ビルド

このパッケージのCSSは、ビルド時に@burger-editor/blocksから自動的に生成されます。

yarn build

ビルドスクリプト（build.js）が@burger-editor/blocksパッケージからCSSファイルを収集し、style.cssとして統合します。

単独利用

BurgerEditorの編集機能を使わず、生成されたHTMLのスタイルだけが必要な場合は、このパッケージのみをインストールすることができます。

npm install @burger-editor/css
<!DOCTYPE html>
<html>
	<head>
		<link rel="stylesheet" href="/node_modules/@burger-editor/css/style.css" />
	</head>
	<body>
		<!-- BurgerEditorで生成されたHTML -->
		<div data-bge-name="text-image" data-bge-container="grid:2">
			<!-- ... -->
		</div>
	</body>
</html>

関連パッケージ

ライセンス

Dual Licensed under MIT OR Apache-2.0