iDev

How to add Material Bootstrap design to Meteor

KraZYeom 2015. 1. 12. 04:00
반응형

How to add Material Bootstrap design to Meteor

미티어에 메타리얼 부트스트랩 디자인을 적용하는 방법을 알아보겠습니다.

Create Example application

우선 간단하게 예제 앱을 하나 만듭니다.

$ meteor create material
material: created.

To run your new app:
  cd material
  meteor

Material Bootstrap Design

트위터의 부트스트랩 디자인에 메타리얼을 적용한 패키지가 있습니다.

https://github.com/FezVrasta/bootstrap-material-design

How to install

미티어에서는 간단하게 아래 명령어로 패키지를 설치할 수 있습니다. 설치가 되면 간단한 설명글이 나타납니다.

$ meteor add fezvrasta:bootstrap-material-design

Changes to your project's package version selections:

fezvrasta:bootstrap-material-design  added, version 0.2.1
twbs:bootstrap                       added, version 3.3.1


fezvrasta:bootstrap-material-design: FezVrasta's Bootstrap theme implementing Google's Material (Paper) Design

Example

메타리얼 부트스트랩 예제는 아래에서 참고하면 됩니다.

http://fezvrasta.github.io/bootstrap-material-design/
http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html

Button

일단 간단하게 버튼을 예제 파일로 만들어진 material.html 에 추가하도록 하겠습니다.

<h1 class="header">Button</h1>
<div class="sample1">
  <h2>Normal buttons</h2>
  <button class="btn btn-default">Button</button>
  <button class="btn btn-primary">Colored</button>
  <button class="btn btn-default" disabled="">Disabled</button>
  <button class="btn btn-default btn-link">Noink</button>
</div>
<div class="sample1">
  <h2>Flat buttons</h2>
  <button class="btn btn-default btn-flat">Button</button>
  <button class="btn btn-primary btn-flat">Colored</button>
  <button class="btn btn-default btn-flat" disabled="">Disabled</button>
  <button class="btn btn-default btn-flat btn-link">Noink</button>
</div>
<div class="sample2">
  <h2>Raised buttons</h2>
  <button class="btn btn-default btn-raised">Button</button>
  <button class="btn btn-primary btn-raised">Colored</button>
  <button class="btn btn-default btn-raised" disabled="">Disabled</button>
  <button class="btn btn-default btn-raised btn-link">Noink</button>
</div>
<div class="sample3">
  <h2>Custom button content</h2>
  <button class="btn btn-primary btn-flat"><i class="mdi-navigation-check"></i> Ok</button>
  <button class="btn btn-default btn-flat"><i class="mdi-navigation-close"></i> Cancel</button>
</div>

<style>
  #button h2 {
    padding: 14px;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
  }
</style>

메타리얼 디자인이 적용되었습니다. 그림자 효과가 있고 클릭을 하면 물결 효과까지 동작합니다.

Checkbox

버튼과 마찬가지로 체크박스 테그를 적용합니다.

<h1 class="header">Checkbox</h1>

<!-- Simple checkbox with label -->
<div class="sample1">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Notifications
    </label>
  </div>
  <p class="hint">Notify me about updates to apps or games that I've downloaded</p>
</div>

<!-- Simple checkbox with label, checked -->
<div class="sample1">
  <div class="checkbox">
    <label>
      <input type="checkbox" checked=""> Auto-updates
    </label>
  </div>
  <p class="hint">Auto-update apps over wifi only</p>
</div>

<!-- Simple checkbox with label -->
<div class="sample1">
  <div class="checkbox">
    <label>
      <input type="checkbox"> Clear search history
    </label>
  </div>
  <p class="hint">Remove all the searches you have ever performed</p>
</div>

<h2>Sound</h2>

<!-- Checkboxes with labels on the left -->
<div class="sample2">
  <div class="text">Touch sounds</div>
  <div class="checkbox checkbox-primary">
    <label>
      <input type="checkbox" checked="">
    </label>
  </div>
</div>
<div class="sample2">
  <div class="text">Screen lock sound</div>
  <div class="checkbox checkbox-primary">
    <label>
      <input type="checkbox">
    </label>
  </div>
</div>
<div class="sample2">
  <div class="text">Vibrate on touch</div>
  <div class="checkbox checkbox-primary">
    <label>
      <input type="checkbox">
    </label>
  </div>
</div>

<!-- Custom page style -->
<style>
  #checkbox .sample1 label {
    font-weight: bold;
  }
  #checkbox .hint {
    padding-left: 45px;
    padding-top: 20px;
    font-weight: 400;
  }
  #checkbox .sample1 {
    padding-bottom: 20px;
  }

  #checkbox h2 {
    font-size: 18.7199993133545px;
    font-weight: bold;
    margin-bottom: 30px;
  }

  #checkbox .sample2 {
    width: 300px;
    clear: both;
    font-weight: 400;
  }

  #checkbox .sample2 .text {
    padding: 10px 0;
    display: inline-block;
  }
  #checkbox .sample2 .checkbox {
    float: right;
  }
</style>

하지만 체크박스가 제대로 안나옵니다.

Issue


이슈를 해결하기 위해서 다시 README 파일을 꼼꼼하게 읽다보면 test.html 에서 css, js를 추가하라고 적혀있습니다.
그리고 도큐먼트가 다 읽어진 상태에 $.material.init() 를 하라고 나와있습니다.

https://github.com/FezVrasta/bootstrap-material-design#getting-started

Navigate to the dist/ folder in this repository, and you will see the test.html file, which has the CSS include statements, in the head section and the JS includes just before body section closes. You need to copy the dist/ folder to the root of your project, ensuring that all the files in your project can access the files through the relative URL, supplied in the CSS and the JS includes.

https://github.com/FezVrasta/bootstrap-material-design/blob/master/dist/test.html

...
<script>
  $(document).ready(function() {
    $.material.init();
  });
</script>
...

How to Solve it

Template.*.rendered에 위의 코드를 추가해야합니다.

...
if (Meteor.isClient) {
  Template.body.rendered = function () {
    $(function() {
      $.material.init();
    });
  };
}
...


코드를 적용하고 나서 다시 페이지를 확인하면 그림처럼 제대로 체크박스가 나오는 것을 확인할 수 있습니다.

$.material.init()가 호출되면 ripple.js가 checkbox 등에 추가적으로 html 테그를 추가하는 것을 코드를 까면 나옵니다.

반응형