트위터 부트 스트랩 사용자 지정 모범 사례 [닫기]

LESS를 사용하여 Bootstrap 2.0.3으로 작업하고 있습니다. 광범위하게 사용자 정의하고 싶지만 라이브러리 변경이 빈번 할 때마다 가능하면 소스를 변경하지 않으려 고합니다. 나는 LESS가 처음이므로 컴파일이 어떻게 작동하는지 모르겠습니다. LESS 또는 LESS 기반 프레임 워크 작업에 대한 모범 사례는 무엇입니까?

내 솔루션은 jstam과 비슷하지만 가능하면 소스 파일을 변경하지 마십시오. 부트 스트랩에 대한 변경 사항이 자주 발생할 수 있으므로 최신 소스를 풀고 수정 사항을 별도의 파일로 유지하여 최소한의 변경을 할 수 있기를 원합니다. 물론, 완전히 방탄은 아닙니다.

1. bootstrap.less 및 variables.less를 상위 디렉토리로 복사하십시오. bootstrap.less의 이름을 theme.less 또는 원하는대로 바꾸십시오. 디렉토리 디렉토리 구조는 다음과 같아야합니다.

   /Website            
        theme.less
        variables.less
        /Bootstrap
        ...
   

2. 부트 스트랩 서브 디렉토리를 가리 키도록 theme.less의 모든 참조를 업데이트하십시오. variables.less가 부트 스트랩 디렉토리가 아닌 상위에서 참조되는지 확인하십시오.

   ...
   // CSS Reset
   @import "bootstrap/reset.less";
   
   // Core variables and mixins
   @import "variables.less"; // Modify this for custom colors, font-sizes, etc
   @import "bootstrap/mixins.less";
   
   // Grid system and page structure
   @import "bootstrap/scaffolding.less";
   @import "bootstrap/grid.less";
   @import "bootstrap/layouts.less";
   

   ...

3. CSS 대체를 theme.less 파일에 포함 된 직후에 추가하십시오.

   ...
   // Components: Nav
   @import "bootstrap/navs.less";
   @import "bootstrap/navbar.less";
   
   // overrides
   .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
       border-radius: 0 0 0 0;
       padding: 10px;
   }
   
   .nav-tabs, .nav-pills {
       text-transform: uppercase;
   }
   
   .navbar .nav > li > a {
       text-shadow: none;
   }
   
   ...
   

4. HTML 페이지에서 bootstrap.less 대신 theme.less에 링크하십시오.

새 버전이 나올 때마다 변경 사항이 안전해야합니다. 새 버전이 나올 때마다 사용자 정의 부트 스트랩 파일간에 차이가 있어야합니다. 변수 및 가져 오기가 변경 될 수 있습니다.

이것도 내가 고생 한 것입니다. 한편으로 나는 내 자신의 색상과 설정으로 variables.less 파일을 고도로 사용자 정의하고 싶다. 반면에, 업그레이드 프로세스를 쉽게하기 위해 부트 스트랩 파일을 가능한 한 약간 변경하고 싶습니다.

내 솔루션 (현재)은 addon LESS 파일을 만들고 bootstrap.less변수와 믹스 인을 가져온 후에 파일에 삽입하는 것 입니다. 그래서 이런 식으로 :

...

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Custom Addons
@import "addon-file.less"; // <--- My custom LESS addon

// Grid system and page structure
@import "scaffolding.less";

...

부트 스트랩 색상, 글꼴을 재설정하거나 추가 믹스 인을 추가하려는 경우이 방법으로 가능합니다. 내 코드는 별개이지만 나머지 Bootstrap 가져 오기 내에서 컴파일됩니다. 완벽하지는 않지만 나에게 잘 맞는 스톱 갭입니다.

내 측면에서 theme.less가져 오기로 이름이 지정된 파일이 boostrap.less있고 바로 아래에 업데이트하지 않으려는 변수 값이 LESS를 사용하여 좋지 않은 것처럼 보이지만 유지 관리가 더 쉽습니다) .

이것은 변수에 대한 사용자 정의 값을 갖는 데 효과적입니다. variables.less

그 후 나는 theme.less대신 내 파일을 컴파일 한다.bootstrap.less

예 theme.less:

@import "path/to/my/bootstrap.less";  
@linkColor: #MyAwesomeColor;  

