반응형 스킨을 Grunt를 이용해서 제작하고 있습니다.

요즘 반응형 스킨을 제작하고 있는데 시간이 너무 걸려서 근황을 소개하려고 글을 작성합니다.

이번에 제작하는 반응형 스킨은 부트스트랩을 포함하지 않습니다.

그래서 ie까지 모두 지원하는 스킨을 만들고 있습니다.

1단,2단3단 레이아웃 모두 만들고, 여러가지 컬러셋을 적용하는 버젼을 모두 만듭니다.

거기에다가 각종 플러그인이 장착이 된 버젼까지 전부 따로 따로 만듭니다.

그러다보니 각각의 파일과 레이아웃, 컬러셋마다의 분리가 필요하고 관리가 엄청 납니다.

만들다보니 거의 프로젝트 수준입니다.

여기에 Grunt 를 적용해서 좀더 완성적으로 만들려고 익히면서 만들고 있습니다.

현재 그런트에 들어가는 플러그인은 7개 정도인데 targethtml, handlebars 정도가 더 들어갈수도 있을거 같네요.

이제 세네개 컬러셋을 셋팅하고 2단, 1단을 만드는 과정입니다.

컬러셋도 현재 4개까지만 진행중인데요. 압축하지 않은 CSS 와 압축한 CSS를 모두 생산해서 한곳에 몰다보니 갯수가 많아지네요.

약 두배는 더 많아질듯 합니다.

아래의 노랑색부분정도만 사용하고 나머지 이미지들은 추가적으로 들어가는 슬라이드 플러그인의 이미지들입니다.

아마도 플러그인은 더 들어갈듯하구요, 사용자들은 커스터마이징 할 수 있도록 사용하는 사람만 사용하고, 사용하지 않은 사람은 사용하지 않도록 설정할 계획입니다.

컬러셋은 대략 8개에서 왔다갔다 할거 같습니다. 이쁜 컬러가 나올때까지....ㅎㅎㅎ

그리고 패턴이 들어간놈, 이미지가 들어간놈.....전부 따로 만들생각입니다.

즉 여기서 *2*3 하면 될듯합니다. 엄청 많죠.....

잠시 gruntfile.js 를 보여드리겠습니다.

less 부분입니다. 레이아웃1, 2만 있습니다.

CSS 구문오류 수정하는 csslint 도 col1, col2만 있습니다.

html 로 작업하고 로컬에서 테스팅한다음 티스토리로 사용할려고 grunt copy 플러그인을 사용해서 복사본을 따로 만들고 있습니다.

이것이 완성될때면 상당이 오랜 시간이 걸릴듯합니다.

그 시간동안 그런트나 사용법에 대해서 종종 글을 올릴 생각입니다.

모두 html 로 제작해서 테스팅한다음 티스토리로 변환해서 또 다시 테스트해야 하는데요.....제작도 힘들지만 테스트도 힘들것 같네요.