트위터 부트 스트랩이 있기 전에는 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 테마는 무엇입니까?
드루팔 ZURB 재단 테마 테마를 다운로드하고 사용하도록 설정하면 (그리고 문서를 읽고 몇 가지 추가 단계를 거쳐)이 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.엑스 재단의 테마 작업 버전 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 및 "_variables.scss"를 사용하십시오!
이 테마에 대한 CSS를 전혀 조정하지 않으려면 다음을 확인하십시오.
- ZURB Foundation 테마를 사용자 정의 하위 테마의 기본 테마로 사용하십시오.
- 이 하위 형식을 생성하려면
돌진하다 명령에 의해 제공됩니다. 이렇게 :
drush fst your_theme_name
- 천천히 정독한다.
_variables.scss 파일
그만큼
_variables.scss 파일은
대시 fst. 이 단일 파일에는 거의 아무것도 당신은 당신의 주제 CSS에서 비틀기를 원할지도 모른다. 놀랍다! 하나의 장소에서 모두 기본 글꼴에서부터 화면 폭, 이동 경로의 테두리까지 모든 것을 설정할 수 있습니다.
물론 추가 파일을 설정할 수도 있습니다. 그러나
_variables.scss 시작하기에 훌륭한 장소입니다.
파일 확장자를 확인하십시오.
scss, 아니라
CSS. 쓰다
_variables.scss, SASS (CSS 확장 언어)와 Compass (SASS로 구축 된 프레임 워크)를 설정해야합니다. 너가 달릴 때
나침반 컴파일, 네
scss 파일은 별도의 파일에서 멋진 CSS로 바뀝니다. (나는 선호한다
나침반 시계 - 이것은 CSS를 계속 실행하고 업데이트합니다.
scss 파일.)
정말로 SASS에 신경 쓰고 싶지 않다면 CSS 파일을 평상시와 같이 작성하고 테마에 나열 할 수 있습니다
.info 파일. 그러나 나를 믿어 라. - 컴파일하는데 충분한 시간을 투자해야한다.
ZURB Foundation을 사용하기 전에
ZURB Foundation이 가장 훌륭하지만, Drupal과 통합 된 유일한 프론트 엔드 프레임 워크는 아닙니다. Drupal 테마가있는 유사한 프레임 워크 인 Bootstrap을 고려할 수도 있습니다. 지금은 ZURB Foundation을 직접 사용하고 있습니다.하지만 저의 연구에 따르면 부트 스트랩보다 사용자 정의가 더 쉽다고 지적했기 때문입니다.
또한 Joyride 구성 요소는 꽤 멋지다.
ZURB Foundation, Bootstrap 또는 다른 프레임 워크를 사용하든간에 Drupal에서 프레임 워크를 사용하는 방법에 대한 팁을 얻으십시오.
