Rails4 모바일 리치 시스템 CSS 프레임워크 Gumby 방법

유연한 HTML/CSS 조립 방법을 배우기 위해 저는 Gumby라는 CSS 프레임워크를 사용했습니다.
라일스에서 사용된 기사를 잘 찾지 못해 이동하기 전 다소 당황스러웠던 만큼 일단 절차를 적어뒀다.
이번에는 Rails 4.1.1 환경에서 현행 버전인 Gumby framework2를 이동했다.

이른바 Gumby frame work

Gumby framework는 이른바 트위터 부스트랩과 같은 기능을 하는 사스제의 소프트 CSS 프레임워크다.

특징:
・유연한 격자 배치
・각도 기능을 통해 간단하게 상호작용/숨기기 전환을 할 수 있다
· 표시된 화면 크기에 따라 요소의 위치를 흐트러뜨릴 수 있다(DOM 구조)
· 표시된 화면 크기에 따라 각각 이미지를 로드할 수 있습니다
・맞춤형 디자인
잠깐만요.
자세한 내용은 Gumby framework 공식 웹 사이트를 보십시오.
==
트위터 부트스트랩의 UI 디자인과 차이를 비교하기 위해서는 이쪽 URL을 보는 게 좋을 것 같아요.
Gumby 2 UI Kit
http://gumbyframework.com/docs/ui-kit/
Twitter Bootstrap 3 UI
http://getbootstrap.com/examples/theme/

짐으로 거미 넣기.

우선, 우리는 Rails에서 gumby의gem을 사용하는 것을 연구했다.
'gumby'로 검색하면 몇 개 나옵니다.

GiitHub의 README를 읽었는데 실제적으로 다양한gem을 사용했어요.gumbygem이란 README의 설정 방법도 상세하고 알기 쉽게 썼기 때문에 이번에 이gem을 사용했다.

설치 단계

Gemfile에 다음 내용을 쓰고gem를 설치합니다.

gem 'gumby'
gem 'jquery-rails'
gem 'modernizr-rails'

쓰면 쓴다bundle install.

$ bundle install --path vendor/bundle

다음은 Modernizer를 사용할 수 있도록 app/assets/javascripts/application.js 파일에 다음과 같은 내용을 추가합니다.
app/assets/javascripts/application.js

//= require modernizr

Modernizer에 gem를 삽입하지 않아도 app/assets/javascripts 아래에 파일을 간단하게 읽을 수 있습니다.
이 경우 app/assets/javascripts/application.jsapp/assets/javascripts/application.js

//= require modernizr-2.6.2.min

이렇게 써.
마지막으로 스타일시트를 불러옵니다.app/assets/stylesheets/application.css나는 Gumby를 사용하겠다고 선언했다.
app/assets/stylesheets/application.css

*= require gumby

이렇게 설정하면 완성됩니다.
Rails Server를 시작합니다.

$ bundle exec rails s

이렇게 되자 거미가 움직이기 시작했다!