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

Publication

Statistics Graph

Recent Comment

2013.11.28 09:32 HTML5, CSS3/CSS

Bootstrap은 CSS Framework으로 프리젠테이션을 담당하고 jQuery UI 와 Angular.js는 자체 컨트롤도 가지고 있지만 DOM 핸들링을 한다. 만일 서비스를 만드는데 Bootstrap + jQuery UI 조합일 때 또는 Bootstrap + Angular.js 조합일 때 그리고 Bootstrap + jQuery UI + Angular.js 조합 일때 프리젠테이션을 통합하는 방법은 어떤 것들이 있을까? 각 조합에 대해 어떻게 사용할지 알아보자.



1. Twitter Bootstrap 만 사용할 경우 

  - 부트스트랩만 놓고 보면 CSS Framework으로써 기본적인 Fluid Layout 형태와 기본 HTML 컨트롤의 모양을 정의하고 있다

    또한 JavaScript 기반 다양한 component들도 포함한다 

  - 부트스트랩의 CSS 부분을 향상시키고 extra component를 추가한 부분 변경모델은 Bootflat, Bootplus, FlatStrap, LeapStrap

  - 또는 다양한 완성체 템플릿을 startBootstrap같은 곳에서 만들어 제공도 한다 

    



2. Twitter Bootstrap + jQuery UI  함께 사용할 경우 (이제 없어졌다)

  - 문제는 여기서 부터 시작한다 

  - Bootstrap의 CSS 스타일이 존재하고 jQuery UI 도 자체 theme을 CSS로 정의하고 있다

  - Boottrap의 CSS를 jQuery UI에 접목하여 사용할 경우는 jQuery UI Widgets 에 대해서 Bootstrap theme을 입힌 것을 사용한다

    http://addyosmani.github.io/jquery-ui-bootstrap/

    



3. Twitter Bootstrap + Angular.js 함께 사용할 경우

  - Angular에 JavaScript component를 포팅하기 위하여 Directive로 감싸야하는 문제가 있다

  - jQuery UI와 Bootstrap theme을 결합하였다면 Angular.js 와 Bootstrap theme 을 결합하고 있다

  - 하지만 이것은 Bootstrap v2.3.* 버전의 component를 Angular.js Directive로 구현하는 것이다

    http://angular-ui.github.io/bootstrap/

    



4. Twitter Bootstrap + jQuery UI + Angular.js 함께 사용할 경우 

  - 해당 형태는 3번의 연장선으로 보면 된다 

  - Twitter Bootstrap의 javascript component를 Angular.js Directive화 하였듯, jQuery UI component들도 Directive화 한것이다 

    http://angular-ui.github.io/

     

   - 소스 : https://github.com/angular-ui/


기존의 JavaScript Component를 처리하려면 Directive화 과정을 거쳐야 하는데 이런 번거로운 과정을 해소하고자 Bootstrap의 JavaScript Component를 Directive로 만들어 놓은 Angular UI Bootstrap이 나왔다. jQuery UI를 지원하기 위하여 Angular UI 에 상당부분 즐겨 사용하는 JavaScript Component를 포함시켰으나 이 또한 jQuery UI의 모든 것을 커버하고 있지는 못하다. 


이래저래 문제되는 것은 Angular.js를 기반으로 개발할 때 UI를 담당하는 JavaScript Component를 Angular.js의 Directive화를 잘 해야 한다는 것이다. 



<참조>

  - Bootstrap ToolBox : 다양한 UI 컴포넌트들 

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식
2013.11.27 14:37 HTML5, CSS3/CSS

개발자들이 서비스를 만들면서 어렵게 여기는 부분이 디자인이다. 특히 웹 서비스를 만들라 치면 어디서 부터 시작해야 할지 난감할 때가 있는데 이를 해소하고자 CSS Framework를 오픈소스로 제공하는 업체들이 늘어나고 있다. 가장 유명한 Twitter Bootstrap 부터 Pure까지 그 종류도 많은데 어떤 것들이 있는지 정리해 본다. 정리하면서 느끼는 것은 Bootstrap을 확장한 framework인 Bootflat, Maxmertkit같은 것이 좀 더 다양한 느낌의 모듈을 제공하고, Metro UI스타일의 Flat 디자인을 언젠가 꼭 써보고 싶다. 그리고 GroundWork, Foundation, Pure 도 테스트해 볼 필요가 있겠다. 그외의 웹 모듈은 선택한 CSS Framework에 Add할 수 있는지 확인 후 쓰면 되겠다 



Twitter Bootstrap

  - http://getbootstrap.com/

  - CSS 화면 레이아웃과 스타일 제공

  - 화면 구성을 위한 jQuery 접목된 JavaScript 컴포넌트 제공 

  - RWD (반응형 웹디자인) 제공 : RWD 25개 도구들

  - 다양한 곳에서 많이 사용하나 개인적으로 색감이 이젠 식상할 때가 된 듯함

  - Bootstrap 확장 툴박스들 소개  그외 정리한 툴들 (강추)

  - OpenTutorial 동영상으로 배우기

  - Bootstrap v3 으로 화면 만들기

  - 다양한 도구와 컴포넌트 목록 *강추

  - BootStrap Theme 바꾸는 방법




