[Bootswatch] Bootstrap 테마(Theme)를 좀 더 멋있게 바꿔보자.

Bootswatch

CSS 프레임워크 중 가장 인기가 있고 가장 많이 사용되는 프레임워크라고 하면 단연 Bootstrap 이라고 말할 수 있습니다. 저 또한 무엇을 개발하든 부트스트랩은 기본적으로 깔고 시작할 정도 이죠.

하지만 부트스트랩을 사용하면서 항상 느끼는 생각이 있는데요. 그건 바로 색상입니다. UI 적으로는 깔끔하고 세련된 느낌을 많이 받지만 아...먼가 색상은 쫌 바꿔야만 할 것 같은 그런 생각을 많이 합니다.

그러던 중 저의 그런 고민을 없애 주는 것을 발견했는데 그것이 바로 Bootswatch 라는 테마 입니다.

홈페이지  :  https://bootswatch.com/

위 홈페이지를 방문하시면 아주 다양한 Bootstrap 테마들을 둘러 보실 수 있습니다. 그리고 현재 알파버전으로 나와있는 Bootstrap v4 버전의 테마까지도 적용이 가능합니다.

v4 Bootstrap 테마를 다운로드 하시기 위해서는 Github 홈페이지에 방문하시면 다운로드 하실 수 있습니다.

Github : https://github.com/thomaspark/bootswatch

Bootswatch 적용방법

1. css 파일로 적용하기

그냥 단순히 css 파일을 다운로드 하여 적용할 경우에는 bootswatch 테마 css를 bootstrap css 대신 사용하시면 됩니다. 그냥 link 테그에 bootswatch css 경로를 입력하면 되는거죠.

2. less 파일로 적용하기

이 경우 bootswatch 에서 다운로드 가능한 variables.less, bootswatch.less 두 파일이 필요합니다. 다운로드 한 두 파일을 import 하시면 되는데 bootstrap.less 파일을 제일 먼저 import 하고 variables, bootswatch 순으로 import 하면 됩니다.

@import "bootstrap/less/bootstrap.less";
@import "bootswatch/theme/variables.less";
@import "bootswatch/theme/bootswatch.less";

3. sass 파일로 적용하기

sass 의 경우 less 와 거의 비슷하고 import 순서만 조금 다릅니다. 순서는 아래와 같이 bootstrap.sass 파일을 variables 을 import 한 다음 그 아래에 import 하면 됩니다.

@import "bootswatch/theme/variables";
@import "bootstrap-sass-official/assets/stylesheets/bootstrap";
@import "bootswatch/theme/bootswatch";