FlowBite - Tailwind CSS 구성 요소 라이브러리

플로우바이트란?

FlowBite is an open-source collection of UI elements based on the utility-first CSS framework Tailwind Figma 및 웹 구성 요소에서 사용할 수 있는 Themesberg에 의해 설계 및 코딩되었습니다.

FlowBite를 사용하는 이유는 무엇입니까?

다른 프레임워크에 비해 Tailwind CSS의 단점 중 하나는 기본 구성 요소 집합이 없다는 것입니다. 이것은 사용자 인터페이스의 프로토타입을 빠르게 만드는 것을 정말 어렵게 만듭니다.



이것이 FlowBite가 작동하는 곳입니다. 기본적으로 Tailwind CSS이지만 일반적으로 Bootstrap 또는 Bulma와 같은 고전적인 CSS 프레임워크에서 얻을 수 있는 모든 구성 요소를 얻을 수 있습니다.

버튼, 경고, 이동 경로, 페이지 매김 및 탐색 모음을 포함하여 최소 15가지 유형의 구성 요소가 있습니다. FlowBite에는 드롭다운, 모달, 도구 설명 등과 같은 대화형 구성 요소를 활성화하는 일부 사용자 지정 JavaScript도 포함되어 있습니다.

시작하는 방법?

FlowBite를 시작하는 것은 매우 쉽습니다. quickstart guide을 따르거나 build tools guide을 따라 고급 워크플로를 설정하기만 하면 됩니다.

CDN을 통해 포함

FlowBite 작업을 시작하는 가장 빠른 방법은 CDN을 통해 CSS와 JavaScript를 프로젝트에 포함하는 것입니다.
head 태그 안에 다음과 같은 축소된 스타일시트가 필요합니다.

<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />

그리고 body 요소가 끝나기 전에 다음 자바스크립트 파일을 포함합니다.

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>

중요: 이것은 불필요한 CSS를 제거할 수 없기 때문에 FlowBite로 작업하는 데 권장되는 방법이 아닙니다. 개발 및 프로덕션 코드에 대해 FlowBite를 올바르게 설정하려면 build tools을 확인하십시오.

NPM을 통해 필요

다음 명령을 실행하여 NPM을 사용하여 FlowBite를 종속성으로 요구할 수도 있습니다.

npm i flowbite

설치

FlowBite 및 Tailwind CSS를 사용하여 구성, 개발 및 빌드하려면 다음 단계를 따르세요.

컴퓨터에 Node.js 및 NPM이 설치되어 있는지 확인

mkdir flowbite-project로 새 폴더 생성

cd flowbite-project로 새로 생성된 폴더 안으로 이동

npm init를 실행하여 package.json 파일을 만들고 CLI 지침을 따릅니다

.

다음 코드를 실행하여 Tailwind CSS를 설치합니다.

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms@latest

touch postcss.config.js를 사용하여 새 파일을 만들고 다음 코드를 삽입합니다.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

다음을 실행하여 Tailwind 구성 파일을 만듭니다.

npx tailwindcss init

그런 다음 tailwind.config.js 파일 안에 다음 코드를 추가합니다.