Semantic UI

  - http://semantic-ui.com/

  - Bootstrap같은 기계적인 용어보단 인간친화적인 CSS Class 명칭

  - 좀 더 상업적인 UI 제작에 필요한 다양한 웹 모듈 제공

  - 개인적으로 인간친화적인 따뜻한 색감을 좋아함




Zurb Foundation 

  - http://foundation.zurb.com/

  - 다양한 화면 레이아웃 템플릿 제공으로 빠른 포로토타입핑 가능

  - RWD 제공

  - 웹서비스 페이지 만들기 적합




BootSnipp

  - http://bootsnipp.com/

  - Bootstrap에서 사용하는 코드 템플릿 제공

  - 다른 Template 리소스 사이트들



Start Bootstrap Template

  - http://startbootstrap.com/

  - template을 가지고 시작해 보자 

  - BootPlus에서도 제공함 

  - CodeStrap 또 다른 변형

  - http://bootswatch.com/ 에서는 다양한 Theme 색감의 bootstrap 선택가능



Bootflat

  - http://www.flathemes.com/

  - Bootstrap v3.0 확장판이다 

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

  - https://wrapbootstrap.com/ 의 테마들처럼 Bootstrap 확장 느낌이 난다 



BootPlus

  - http://aozora.github.io/bootplus/

  - Bootflat과 유사한 기능을 제공

  - CSS의 느낌을 좀 더 간결하게 표현함 



FlatStrap

   

  - http://flatstrap.org/index.html

  - Bootflat과 유사함 



LeapStrap

  - http://wilkesalex.github.io/leapstrap/

  - touch smart device 고려 



FuelUX

  - http://exacttarget.github.io/fuelux/

  - Bootstrap 스타일의 다양한 컨트롤러 



PixelKit 

  

  - http://pixelkit.com/

  - 프리미엄 UI Kits 을 Theme별로 제공을 한다 

  - 예제 Sweet Candy

  - 소스 : https://github.com/Pixelkit/PixelKit-Bootstrap-UI-Kits

  - 상용이다 



Maxmertkit

  - http://www.maxmert.com/

  - Bootstrap 과 유사한 느낌을 전달 CSS class가 항시 "-" 또는 "_"로 시작하여 다른 CSS Framework와 충돌방지 

  - Bootflat에서 제공하지 않는 3D 적인 디자인과 효과 좋음 

  - Bootstrap css 파일과 혼용하여 사용할 수 있는지 체크 필요



Metro UI CSS

  - http://metroui.org.ua/

  - MS의 Metro Flat 디자인 제공

  - Bootstrap에서 느끼지 못하는 깔끔함이 있음 

  - RWD 제공




GroundWork

  - http://groundwork.sidereel.com/

  - 웹페이지, 이미지 겔러리, 커머스사이트 레이아웃 예제 제공

  - 다양한 화면사이즈에 대한 테스트 제공 (RWD)

  - 개인적으로 좋아하는 약간 따뜻한 색감 

  - 웹 모듈은 많지 않고 다른 UI 툴과 연계해서 사용하면 좋을 듯함



Pure

  - http://purecss.io/

  - Yahoo 에서 만듦

  - 사이즈 작고 flat한 디자인으로 간결한 맛이 있음 



Ink v.2

  - http://ink.sapo.pt/

  - 빠르게 웹 인터페이스를 개발할 수 있는 툴이다 

  - RWD 제공

  - Bootstrap과 거의 유사

  - Drap 컴포넌트 제공 



UIKit

  - http://getuikit.com/

  - 30가지의 UI 모듈을 제공

  - 다른 CSS Framework엔 없는 효과를 준 모듈 존재



Amazing Web Library

  - http://a-web.me/

  - UIKit과 유사하지만 차트와 그리드에 대한 부분이 강력함 




Brick

  - http://mozilla.github.io/brick/

  - 모질라에서 제공

  - 모바일에 특화된 UX적인 효과 제공

  - 모바일 예제 데모를 충실히 보여줌 



MicroJS

  - http://microjs.com/ (강추)

  - 다양한 웹 컴포넌트 검색 

  - 파일 크기 명시



<참조>

  - 원문 : 10 Free UI Kit

  - 원문 : 18개의 CSS Framework

  - 50개의 Web Developer를 위한 리소스와 툴들

  - Twitter Bootstrap v3 이해하기

  - Yahoo Pure에 대하여

  - HTML5 free Layout Template을 얻고 싶다면

  - UI Kit Maker

  - 유용한 CSS 도구들 (필독)

저작자 표시 비영리 변경 금지
신고
posted by peter yun 윤영식

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 next