Django Bulma 적용 방법

Back-End/Django

Django Bulma 적용 방법

Vicapor 2021. 8. 24. 00:15

Django에서 Bulma를 적용하는 방법에 대해서 소개하려고 한다.

Bulma는 Bootstrap대신 쓸 수 있는 디자인 기능이다. 개인적인 생각으로는 좀 더 이쁜 것 같다.

Bulma: Free, open source, and modern CSS framework based on Flexbox

Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.

bulma.io

자세한 내용은 여기서 확인 할 수 있다.

설치 방법은 CDM을 사용하여 사용할 수 있으나 Customize하기를 원하므로 Customize 방법으로 적어보도록 하겠다.

총 3가지 방법을 소개하고 있는데 그중 With node-sass 방법으로 진행해보도록 하겠다.

원문이 보고 싶다면

https://bulma.io/documentation/customize/with-node-sass/

1.폴더 생성, 시작

django static폴더에 mybulma라는 폴더를 만들고 폴더로 이동해준다.

cd static
mkdir mybulma
cd mybulma
npm init

입력하면 여러가지를 입력하라고 나오는데 전부 enter만 눌러주고 entry point가 나왔을 때 sass/mystyles.scss

을 입력해주자.

그러면 mybulma 폴더 안에 package.json 가 생긴 것을 확인 할 수 있다.

2. 필요 모듈 설치

필요 모듈 설치해준다.

npm install node-sass --save-dev
npm install bulma --save-dev

3. SCSS파일 생성

sass폴더를 만들어주고 안에다가 mystyles.scss 파일을 만들어준다.

static/mybulma/sass/mystyles.scss

@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";

테스트할 html 파일에 다음 내용을 적는다.

templates/test.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My custom Bulma website</title>
    <link rel="stylesheet" href="{% static 'css/mystyles.css' %}">
  </head>
  <body>
     <h1 class="title">
        Bulma
      </h1>

      <p class="subtitle">
        Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
      </p>

      <div class="field">
        <div class="control">
          <input class="input" type="text" placeholder="Input">
        </div>
      </div>

      <div class="field">
        <p class="control">
          <span class="select">
            <select>
              <option>Select dropdown</option>
            </select>
          </span>
        </p>
      </div>

      <div class="buttons">
        <a class="button is-primary">Primary</a>
        <a class="button is-link">Link</a>
      </div>
  </body>
</html>

지금은 html 파일을 실행해보면 오류가 날 것이다.

아까 생성된 package.json 파일에 다음 코드를 수정해주자.

4. JSON파일 수정

package.json

"scripts": {
  "css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
  "css-watch": "npm run css-build -- --watch",
  "start": "npm run css-watch"
}

5. CSS-BUILD

터미널에 다음과 같이 입력해주자

npm run css-build

Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyles.css

여기까지 하면 기본 bulma setting은 완료되었다. html 페이지를 확인해보면 적용된 것을 볼 수 있다.

추가) Customize

다음 패키지들을 설치해주자.

pip install libsass django-compressor django-sass-processor

settings.py에 다음과 같이 추가한다.

myproject/settings.py

INSTALLED_APPS = [
    ...
    'sass_processor',
    ...
]
SASS_PROCESSOR_ENABLED = True
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR, 폴더명(있을 경우), 'static')
SASS_PROCESSOR_ROOT = os.path.join(BASE_DIR,'static') # 없으면
# SASS_OUTPUT_STYLE = 'compact' # 추가 사항 
# SASS_PRECISION = 8 # 부트스트랩 sass일 경우

html에 다음과 같이 적어주자.

{% load sass_tags %}

<link href="{% sass_src 'mybulma/sass/mystyles.scss' %}" rel="stylesheet" type="text/css" />

Customize 준비가 완료되었다.

setting은 끝났으니 직접 사용해보자.

mystyles.scss 내용을 다음과 같이 바꿔주자.

mybulma/sass/mystyles.scss

@charset "utf-8";

// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');

// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;

// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;

// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;

// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/form/_all.sass";
@import "../node_modules/bulma/sass/components/navbar.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";

이제 기존 mystyles.css와 mystyles.scss를 Mapping 시켜줘야한다.