インストール

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

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

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

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

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

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

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

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

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

npm i lism-css

pnpm add lism-css

yarn add lism-css

2. CSSの読み込み

import 'lism-css/main.css';

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

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

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

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

import { defineConfig } from "astro/config";

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