Singularity.gs 설정 옵션 가이드

_singularitygs-guide.sass

////////////////////////////////
// Singularity.gs v1.2 설정 스니펫
////////////////////////////////


// 설정 옵션
////////////////////////////////
// 디버깅 모드 활성화 : false | true
+sgs-change('debug', true)
// 그리드 방향 : ltr | rtl | both
+sgs-change('direction', 'ltr')
// 레이아웃 아웃풋(Layout Output) : 'isolation' | 'float'
+sgs-change('output', 'float')
// 거터 스타일(Gutter) : 'opposite' | 'split' | 'fixed'
+sgs-change('gutter styles', 'fixed' 'split')


// 그리드 시스템 생성
////////////////////////////////
// 정형(Sematric) 그리드
+add-grid(12)
// 비정형(Asematric) 그리드
+add-grid(1 3 1)
+add-grid(120px 960px 120px)
// 반응형(Responsive) 그리드
+add-grid(4) // 모바일 퍼스트(Mobile First)
+add-grid(8 at 640)
+add-grid(12 at 960)

// 거터 설정
+add-gutter(1/3)
+add-gutter(.15)
+add-gutter(1em)
+add-gutter(10px)

// 거터 스타일 설정
+add-gutter-styel('split')


// 그리드 시스템 사용
////////////////////////////////
+grid-span(1, 1)
+grid-span(4, 5, 12)
+grid-span(1, 2, (2 4 6))
+grid-span(1, 2, $gutter: .25)
+grid-span(1, 2, $output-style: 'float')
+grid-span(1, 2, 12, .25, 'float')

// grid-span 단축 isolation-span 믹스인 
.span
	// +grid-span(2, 3, $output-style: 'isolation', $options: 'both')
	+isolation-span(2, 3, 'both')
.span
	// +grid-span(2, 3, (2 8 2 1), .25, 'isolation')
	+isolation-span(2, 3, $grid: (2 8 2 1), $gutter: .25)

// grid-span 단축 float-span 믹스인
.span
	// +grid-span(3, 1, $output-style: 'float')
	+float-span(3)
.end-row
	// +grid-span(4, 9, $output-style: 'float')
	+float-span(4, 'last')
.begin-row
	// +grid-span(2, 1, $output-style: 'float')
	// clear: both
	+float-span(2, 'first')
.float-all
	// +grid-span(3, 1, 5, .25, 'float')
	float-span(3, $grid: 5, $gutter: .25)