React를 사용한 Bulma CSS 소개

소개

Bulma는 도우미, 요소 및 구성 요소가 있는 CSS 프레임워크입니다. 프로젝트에서 신뢰할 수 있고 확장 가능한 디자인을 위해 Bulma 클래스 및 HTML 구조를 사용할 수 있습니다.

이 기사에서는 React에서 Bulma CSS 프레임워크의 가장 인기 있는 구현 중 하나인 react-bulma-components를 사용합니다.

전제 조건

이 자습서를 완료하려면 다음이 필요합니다.

Node.js용 로컬 개발 환경입니다. Node.js 설치 및 로컬 개발 환경 생성 방법을 따르십시오.
React에 대한 약간의 친숙함. React.js에서 코딩하는 방법 시리즈를 살펴볼 수 있습니다.

이 튜토리얼은 Node v16.2.0, npm v7.14.0, react v17.0.2 및 react-bulma-components v4.0.4에서 확인되었습니다. .

프로젝트 설정

create-react-app을 사용하여 React 앱을 생성한 다음 종속 항목을 설치하는 것으로 시작합니다.

npx create-react-app react-bulma-components-example

새 프로젝트 디렉터리로 변경합니다.

cd react-bulma-components-example

이제 React 애플리케이션을 실행할 수 있습니다.

npm start

프로젝트의 오류나 문제를 수정하십시오. 그리고 웹 브라우저에서 localhost:3000을 방문하십시오.

작동하는 React 애플리케이션이 있으면 react-bulma-components 추가를 시작할 수 있습니다.

npm install react-bulma-components@4.0.4

이 시점에서 react-bulma-components가 있는 새로운 React 프로젝트가 있습니다.

요소 및 구성 요소 탐색

react-bulma-components 라이브러리는 Bulma 요소, 구성 요소, 양식 및 레이아웃을 지원합니다.

Button 구성 요소를 사용하는 예를 고려하십시오. 먼저 Bulma 스타일시트를 가져와야 합니다. 그런 다음 구성 요소를 가져와야 합니다.

import 'bulma/css/bulma.min.css';
import { Button } from 'react-bulma-components';

function App() {
  return (
    <div className="App">
      <Button>Example</Button>
    </div>
  );
}

export default App;

이렇게 하면 Bulma 스타일의 버튼이 생성됩니다.

참고: 이전 버전의 react-bulma-components에서는 구성 요소의 full 및 lib 특정 버전을 지정할 수 있었습니다. 이는 Bulma가 피어 종속성으로 변경되고 이제 스타일시트를 가져와야 하는 버전 4.0에서 변경되었습니다.

대부분의 CSS 프레임워크와 마찬가지로 Bulma는 공통 구성 요소에 대한 스타일과 요소에 다른 클래스를 추가하여 수행할 수 있는 일련의 사용자 지정을 제공합니다.

react-bulma-components는 각 주요 요소에 대한 구성 요소를 제공하여 작업을 더욱 단순화하고 구성 요소에 속성을 전달하기 위해 클래스 이름을 저글링할 필요가 없습니다.

모서리가 둥글고 윤곽선이 있는 danger 색상을 사용하는 큰 버튼을 만들고 싶습니까?

<Button
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

모든 react-bulma-components는 renderAs 속성을 허용할 수 있으며 이를 통해 구성 요소를 렌더링하는 데 어떤 종류의 요소를 사용해야 하는지 정의할 수 있습니다.

기본적으로 Button 구성 요소는 button 요소로 렌더링됩니다. renderAs 속성을 사용하여 링크로 렌더링합니다.

renderAs 속성과 함께 href를 포함하여 사람들이 링크를 클릭할 때 보낼 위치를 알려줘야 합니다.

<Button
  renderAs="a"
  href="https://www.example.com"
  color="danger"
  size="large"
  rounded
  outlined
>
  Example
</Button>

사실, 우리의 모든 Bulma 구성 요소는 당신이 던질 수 있는 모든 속성을 받아들일 수 있습니다. 즉, 항상 style 속성을 사용하여 일부 고급 스타일을 지정하거나 className을 사용하여 추가 CSS 클래스를 추가할 수 있습니다.

