bulma css framework

bulma에 대한 간단한 소개는 지난 글을 참고해 주시기 바랍니다. 이번에는 bulma를 어떻게 가져다 쓸 수 있는지 방법을 알아 보겠습니다. 이 글은 Bulma Documentation을 참고하여 작성하고 있습니다.

먼저 bulma는 mobile-first(모바일 우선)을 기준으로 작성된 css 프레임워크입니다. 그래서 html 문서에서 가장 먼저 아래와 같은 내용들이 선언되어 있어야합니다.

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1">

우선 doctype html을 통해 html5 문서라는 것을 선언해주고, meta 태그의 viewport 속성을 정의해 주어야합니다. 이 부분이 정의 되어있지 않으면, 모바일에서 봤을때 적절한 크기로 표시되지 않는 문제가 발생하기 때문에 반드시 정의해줘야하는 부분입니다.


Bulma는 크게 3가지 방법으로 사용할 수 있습니다.

먼저 가장 편리한 방법인 CDN을 이용하는 방법은 그냥 제공되는 주소 ( \https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css )만 긁어서 삽입하는 방식입니다. 바로 아래 예시처럼 바로 사용할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>

    <!-- 이 부분이 바로 css가 삽입되는 부분입니다. --!>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">    
    <!-- 이 부분이 바로 css가 삽입되는 부분입니다. --!>

  </head>
  <body>
<section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
        My first website with <strong>Bulma</strong>!
      </p>
    </div>
  </section>
  </body>
</html>

위의 예시처럼 link 태그를 이용해서 jsdelivr CDN을 통해 배포되는 CSS 파일을 링크해서 써주는 방식이 가장 편리합니다. 하지만 일단 외부 사이트에서 끌어오는 관계로 추천하고 싶은 방식은 아닙니다.

기본적으로 bulma에서 추천하는 npm을 이용한 다운로드 방식을 이용하려면 우선 node.js를 별도로 설치해줘야합니다. 아래 링크를 통해 다운로드 받아 node.js를 설치해주면 됩니다.
node.js 다운로드 – https://nodejs.org/ko/download/

그리고 html을 작성해야할 곳에 가서 아래 명령어를 입력하면 설치가 됩니다.

npm install bulma

그러면 명령을 실행한 곳에 node_modules라는 폴더가 생성되고 그 안에 bulma가 설치되게 됩니다.

하지만 우린 이런 방식으로 설치한다고 한들 바로 사용하기에는 조금 복잡합니다. link를 걸어줄때 경로가 “../node_modules/bulma/bulma.min.css” 이런식이 될 것인데, 웹에 바로 올릴 경우 node_modules를 설치해서 호출하는 방식을 사용하지 않고, 별도로 추출한 css파일을 사용하는 것이 일반적이기 때문입니다.

bulma에서는 이런 부분조차도 간소하게 바로 쓸 수 있도록 bulma-start라는 방법을 제공하고 있습니다.
https://bulma.io/bulma-start/

bulma-start를 활용하면 sass 컴파일링, postcss와 autoprefixer를 이용해 구형 브라우저를 지원해주는 부분을 자동으로 작성해주고, babel을 이용해 es6 자바스크립트를 es5로 전환해주는 부분도 자동으로 처리해주는 스크립트를 미리 준비되어있습니다.

bulma를 적용하고 싶은 폴더로 이동해서, 먼저 다운로드 받은 bulma-start 압축파일을 풀고, 아래 명령어를 입력하면 됩니다.

npm install
npm start

그러면 package.json에 들어있는 의존성 패키지들을 설치하고, 그 패키지들을 활용하여 sass 파일과 js파일이 변화할때마다 감지하여 자동으로 변환해주는 작업이 시작됩니다.

최종적으로 모든 작업이 완료되고 추출할때는 npm deploy 명령으로 css파일과 js파일을 얻어 웹에 올려서 사용하면 됩니다.