Drupal 테마에서 ZURB Foundation 프레임 워크의 힘을 얻으십시오.
트위터 부트 스트랩 이 있기 전에는 ZURB Foundation이라는 프레임 워크가있었습니다. ZURB Foundation은 잘 배치 된 CSS 클래스를 사용하여 예쁜 버튼, 격자 그리드, 진행률 막대, 가격표 등을 추가 할 수있는 프레임 워크였습니다. Drupal의 ZURB Foundation 테마를 사용하면 Drupal 사이트의 모든 블링을 치명적일 수 있습니다.
ZURB Foundation 프레임 워크 란 무엇입니까?
ZURB Foundation 프레임 워크는 아마도 웹 사이트에서 원하는 수많은 것들을위한 CSS와 Javascript 코드 모음입니다. 여기에는 앞에서 설명한 버튼과 같이 클릭 할 수있는 눈 사탕뿐만 아니라 놀라운 응답 성이 있습니다.
특수 CSS 클래스를 추가하여 대부분의 기능을 사용합니다. 예를 들면 :
ZURB Foundation 프레임 워크는 Drupal과 완전히 별개입니다. 사람들은 WordPress, Joomla 및 정적 HTML 사이트에서도이 도구를 사용합니다.
ZURB Foundation Drupal 테마는 무엇입니까?
Drupal ZURB Foundation 테마를 사용하면 테마 를 다운로드하고 활성화하는 것만으로 (그리고 문서를 읽고 몇 가지 추가 단계를 거쳐)이 ZURBish의 모든 힘을 발휘할 수 있습니다.
예를 들어, ZURB Foundation은 jQuery Javascript 라이브러리를 사용하므로 jQuery 업데이트를 설치해야 할 수도 있습니다. jQuery에 의존하는 다른 모듈을 사용하고 있는지 확인하십시오. 너무 새로운 버전의 jQuery를 사용하면 이러한 모듈이 작동하지 않을 수 있습니다.
또한이 테마를 사용자 정의 테마의 기본 테마로 사용하려고 할 것입니다. 사용자 정의는 ZURB Foundation이 실제로 빛나는 곳입니다.
Drupal에서 ZURB Foundation을 사용하려면이 테마가 필요합니까?
ZURB Foundation 프레임 워크를 사용하기 위해이 테마가 필요 하지 않습니다. 간단히 말해서이 테마는 ZURB Foundation CSS와 Javascript를 사이트에 추가하기 만하면 수동으로 할 수 있습니다.
하지만이 주제가 더 쉽고, Drupal과의 좀 더 긴밀한 통합도 포함됩니다.
또한 더 작은 모듈을 추가하여 더 많은 통합을 수행 할 수 있습니다. 예를 들어 ZURB 궤도 모듈을 사용하면 이미지 필드가있는 궤도 슬라이드 쇼를 만들 수 있습니다. ZURB Clearing (ZURB 지우기) 모듈을 사용하면 Media 이미지로 반응 형 라이트 박스를 만들 수 있습니다.
참고 : 저는이 작은 모듈을 아직 사용하지 않았기 때문에 위험에 처할 수 있습니다. 이 글을 쓰는 시점에서 ZURB Clearing을 사용하려면 Media-2.x-dev가 필요합니다. 현재 Media 1.x를 사용하고 있다면 위험한 업그레이드가 될 수 있습니다. 모듈의 개발 버전에 대한 요구 사항은 항상 하나의 일시 중지를 제공해야합니다. 여전히 이러한 ZURB 모듈과 다른 ZURB 모듈을 살펴볼 가치가 있습니다.
사용할 ZURB Foundation 버전 선택
ZURB Foundation 테마를 다운로드하기 전에 사용할 버전을 확인하십시오. ZURB Foundation 프레임 워크의 주요 버전이 다르며 테마의 주요 버전 번호 는 해당 프레임 워크와 일치합니다. 따라서, 테마의 7.x- 3.x 버전은 Foundation 3 과 함께 작동하고, 7.x- 4 버전은 Foundation 4 와 함께 작동하고, 7.x- 5 버전은 Foundation 5 와 함께 작동합니다.
이 글을 쓰는 시점에서 최신 안정 버전의 테마는 Foundation 4와 함께 작동하는 7.x-4.x입니다. 7.x-5.x 버전은 아직 개발 중입니다. 따라서 재단 프레임 워크 웹 사이트에서는 Foundation 5를 사용한다고 가정하고 있지만 현재 Foundation 4를 사용하고 싶을 수도 있습니다.
또한 Foundation 5에는 추가 요구 사항, 특히 jQuery 1.10이 필요합니다. Foundation 4는 jQuery 1.7 이상 만 필요합니다.
온라인 설명서를 읽을 때 어떤 버전의 Foundation을 사용하고 있는지 알고 있어야합니다. 최신 버전의 프레임 워크를 사용하지 않는 경우 특히 그렇습니다. 파운데이션 5와 같은 문서를 읽는 것이 치명적이기는하지만 파운데이션 4 사이트에서 새로운 기능이 작동하지 않으면 좌절 할 수 있습니다.
예를 들어, Foundation 5에는 중간 크기의 화면을위한 전체 중간 클래스 세트가 포함되어 있습니다. Foundation 4에서는 추가 조치를 취하지 않으면 이상하게도 실패합니다.
SASS, Compass 및 & # 34; _variables.scss & # 34;를 사용하십시오.
이 테마에 대한 CSS를 전혀 조정하지 않으려면 다음을 확인하십시오.
- ZURB Foundation 테마를 사용자 정의 하위 테마의 기본 테마로 사용하십시오.
- 테마가 제공하는 drush 명령을 사용 하여이 하위 테마를 생성하십시오. 이렇게 : drush fst your_theme_name
- 편안하게 _variables.scss 파일을 정독합니다.
_variables.scss 파일은 drush fst에 의해 자동으로 작성됩니다. 이 단일 파일에는 테마 CSS에서 조정할 수있는 거의 모든 항목에 대한 변수가 포함되어 있습니다. 놀랍다! 하나의 장소에서 모두 기본 글꼴에서부터 화면 폭, 이동 경로의 테두리까지 모든 것을 설정할 수 있습니다.
물론 추가 파일을 설정할 수도 있습니다. 그러나 _variables.scss는 훌륭한 출발점입니다.
파일 확장자 : scss, css가 아닙니다. _variables.scss를 사용하려면 SASS (CSS 확장 언어) 및 Compass (SASS로 작성된 프레임 워크)를 설정해야합니다. 나침반 컴파일을 실행하면 scss 파일이 별개의 파일에서 멋진 CSS로 바뀝니다. (나는 나침반 시계를 선호한다 - 이것은 scss 파일을 조정할 때 CSS를 계속 실행하고 업데이트한다.)
정말로 SASS에 신경 쓰고 싶지 않다면 CSS 파일을 평소와 같이 작성하고 테마 .info 파일에 나열 할 수 있습니다. 그러나 _variables.scss를 컴파일하기에 충분한 시간을 투자하면 거의 즉각적으로 비용이 회수 될 것입니다.
ZURB Foundation을 사용하기 전에
ZURB Foundation이 가장 훌륭하지만, Drupal과 통합 된 유일한 프론트 엔드 프레임 워크는 아닙니다. Drupal 테마가있는 유사한 프레임 워크 인 Bootstrap 을 고려할 수도 있습니다. 지금은 ZURB Foundation을 직접 사용하고 있습니다.하지만 저의 연구에 따르면 부트 스트랩보다 사용자 정의가 더 쉽다고 지적했기 때문입니다.
또한 Joyride 구성 요소는 꽤 멋지다.
ZURB Foundation, Bootstrap 또는 다른 프레임 워크를 사용하든간에 Drupal에서 프레임 워크를 사용하는 방법에 대한 팁 을 얻으십시오.