module.exports = {
  purge: {
    enabled: true,
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    fontFamily: {
      'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
    },
    colors: {
      white: "#ffffff",
      black: "#000000",
      gray: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827'
      },
      red: {
        50: '#FDF2F2',
        100: '#FDE8E8',
        200: '#FBD5D5',
        300: '#F8B4B4',
        400: '#F98080',
        500: '#F05252',
        600: '#E02424',
        700: '#C81E1E',
        800: '#9B1C1C',
        900: '#771D1D'
      },
      orange: {
        50: '#FFF8F1',
        100: '#FEECDC',
        200: '#FCD9BD',
        300: '#FDBA8C',
        400: '#FF8A4C',
        500: '#FF5A1F',
        600: '#D03801',
        700: '#B43403',
        800: '#8A2C0D',
        900: '#771D1D'
      },
      yellow: {
        50: '#FDFDEA',
        100: '#FDF6B2',
        200: '#FCE96A',
        300: '#FACA15',
        400: '#E3A008',
        500: '#C27803',
        600: '#9F580A',
        700: '#8E4B10',
        800: '#723B13',
        900: '#633112'
      },
      green: {
        50: '#F3FAF7',
        100: '#DEF7EC',
        200: '#BCF0DA',
        300: '#84E1BC',
        400: '#31C48D',
        500: '#0E9F6E',
        600: '#057A55',
        700: '#046C4E',
        800: '#03543F',
        900: '#014737'
      },
      teal: {
        50: '#EDFAFA',
        100: '#D5F5F6',
        200: '#AFECEF',
        300: '#7EDCE2',
        400: '#16BDCA',
        500: '#0694A2',
        600: '#047481',
        700: '#036672',
        800: '#05505C',
        900: '#014451'
      },
      blue: {
        50: '#EBF5FF',
        100: '#E1EFFE',
        200: '#C3DDFD',
        300: '#A4CAFE',
        400: '#76A9FA',
        500: '#3F83F8',
        600: '#1C64F2',
        700: '#1A56DB',
        800: '#1E429F',
        900: '#233876'
      },
      indigo: {
        50: '#F0F5FF',
        100: '#E5EDFF',
        200: '#CDDBFE',
        300: '#B4C6FC',
        400: '#8DA2FB',
        500: '#6875F5',
        600: '#5850EC',
        700: '#5145CD',
        800: '#42389D',
        900: '#362F78'
      },
      purple: {
        50: '#F6F5FF',
        100: '#EDEBFE',
        200: '#DCD7FE',
        300: '#CABFFD',
        400: '#AC94FA',
        500: '#9061F9',
        600: '#7E3AF2',
        700: '#6C2BD9',
        800: '#5521B5',
        900: '#4A1D96'
      },
      pink: {
        50: '#FDF2F8',
        100: '#FCE8F3',
        200: '#FAD1E8',
        300: '#F8B4D9',
        400: '#F17EB8',
        500: '#E74694',
        600: '#D61F69',
        700: '#BF125D',
        800: '#99154B',
        900: '#751A3D'
      }
    }
  },
  variants: {
    extend: {
      fill: ['hover', 'focus'],
      zIndex: ['hover', 'active'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

새 CSS 파일을 만들어 CSS에 Tailwind를 포함하고 @directive를 사용하여 기본 스타일을 삽입합니다.

/* ./styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

다음을 실행하여 Tailwind CLI 도구를 사용하여 CSS를 컴파일합니다.

npx tailwindcss -o flowbite.css

새로 생성된 flowbite.css 파일을 HTML 템플릿에 포함하고 FlowBite 및 Tailwind CSS로 개발을 시작합니다.

ES6 사용: flowbite.js라는 JavaScript 파일도 생성하여 드롭다운 및 모달과 같은 요소가 작동하도록 하고 다음 코드를 추가해야 합니다.

import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
import 'tippy.js/animations/scale.css';
import { createPopper } from '@popperjs/core';

function toggleCollapse(collapseId) {
    const menu = document.getElementById(collapseId);
    if (menu.classList.contains("hidden")) {
        menu.classList.remove("hidden");
    } else {
        menu.classList.add("hidden");
    }
}
window.toggleCollapse = toggleCollapse;

function toggleDropdown(event, dropdownID) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
        element = element.parentNode;
    }
    createPopper(element, document.getElementById(dropdownID), {
        placement: 'bottom-start',
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [0, 10],
                },
            },
        ]
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
}
window.toggleDropdown = toggleDropdown;

function toggleModal(modalID) {
    document.getElementById(modalID).classList.toggle("hidden");
    document.getElementById(modalID + "-backdrop").classList.toggle("hidden");
    document.getElementById(modalID).classList.toggle("flex");
    document.getElementById(modalID + "-backdrop").classList.toggle("flex");
}

window.toggleModal = toggleModal;

document.addEventListener("DOMContentLoaded", function () {
    tippy('[data-tippy-content]');
});

또는 컴파일된 JS와 함께 CDN 링크를 사용할 수도 있습니다.

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>

생산을 위한 건물

프로덕션용으로 빌드하려면 다음 명령을 사용하고 사용하지 않는 CSS를 제거하십시오.

NODE_ENV=production npx tailwindcss -o flowbite.css

Figma 디자인 파일

Figma 디자인 파일로 작업하려면 free version on Figma Community을 복제하거나 FlowBite Pro을 사용하여 추가 애플리케이션 UI, 마케팅 UI, 전자 상거래 섹션 및 페이지에 대해 업그레이드할 수 있습니다.

라이선스

FlowBite의 구성 요소 라이브러리는 MIT License 하에 오픈 소스입니다.

그러나 FlowBite의 프로 버전에는 FlowBite의 EULA (End User License Agreement)이 적용됩니다.

저자

FlowBite의 저자는 Themesberg의 공동 설립자로서 (개발) 및 (디자이너)입니다.