Getting Started

Lism CSSを利用するための手順を解説します。

インストール

大きく分けて2通りの導入方法ができます。

CSS設計のみを導入したい場合

シンプルなHTMLサイトの場合など、CSSファイルのみを読み込む場合はCDN経由で利用できます。

↓

CDN経由でスタイルシートを読み込む

<link href="https://cdn.jsdelivr.net/npm/lism-css/dist/css/all.css" rel="stylesheet" />

もちろん、CSSファイルをダウンロードして読み込んでもOKです。

専用のコンポーネントを使用したい場合

React(.jsx)、Astro(.astro)形式のコンポーネントを npmパッケージとして配布しています。

1. パッケージのインストール

↓

パッケージのインポート

npm i lism-css

2. CSSの読み込み

↓

グローバルスタイルとして読み込んでください。

import 'lism-css/all.css';

例：Next.jsであれば、_app.jsやlayout.jsでimportしてください。

3. コンポーネントの読み込み

↓

各コンポーネントのインポート

import { Box, Flex, ... } from 'lism-css/react';

.astroを読み込む場合の注意点

.astroファイルをnode_modeules内から直接読み込むことができず、追加の設定が必要な場合があります。
“Directory import ’…’ is not supported resolving ES modules …” というエラーが発生した場合、astro.config.jsのvite.ssr.noExternalに"lism-css"を追加してください。

↓

astro.config.js

import { defineConfig } from "astro/config";

export default defineConfig({
  // ...other settings
  vite: {
    ssr: {
      noExternal: ["lism-css"],
    },
  },
});

（パッケージ配布方法の改善で対応できるかどうか調整中です…）

Next.js ( for App Router)

準備中

Accordionなど、"use client"の記述が必要なコンポーネントについては、lism-css/next-jsからすでに記述済みのコンポーネントをimportできるようになっています。

import Accordion from 'lism-css/next-js/Accordion';