AngularJS Framework기반 SPA 프로젝트를 Yeoman으로 시작하면 기본 CSS Framework로 Twitter Bootstrap v2.3.2 기반으로 index.html 에 설정이 된 것을 AngularJS 기반 SPA 스타일로 간단히 고쳐 보았다. 좀 더 다양한 아이콘과 확장기능을 사용하기 위하여 CSS Framework들을 검토해 보아야 하고, Smart Visualization은 Bootflat을 확장판을 사용토록 한다
1. Bootflat
- Bootstrap v3.0 을 기본으로 한 확장판이다
- Bootstrap css 파일과 확장된 css를 링크하므로 Bootstrap에서 모자란 부분을 보완할 수 있다
- Bootflat을 다운로드 파일의 내부 디렉토리 구조
+ bootstrap은 v3.0
+ js : jquery, bootstrap, IE에서 html5 지원 Html5shiv, RWD를 위한 Respond, 체크박스 확장 iCheck
+ fonts : icon과 font 확장을 위한 FontAwesome
+ 그외 Bootflat을 위한 확장 .css 파일들
bootstrap/
├── bootstrap/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── css/
│ ├── bootflat.css
│ ├── bootflat-extensions.css
│ ├── bootflat-square.css
│ ├── font-awesome.min.css
├── js/
│ ├── jquery-1.10.1.min.js
│ ├── html5shiv.js
│ ├── respond.min.js
│ ├── bootstrap.js
│ ├── bootstrap.min.js
│ ├── jquery.icheck.js
├── fonts/
│ ├── FontAwesome.otf
│ ├── fontawesome-webfont.eot
│ ├── fontawesome-webfont.svg
│ ├── fontawesome-webfont.ttf
│ ├── fontawesome-webfont.woff
└── img/
└── check_flat/ └── default.png
- Bootflat 시작을 위한 index.html
+ CSS : bootstrap -> font-awesome -> bootflat 순으로 설정
+ JS : jquery -> bootstrap 순으로 설정
<!DOCTYPE html>
<html>
<head>
<title>Bootflat Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/bootflat.css" rel="stylesheet" media="screen">
<link href="css/bootflat-extensions.css" rel="stylesheet" media="screen">
<link href="css/bootflat-square.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
2. Smart Visualization 프로젝트에 포팅하기
- Yeoman으로 생성된 프로젝트의 Bootstrap 버전은 2.3.2 이다
- 기존 SPA를 위하여 설치된 모듈 목록은 bower 명령으로 확인한다
+ bootstrap-sass 버전 충돌
+ jquery 버전 충돌
+ es5-shim : ECMAScript5 지원
$ bower list
SmartVisualization#0.0.0 /Users/prototyping/SmartVisualization
├── angular#1.0.8 (latest is 1.2.0-rc.2)
.. 중략 ..
├─┬ angular-scenario#1.0.8 (latest is 1.2.0-rc.2)
│ └── angular#1.0.8
├─┬ bootstrap-sass#2.3.2 (latest is 3.0.0)
│ └── jquery#1.9.1 (2.0.3 available)
├── es5-shim#2.0.12 (latest is 2.1.0)
├── jquery#1.9.1 (latest is 2.0.3)
└── json3#3.2.5
- Bootstrap 업그레이드 하기
+ bower를 통하여 업그레이드 하기 : app/bower_components/ 밑으로 설치됨 (.bowerrc 파일에서 위치 변경가능)
// bower.json에 기록하고 물리적 파일 설치
$ bower install bootstrap --save
bower bootstrap#* cached git://github.com/twbs/bootstrap.git#3.0.0
// bower.json에 기록된 내용과 물리적 파일 삭제
$ bower uninstall bootstrap-sass --save
bower uninstall bootstrap-sass
$ bower list
.. 중략...
├─┬ bootstrap#3.0.0
│ └── jquery#1.9.1 (2.0.3 available)
+ app/index.html 파일 리팩토링
// CSS
기존
<link rel="stylesheet" href="styles/bootstrap.css">
변경
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
// JS
기존
<script src="bower_components/bootstrap-sass/js/bootstrap-affix.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-alert.js"></script>
.. 중략 ..
<script src="bower_components/bootstrap-sass/js/bootstrap-collapse.js"></script>
<script src="bower_components/bootstrap-sass/js/bootstrap-tab.js"></script>
변경 : 필요한 모듈만 설정원하면 기존과 같이 bower_components/bootstrap/js/* 안에서 선택한다
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js">
+ 브라우져에서 정상여부 확인하기
$ grunt server
// 브라우져에서 Eye Check 수행
Bootstrap v3.0 으로 가면서 Bootstrap v2.3.x에서 사용한 CSS class 값이 없기 때문에 비정상적으로 나온다
+ Bootstrap v3.0 스타일로 index.html의 RWD Header Menu 리팩토링
// Bootply에서 Bootstrap v3.0에 맞게 redesign 한 후 copy 한다
// 기존 : v2.3.x
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" href="#">Smart Visualization</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">MovingAverage</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
// 변경 : v3.0.0
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Smart Visualization</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">MovingAverage</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
// 브라우져 확인 결과 정상적으로 나옴
- Font-Awesome 설치하기
// font awesome 설치
$ bower install font-awesome --save
bower font-awesome#* cached git://github.com/FortAwesome/Font-Awesome.git#3.2.1
bower font-awesome#* validate 3.2.1 against git://github.com/FortAwesome/Font-Awesome.git#*
// index.html에 font-awesome 설정 추가
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="screen">
// 브라우져에서 확인 -> 정상
- jQuery v1.9.1 에서 v1.10.1로 업그레이드 하기
// 기존 uninstall
$ bower uninstall jquery --save
bower conflict bootstrap depends on jquery
[?] Continue anyway? Yes
bower uninstall jquery
// 변경 install : 버전 명시
$ bower install jquery#1.10.1 --save
bower jquery#>= 1.9.0 cached git://github.com/components/jquery.git#2.0.3
bower jquery#>= 1.9.0 validate 2.0.3 against git://github.com/components/jquery.git#>= 1.9.0
bower jquery#1.10.1 cached git://github.com/components/jquery.git#1.10.1
bower jquery#1.10.1 validate 1.10.1 against git://github.com/components/jquery.git#1.10.1
bower jquery#1.10.1 install jquery#1.10.1
jquery#1.10.1 app/bower_components/jquery
// 브라우져에서 확인 -> 정상
- jQuery iCheck 설치
$ bower install jquery-icheck --save
// index.html에 추가 설정
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/jquery-icheck/jquery.icheck.min.js"></script>
- bootflat관련 css 파일 복사
기존에 존재하던 bootstrap.css 파일은 삭제한다
// index.html에 css 설정
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link href="bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="styles/bootflat.css" rel="stylesheet" media="screen">
<link href="styles/bootflat-extensions.css" rel="stylesheet" media="screen">
<link href="styles/bootflat-square.css" rel="stylesheet" media="screen">
<link rel="stylesheet" href="styles/main.css">
// 브라우져에서 테스트 -> 정상
'My Services > Smart Visualization' 카테고리의 다른 글
| [Service Design] Product, Flat 그리고 Service 디자인에 대한 생각 (0) | 2013.10.05 |
|---|---|
| [Smart Visualization] 서비스 디자인 - 5 (0) | 2013.09.30 |
| [Smart Visualization] AngularJS Framework 시작하기 - 3 (0) | 2013.09.25 |
| [Smart Visualization] Yeoman통하여 SPA 시작하기 - 2 (0) | 2013.09.25 |
| [Smart Visualization] SPA 파일럿 시작하며 - 1 (0) | 2013.09.24 |