className을 사용할 때 제공하는 모든 클래스는 Bulma 클래스 이름의 라이브러리 생성 목록 앞에 추가됩니다.

그림 물감

대부분의 최신 CSS 프레임워크와 유사하게 Bulma는 일부 시맨틱 명명 규칙을 사용하는 색상 테마와 함께 제공됩니다.

이러한 테마 색상에는 기본, 링크, 정보, 성공, 경고 및 위험.

또한 검은색, 어두운, 밝은 및 흰색과 같은 실제 색상도 사용할 수 있습니다.

색상을 지원하는 구성 요소는 color 속성을 허용합니다.

<Button color="success">Example</Button>

렌더링된 요소에 올바른 색상 클래스를 할당합니다. 이 색상 속성은 렌더링된 요소에 클래스를 다시 할당하기 때문에 임의의 색상 값을 할당할 수 없습니다.

크기

여러 구성 요소가 크기 속성을 허용하지만 서로 다른 유형의 값을 허용할 수 있습니다.

일부 구성 요소(예: 제목)가 숫자 값을 사용하기 때문입니다.

<Heading size={1}>Large Heading</Heading>
<Heading size={2}>Not So Large Heading</Heading>

다른 것(예: 버튼)은 크기에 텍스트 이름을 사용합니다.

<Button size="large">Large Button</Button>
<Button size="small">Small Button</Button>

텍스트 크기를 허용하는 구성 요소의 경우 소형, 보통, 중간 및 대형을 사용할 수 있습니다. 일반 크기는 크기가 지정되지 않은 경우 기본적으로 사용되는 크기입니다.

그리드 시스템 사용

Bulma는 또한 콘텐츠를 일관된 방식으로 배치하는 데 도움이 되는 그리드 시스템을 지원합니다. 기본적으로 Bulma는 백분율 또는 열 수를 사용하는 12열 레이아웃을 사용합니다.

먼저 구성 요소를 가져와야 합니다.

import { Columns } from 'react-bulma-components';

12열 레이아웃을 기반으로 하는 크기의 경우 크기를 1과 12 사이의 숫자 값으로 설정합니다.

<Columns>
  <Columns.Column size={1}>One</Columns.Column>
  <Columns.Column>Eleven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={2}>Two</Columns.Column>
  <Columns.Column>Ten</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={3}>Three</Columns.Column>
  <Columns.Column>Nine</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={4}>Four</Columns.Column>
  <Columns.Column>Eight</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={5}>Five</Columns.Column>
  <Columns.Column>Seven</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={6}>Six</Columns.Column>
  <Columns.Column>Six</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={7}>Seven</Columns.Column>
  <Columns.Column>Five</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={8}>Eight</Columns.Column>
  <Columns.Column>Four</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={9}>Nine</Columns.Column>
  <Columns.Column>Three</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={10}>Ten</Columns.Column>
  <Columns.Column>Two</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size={11}>Eleven</Columns.Column>
  <Columns.Column>One</Columns.Column>
</Columns>

백분율 기반 크기 조정의 경우 크기를 1/5, 1/4, 1/3로 설정할 수 있습니다. 코드>, 절반, 2/3 또는 3/4:

<Columns>
  <Columns.Column size="one-fifth">20%</Columns.Column>
  <Columns.Column>80%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-quarter">25%</Columns.Column>
  <Columns.Column>75%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="one-third">33.333333333%</Columns.Column>
  <Columns.Column>66.666666667%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="half">50%</Columns.Column>
  <Columns.Column>Also 50%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="two-thirds">66.666666667%</Columns.Column>
  <Columns.Column>33.333333333%</Columns.Column>
</Columns>

<Columns>
  <Columns.Column size="three-quarters">75%</Columns.Column>
  <Columns.Column>25%</Columns.Column>
</Columns>

그리드 시스템에 대한 이 두 가지 접근 방식은 각각 최대 12개 열 또는 100%를 합산합니다.

결론

이 기사에서는 react-bulma-components를 사용하여 Bulma의 일부 기능을 탐색했습니다.

잘 지원되고 잘 관리되는 CSS 프레임워크를 사용하면 프로젝트의 스타일을 지정하고 디자인할 수 있습니다. 시간을 효율적으로 절약할 수 있습니다.

추가 정보는 Bulma 설명서를 참조하십시오.