CSS 프레임워크 디자인은 고품질 페이지를 빠르고 효과적으로 생성하는 데 도움이 될 뿐만 아니라 코드 표준화에도 기여할 수 있습니다. 물론 각 프레임워크는 수많은 이전 프레임워크의 노력을 기반으로 합니다. 여기에는 권장되는 CSS 프레임워크인 Blueprint CSS 프레임워크가 있습니다.
CSS 프레임워크 + CSS 재설정: 처음부터 디자인
http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch
1. 소개
블루프린트는 소위 CSS 프레임워크에 비해 블루프린트 코드의 주석이 비교적 상세합니다.
Jeff Croft의 디자이너를 위한 프레임워크(또는 웹 프레임워크 이해 및 CSS 프레임워크 구축 방법의 중국어 버전)에 설명된 대로 CSS 프레임워크를 구축하는 방법을 따르세요.
프레임워크를 구축하는 방법에는 여러 가지가 있지만 가장 일반적이고 가장 유용한 방법은 공통 CSS를 전체의 특정 부분을 각각 포함하는 개별 스타일시트로 추상화하는 것입니다. 이 접근 방식의 장점은 필요한 스타일만 선택적으로 포함할 수 있다는 점입니다. 프레임워크에 6~7개의 다른 스타일시트가 있을 수 있지만 특정 프로젝트에서는 그렇지 않습니다. 그 중 한두 개가 필요하지 않으며 포함될 필요도 없습니다. 우리 사무실에서 만든 프레임워크에는 다음과 같은 5개의 스타일시트가 있습니다.
Reset.css - 대량 재설정을 처리합니다.
type.css - 타이포그래피를 처리합니다.
Grid.css - 레이아웃 그리드를 처리합니다.
widgets.css—탭, 드롭다운 메뉴, '자세히 보기' 버튼과 같은 위젯을 처리합니다.
base.css - 다른 모든 스타일시트가 포함되어 있으므로 전체 프레임워크를 사용하려면 (X)HTML 문서에서 base.css만 호출하면 됩니다.
청사진은 비슷하게 작성됩니다 .
분할하고 정복하세요 :
기능적 구성 측면에서 Buleprint는 레이아웃, 타이포그래피, 위젯, 재설정, 인쇄 등의 기능을 다른 CSS 파일에 분산시킵니다. 이를 통해 사용자는 모든 파일을 가져오는 대신 사용하고 싶은 기능만 가져오는 것이 편리해지고 페이지 로딩 성능이 향상됩니다. 현재 구성 요소 섹션은 버튼 처리만 제공하며 아직 McKinsey의 MECE("상호 독립적이고 완전히 철저함") 접근 방식을 달성하지 못했습니다.
통합 인터페이스 :
기능이 여러 CSS 파일에 분산되어 있지만 가져올 때 동일한 파일 screen.css만 포함하면 특정 가져오기 세부 사항은 외부 인터페이스를 통합하는 screen.css에서 처리됩니다.
<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="스크린, 투영" />
청사진에 포함된 CSS 파일에 대한 설명:
스크린.css
이는 프레임워크의 기본 파일이며 "lib" 디렉터리에서 다른 CSS 파일을 가져오며 모든 페이지에 포함되어야 합니다.
Jeff Croft의 base.css 기능과 유사하게 이 파일만 포함하면 가져올 수 있습니다.
print.css
이 파일은 인쇄된 버전이 모든 페이지에 포함되도록 몇 가지 기본 인쇄 규칙을 설정합니다.
인쇄를 처리하는 데 사용되며 위젯으로 분류될 수 있습니다.
lib/grid.css
이 파일은 그리드를 설정합니다(사실입니다). 여기에는 모든 종류의 열 기반 그리드를 설정하기 위해 div에 적용하는 많은 클래스가 있습니다.
페이지 레이아웃(열)을 처리하는 데 사용됩니다.
lib/typography.css
이 파일은 몇 가지 기본 타이포그래피를 설정하며 텍스트와 관련된 몇 가지 멋진 작업을 위한 몇 가지 방법도 있습니다.
페이지 요소의 레이아웃을 처리하는 데 사용됩니다.
lib/reset.css
이 파일은 브라우저가 자동으로 설정하는 CSS 값을 재설정합니다.
CSS 속성을 지정하지 않은 페이지 요소에 대해 페이지를 재설정하고 기본값을 지정하는 데 사용됩니다.
lib/buttons.css
훌륭한 CSS 전용 버튼을 제공합니다.
위젯으로 분류될 수 있는 버튼을 처리하는 데 사용됩니다.
lib/compressed.css
핵심 파일의 압축 버전입니다. 모든 라이브 사이트에서 사용하세요.
지침은 screen.css를 참조하세요.
압축된 CSS 파일(grid.css, typography.css, Reset.css,button.css 포함)을 제공합니다.
2. 각 모듈의 활용에 관한 연구
2.1.grid.css에 대한 연구
브라우저 간 센터링의 호환성 처리
일반적으로 센터링을 처리할 때 Firefox와 IE의 차이점을 처리하기 위해 다음 방법이 사용됩니다.
body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}
검색 출처: http://www.maxdesign.com.au/presentation/center/
청사진 처리 방법:
body { text-align: center; /* IE6 수정 */ margin:36px 0;}/* 컨테이너는 모든 열을 그룹화해야 합니다. */ .container { text-align: left; margin; : 0 auto; /* 레이아웃 중앙 */ width: 1150px; /* 전체 너비 */ }열(열)에 대한 청사진을 구현하는 방법:
blueprint는 .column, .span-x 및 .last를 정의하며 이를 결합하여 열 기능을 구현합니다.
그 중: .column은 열의 float 속성을 정의하고, .span-x는 열 너비를 정의하며, .last는 margin-right를 0px로 설정합니다.
| .column { float : left; margin-right: 10px; padding: 0;}/* 열 너비를 설정하려면 이 클래스를 사용하세요. */ .span-1 { width: 30px }.span-2; : 70px; }.span-3 { 너비: 110px; }.span-4 { 너비: 150px }....span-8 { 너비: 310px; 10 { 너비: 390px; }....span-23 { 너비: 910px; 여백: 0; : 1150px; margin: 0; }/* 다중 열 블록의 마지막 요소에는 이 클래스가 필요합니다. */ .last { margin-right: 0 } 세 개의 열 구현: <div class ="container" > <div class ="columnspan-24" > 헤더 </div> <div class ="columnspan-4" > 왼쪽 사이드바 </div> <div class ="columnspan-16" > 기본 콘텐츠 </div> <div class ="columnspan-4 last" > 오른쪽 사이드바 </div> </div> 4개 열 구현: <div class ="container" > <div class ="columnspan-26" > 헤더 </div> < div class ="columnspan-4" > 왼쪽 사이드바 </div> <div class ="columnspan-3 " > 기본 콘텐츠 0 </div> <div class ="columnspan-25" > 기본 콘텐츠 1 </div> div div> <div class ="columnspan-4 last" > 오른쪽 사이드바 </div> </div> .container의 너비(전체 페이지의 너비를 정의)가 1150px로 변경되었음을 참고하세요. 열: 여러 열(예: 5개 열)의 경우 빈 열이 있습니다(예: 왼쪽 및 오른쪽 열이 비어 있음). .append-x 및 .prepend-x를 사용하여 채울 수 있습니다. 그 중 .append-x는 열 뒤에 빈 열(padding-right)을 추가하고, .prepend-x는 열 앞에 빈 열(padding-left)을 추가합니다. 일반 컨테이너 정의 /* 컨테이너는 모든 열을 그룹화해야 합니다. */ .container: position:relative; margin: 0 auto; 너비 */ } |
2.2.reset.css에 대한 연구
Reset.css의 원래 코드는 Eric Meyer에서 가져와야 합니다. Eric Meyer에는 브라우저마다 다른 기본값 문제를 처리하는 데 사용되는 두 가지 로그가 있습니다. Eric Meyer의 문서는 훌륭합니다.
추론 재설정: http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/
재설정 다시 로드됨: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
재설정하는 이유
기본적인 이유는 모든 브라우저에 표시 기본값이 있지만 어떤 브라우저도 동일한 기본값을 갖지 않기 때문입니다. (두 개의 브라우저 제품군은 없습니다. 대부분의 Gecko 기반 브라우저는 동일한 기본값을 갖습니다.)
예를 들어, 일부 브라우저는 왼쪽 여백을 사용하여 순서가 지정된 목록과 정렬되지 않은 목록을 들여쓰는 반면, 다른 브라우저는 왼쪽 여백을 사용하여 이러한 불일치를 사례별로 해결했습니다.
범용 선택기 대신 재설정 스타일을 사용하는 이유
소위 범용 선택자는 *를 사용하여 문서의 모든 요소를 나타냅니다. 예를 들어
* { margin: 0;} 스타일 재설정 주제에 대한 일부 리소스:
YUI 재설정 라이브러리: http://developer.yahoo.com/yui/reset/
http://leftjustified.net/journal/2004/10/19/global-ws-reset/
다음 기사는 실제로 CSS 프레임워크나 팁을 논의하는 기사이지만 모두 재설정 주제를 언급합니다.
http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/
http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/
http://businesslogs.com/design_and_usability/my_5_css_tips.php
http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/
2.3.typography.css에 대한 연구
typography.css는 페이지 요소의 기본 레이아웃 형식(기준선)을 결정하는 데 사용됩니다.
웹의 유형을 기준 그리드로 설정:
http://alistapart.com/articles/settingtypeontheweb
2.4.button.css에 대한 연구
버튼 요소 재발견에서는 버튼 요소를 사용하여 입력 요소를 대체할 때 얻을 수 있는 다양한 이점에 대해 설명합니다. 버튼 요소는 더 풍부한 기능을 제공합니다.
http://particletree.com/features/rediscovering-the-button-element
2.4. Print.css 연구
Eric Meyer에는 print.css를 이해하는 데 참고 자료로 사용할 수 있는 CSS의 인쇄 기능 구현에 대한 기사가 있습니다.
CSS 디자인: 인쇄 예정
다른 인쇄
2.5, 압축.css
pressed.css는 여러 청사진 파일을 압축하는 패키지입니다. 또한 CSS 파일을 압축하여 불필요한 공백, 줄 바꿈, 주석 및 기타 텍스트를 제거합니다.
이 방법은 페이지에 여러 CSS 파일을 가져오는 것을 방지하기 위해 프로덕션 시스템에 배포할 때 사용되며 페이지 성능을 향상시키는 데도 도움이 됩니다.
lib/screen.css의 지침에 따라 Teenage가 제공하는 CSS 압축 서비스를 사용해야 합니다.
http://teenage.cz/acidofil/tools/cssformat.php
또한 CSS 및 자바스크립트의 최적화 및 압축을 제공하는 유사한 서비스에는 다음이 포함됩니다.
http://csstidy.sourceforge.net/(오픈 소스)
http://www.cssdrive.com/index.php/main/csscompressor/
http://www.cleancss.com/ (csstidy 기준)
3. 사용예
4. 참고자료
http://code.google.com/p/blueprintcss/wiki/Tutorial
5. 관련 프로젝트
청사진 생성기: http://kematzy.com/blueprint-generator/
트리폴리: http://monc.se/tripoli/
추천 기사: http://www.cssdemos.com/2007/12/29/hands-on-with-blueprint-a-css-framework/