Django Bulma 적용 방법

Vicapor 2021. 8. 24. 00:15

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 시켜줘야한다.

'Back-End > Django' 카테고리의 다른 글

Django ORM (0)	2021.10.21
Django iamport 적용하기 (0)	2021.10.06
Django template 태그 모음 (0)	2021.08.12
Django Admin Custom 3(간단한 Custom 연습) (0)	2021.08.09
Django Admin Custom 2(templates 구조 분석) (0)	2021.08.09

A Full Stack Develpor