Meteor + Material Design Light
2014년 구글에서 모바일에 적용 가능한 Material Design 가이드를 내놓고, 1년이 지난 오늘 웹에서 사용할 수 있는 Material Deisign Lite(MDL)를 공식적으로 릴리즈 했습니다.
MDL은 웹 개발자들이 많이 사용하는 부트스트랩과 동일한 놈입니다. 브라우저 지원은 IE 10부터 제대로 지원하고, 9는 몇가지 기능이 빠지고 지원합니다. IE 8은 지원 예외 대상입니다.
자세한 설명은 놔두고 Meteor에 MDL를 적용하는 방법을 알려드리겠습니다. 참조
Today, Google release Material Design Lite(MDL) for the Web page. I wrote the simple tutorial to add MDL to Meteor. you should read the detail of Material Deisign Lite(MDL).
Add MDL to Meteor
- 템플릿 프로젝트를 생성합니다. 그리고 생성된 디렉토리로 이동합니다.
- Create template Meteor project. and move to the directory.
meteor create HelloMaterialDesignLite
cd HelloMaterialDesignLite
- .bowerrc 파일을 생성합니다. 그리고 아래 내용을 추가합니다.
- Make .bowerrc file. and add below code to the file.
{
"directory": "public/components/"
}
- bower로 material-design-lite를 로컬에 다운로드 받습니다.
- download material-design-lite package files to local by below command.
bower install material-design-lite --save
meteor create HelloMaterialDesignLite
cd HelloMaterialDesignLite{
"directory": "public/components/"
}bower install material-design-lite --save/public/components 에 material-design-lite 가 다운로드 된 것을 확인할 수 있습니다.
you can check that is downloaded to /public/components directory.
- HelloMaterialDesignLite.html 파일에 헤더 부분에 아래내용을 추가를 합니다.
- Add below code in HelloMaterialDesignLite.html
<head>
<title>HelloMaterialDesignLite</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<script src="/components/material-design-lite/material.js"></script>
<link href="/components/material-design-lite/material.css" rel="stylesheet" type="text/css">
</head>그리고 아래와 같이 button에 MDL class를 적용하면 아래 그림 처럼 버튼에 매터리얼 디자인이 적용되고, 버튼을 클릭하면 물결효과 (Ripple)가 애니메이션이 동작하는 것을 확인할 수 있습니다.
Add below code in HelloMaterialDesignLite.html, if you click the button, you check the ripple effect on the button.
<template name="hello">
<!-- Accent-colored raised button with ripple -->
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect">Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template> |  |
매터리얼 디자인 라이트 공식 페이지에 가면 시작 하는 방법, 템플릿과 다양한 콤포넌트 사용방법이 있습니다. :]
There are Getting Started, Template and Components in Material Deisign Lite(MDL).
- 조만간 능력자 개발자가 package로 등록할 것 같습니다. 그때는 더 쉽게 설치할 수 있습니다.
'iDev' 카테고리의 다른 글
| 아마존 데쉬 버튼 간단 개봉기 (0) | 2015.08.29 |
|---|---|
| App Transport Security Problem on iOS 9 (0) | 2015.08.09 |
| 터미널에서 현재 디렉토리를 클립보드로 복사하기 (0) | 2015.06.07 |
| AWS에서 Meteor 실행시 mongo exit code 1 해결방법 (0) | 2015.06.07 |
| How to add Material Bootstrap design to Meteor (0) | 2015.01.12 |