2018. 7. 4. 15:49



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


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 같은 컬러도 다 먹히고, 이걸로 써봐야 겠다~ㅎㅎ

Posted by Tyson