Skel Css 사용하기

돌아다니다가, 진짜 마음에 드는 템플릿을 발견했다.

https://templated.co/intensify

근데, 얘가 skel 이라는 css를 사용했길래, 

보니까, 

부트스트랩이랑 좀 다른 클래스 명들을 쓰는거다.

그래서 보니까....

https://github.com/ajlkn/skel/blob/master/docs/skel.md

<div class="row">
	<div class="6u 12u$(small)">
		Content
	</div>
	<div class="3u 6u(small) 12u$(xsmall)">
		Sidebar1
	</div>
	<div class="3u$ 6u$(small) 12u$(xsmall)">
		Sidebar2
	</div>
</div>

6u같은거는 부트스트랩 col-md-6 이런거랑 같은데, 

뒤에 $ 달러표시 붙는거랑,

(small) 이런거는 이해가 안되는거다.

찾아서 보니까. 

달러표시는 여기가 마지막이라는 이야기다.

그래서,  3u$ 는 3u를 만들고, 뒤에 얼마가 남아있건, 마지막으로 인식해서,

그 다음거는 밑으로 내려보내는거다.

오~~ 이거 대박 편한거다~!!

그리고, (small) 이런거는, 

main.js 에 세팅해놓는 브레이크포인트가 있는데,

밑에 저 가로 길이까지는 small로 보는거다.

@include skel-breakpoints((
	xlarge: "(max-width: 1680px)",
	large:  "(max-width: 1280px)",
	medium: "(max-width: 980px)",
	small:  "(max-width: 736px)",
	xsmall: "(max-width: 480px)"
));

6u(small) 12u$(xsmall)

위에 같은 경우는 small 사이즈일때는 6u 사이즈로 만들어준다.

xsmall 사이즈일때는, 12u 로 만들어주고, 마지막이므로, 다음 그리드는 밑으로 내리라는 이야기다.

col-md-4 이렇게 안쓰고, 간단하고, 깔끔해서 쓰기는 좋은데....

부트스트랩의 bg-black 같은 컬러는 종류가 너무 적어서, 직접만들어주려니...너무 많아서....

Metro css에서 컬러만 다운 받아서 추가했다.

처음에 Metro All css 를 추가하니까, 충돌이 나서.... $ 명령어가 안 먹히는거다.

https://metroui.org.ua/colors.html

그래서, metro color 가 따로 있어서, 걔만 다운받아서 추가해 주었다.

        <link rel="stylesheet" href="css/metro-colors.css /">

bg-black, bg-red 같은 컬러도 다 먹히고, 이걸로 써봐야 겠다~ㅎㅎ