훨씬 더 나은 (IMHO) 접근 방식은 swatchmaker 라는 Bootswatch github 프로젝트 에서 힌트를 얻는 것 입니다. 이 프로젝트는 웹 사이트에서 수십 가지 부트 스트랩 테마를 작성하고 관리하기 위해 특별히 제작되었습니다.

Makefile프로젝트의 빌드 swatchmaker.less(당신이 뭔가에 이름을 바꿀 수 있습니다 customizations.less). 이 파일에는 여러 가지 가져 오기가 포함되어 있습니다.

@import "bootstrap/less/bootstrap.less";
@import "swatch/variables.less";
@import "swatch/bootswatch.less";
@import "bootstrap/less/utilities.less";

swatch폴더와 bootswatch.less파일의 이름 을 원하는대로 바꿀 수 있습니다 .

자신의 파일에 영향을주지 않고 Bootstrap을 업그레이드 할 수 있기 때문에 이치에 맞습니다. 실제로 Makefile최신 버전의 부트 스트랩을 가져 오는 명령도 포함되어 있습니다. 자세한 내용은 프로젝트 페이지의 README를 참조하십시오.

또한 README는 파일 변경 watchr시 프로젝트를 자동으로 빌드하는 gem을 설치하도록 제안합니다 .less.

만약 당신이 (그리고 만 IF) 당신이 할 수있는 시간이 있다면. 나는 프레임 워크의 수정 된 버전을 유지하고 프레임 워크의 모든 업데이트와 함께 문서를 읽고 소스가 수정되었는지 확인합니다.

이 솔루션은 처음에는 이상적이지 않을 수도 있지만 그렇게해야 할 이유가 있습니다. 나는 하나의 프레임 워크, 모범 사례, 재설정 / 정규화 스타일 시트 등을 사용하지 않고 항상 업데이트가 기존 프로젝트를 변경하지 않을 것이라고 확신합니다.

다음과 같은 이유로 내 사용자 지정 프레임 워크를 사용하고 있습니다.

1. 나는 물건을 모듈화하고 작게 유지할 필요가없는 모든 작은 조각을 제거합니다.
2. 나는 클라이언트 작업에 내 프레임 워크를 사용하고 a) 내가 정확히 무엇을 사용하는지 알고있는 동안 b) 클라이언트에게 판매하는 모든 것을 소유하고 싶다. 단순히 프레임 워크를 복사하고 사용하는 것이 아니라 이해하고 재현하려고합니다.
3. 내 프레임 워크를 CMS와 함께 사용하며 프레임 워크를 프로젝트에 넣거나 잊을 수는 없습니다.

나는 Joel과 같은 해결책을 찾았습니다.

더 적은 파일

위에서 설명한 것처럼 : 나는 커스터마이징중인 모든 Less 파일에 대해 로컬 복사본을 생성합니다 : "variables-custom.less", "alerts-custom.less", "buttons-custom.less". 그래서 나는 일부 표준을 사용할 수 있으며 내 자신의 추가 사항을 가지고 있습니다. 단점은 : 부트 스트랩이 업데이트 될 때 실제로 마이그레이션하기가 어렵습니다.

그러나 다른 것이 있습니다.

스타일 무시

워크 플로우를 둘러 볼 때 사람들이 단순히 스타일을 재정의하도록 제안하는 것을 종종 보게됩니다. 따라서 표준 Less 파일을 먼저 가져온 다음 맨 아래에 사용자 정의 선언을 추가하십시오. 장점은 다음과 같습니다. 최신 버전으로 업데이트하는 것이 더 쉽습니다. 단점은 다음과 같습니다. 컴파일 된 CSS 파일에는 모든 재정의가 포함됩니다. 일부 CSS 선택기는 두 번 정의됩니다. 따라서 브라우저는 실제로 적용 할 내용을 찾기 위해 약간의 리프팅을 수행해야합니다. 정말 깨끗하지 않습니다.

전처리 기가 왜 그러한 이중 선언을 해결할만큼 영리하지 않은지 궁금합니다. 여기서 누락 된 더 나은 작업 흐름이 있습니까?

@import "../../styles.less";바닥에 bootstrap.less에 추가하십시오 (또는 스타일 시트가 어디에 있든지). 이를 통해 자신 만의 스타일에서 .gradient또는 부트 스트랩 믹스 인을 사용할 수 있습니다 .border-radius.