블로그 이미지
윤영식
Full Stacker, Application Architecter, KnowHow Dispenser and Bike Rider

Publication

06-07 05:53

Recent Comment

2013. 9. 27. 20:03 My Services/Smart Visualization

AngularJS Framework기반 SPA 프로젝트를 Yeoman으로 시작하면 기본 CSS Framework로 Twitter Bootstrap v2.3.2 기반으로 index.html 에 설정이 된 것을 AngularJS 기반 SPA 스타일로 간단히 고쳐 보았다. 좀 더 다양한 아이콘과 확장기능을 사용하기 위하여 CSS Framework들을 검토해 보아야 하고, Smart Visualization은 Bootflat을 확장판을 사용토록 한다



1. Bootflat

  - http://www.flathemes.com/

  - Bootstrap v3.0 을 기본으로 한 확장판이다 

  - Bootstrap css 파일과 확장된 css를 링크하므로 Bootstrap에서 모자란 부분을 보완할 수 있다

  - Bootflat을 다운로드 파일의 내부 디렉토리 구조

    + bootstrap은 v3.0 

    + js : jquery, bootstrap, IE에서 html5 지원 Html5shivRWD를 위한 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">


// 브라우져에서 테스트 -> 정상 




posted by peter yun 윤영식
prev 1 2 3 4 5 6 next