Last active
July 20, 2017 23:43
-
-
Save yamoo9/67672ba2a9caf1b947800d2be563c60c to your computer and use it in GitHub Desktop.
『타이포그래피/그리드시스템 생성기』 Typography/Grid System Generator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| > 5% in KR | |
| last 2 versions |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .container.show-guide.guide-10 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // libsass (v3.5.0.beta.2) | |
| // ---- | |
| /*! typography-grid-system-generator.sass @ yamoo9.net, 2016 */ | |
| // --------------------------------------------------------------------- | |
| // 가이드라인, 단위 설정 변수 | |
| // --------------------------------------------------------------------- | |
| // 10px 가이드라인을 사용하려면 true, 아니면 false | |
| $using-guide-10px: true | |
| // rem 단위를 사용하려면 true, 아니면 false | |
| $using-rem-unit: true | |
| // px 단위를 사용하려면 true, 아니면 false | |
| $using-px-unit: true | |
| // --------------------------------------------------------------------- | |
| // 페이지 화면 정렬 설정 변수 | |
| // --------------------------------------------------------------------- | |
| // 페이지 정렬 설정 | |
| // 왼쪽(left), 가운데(center), 오른쪽(right) | |
| $align-page: center | |
| // --------------------------------------------------------------------- | |
| // 타이포그래피 시스템 설정 변수 | |
| // --------------------------------------------------------------------- | |
| $base-rem-size: 10px | |
| // 기본 글자 크기 | |
| $base-font-size: 16px | |
| // 기본 행간 비율(글자 대비) | |
| $base-line-height-ratio: 1.5 | |
| // 기본 타입 스케일 | |
| // 참고 URL: https://goo.gl/4gAnjs | |
| $base-type-scale: 1.250 | |
| // 제목 스케일 설정 | |
| $headings-scale: (h1:6, h2:5, h3:4, h4:3, h5:2, h6:1) | |
| // 버티컬 스페이싱 간격 설정 방향 | |
| // 위(top), 아래(bottom) | |
| $vertical-spacing-direction: bottom | |
| // 기본 행간 크기 (자동 연산) | |
| $base-line-height: $base-font-size * $base-line-height-ratio | |
| // --------------------------------------------------------------------- | |
| // 그리드 시스템 설정 변수 | |
| // --------------------------------------------------------------------- | |
| // 컬럼 개수 | |
| $columns: 12 | |
| // 컬럼 가로 폭 | |
| $column-width: 60px | |
| // 거터 가로 폭(양쪽 방향 거터를 합친 값) | |
| $gutter-width: 20px | |
| // 거터 방향 | |
| // 양쪽(split), 앞(before), 뒤(after), 안쪽(inside) | |
| $gutter-position: split | |
| $page-width: ($columns * $column-width) + ($gutter-width * $columns) | |
| // --------------------------------------------------------------------- | |
| // 가이드라인 설정 변수 | |
| // --------------------------------------------------------------------- | |
| // 가이드 색상 | |
| $guide-color: #ef400f | |
| // 가이드라인 그레디언트 색상 위치(라인이 안보일 경우 조정) | |
| $guideline-location: 95% | |
| // 가이드라인 컬러 | |
| // ※ 알파 값(소수점)만 수정해야 합니다. | |
| $guideline-color: rgba($guide-color, 0.5) | |
| // 컬럼 컬러 | |
| // ※ 알파 값(소수점)만 수정해야 합니다. | |
| $column-color: rgba($guide-color, 0.25) | |
| // --------------------------------------------------------------------- | |
| // 자동으로 설정되는 그리드 시스템 설정 변수 | |
| // ※ 별도로 건들지 않아도 됩니다. | |
| // --------------------------------------------------------------------- | |
| // 가이드라인 높이 | |
| $guideline-height: $base-line-height | |
| // 컬럼 + 거터 가로 폭 합 | |
| $unit-width: $column-width + $gutter-width | |
| // 페이지 가로 폭 | |
| $page-width: $columns * $unit-width | |
| $gutter-percentage: null | |
| $gutter-half-percentage: null | |
| $column-percentage: null | |
| @if $gutter-position == split or $gutter-position == inside | |
| // 거터 절반 % | |
| $gutter-half-percentage: percentage(($gutter-width/2)/$unit-width) | |
| // 컬럼 % | |
| $column-percentage: 100% - $gutter-half-percentage | |
| @if $gutter-position == before or $gutter-position == after | |
| // 거터 절반 % | |
| $gutter-percentage: percentage(($gutter-width)/$unit-width) | |
| // 컬럼 % | |
| $column-percentage: 100% - $gutter-percentage | |
| // --------------------------------------------------------------------- | |
| // 단위 제거 함수 | |
| @function strip-units($unit) | |
| @return $unit / ($unit * 0 + 1) | |
| // px → rem 변경 함수 | |
| @function rem($px, $base: $base-rem-size) | |
| @if not unitless($px) | |
| $px: strip-units($px) | |
| @if not unitless($base) | |
| $base: strip-units($base) | |
| @return $px / $base * 1rem | |
| // 리스트 내부에 존재하는 단위를 rem으로 변경하여 리스트를 반환하는 함수 | |
| // ※ background-size 속성에서 사용 | |
| @function convert-rem-in-list($list) | |
| $_list: () | |
| @each $number in $list | |
| $_list: append($_list, rem($number)) | |
| @return $_list | |
| // 『버티컬 리듬』 설정 함수 | |
| @function vertical-rhythm($font-size, $base: $base-line-height-ratio) | |
| $_ratio: $font-size/$base-font-size | |
| @return floor($_ratio) * $base/$_ratio | |
| // 『모듈 스케일』 설정 함수 | |
| @function module-scale($multiple: 1, $ratio: $base-type-scale) | |
| $module: $base-font-size | |
| $_ratio: 1 | |
| @for $i from 1 through $multiple | |
| $_ratio: $_ratio * $ratio | |
| @return $module * $_ratio | |
| // rem 단위를 지원하지 않는 웹 브라우저를 위한 믹스인 | |
| // px, rem 단위 설정 변수에 따라 처리 결과가 달라집니다. | |
| =rem-fallback($key, $value) | |
| @if type-of($value) == list | |
| $px-list: () | |
| $convert-rem-list: () | |
| @for $i from 1 through length($value) | |
| $px-list: append( $px-list, nth($value, $i), comma ) | |
| $convert-rem-list: append( $convert-rem-list, convert-rem-in-list(nth($value, $i)), comma ) | |
| @if $using-px-unit | |
| #{$key}: $px-list | |
| @if $using-rem-unit | |
| #{$key}: $convert-rem-list | |
| @else | |
| @if $using-px-unit | |
| #{$key}: $value | |
| @if $using-rem-unit | |
| #{$key}: rem($value) | |
| // 『버티컬 스페이싱』 Placeholder 선택자 상속 | |
| %vertical-spacing | |
| @if $vertical-spacing-direction == top | |
| +rem-fallback(margin-top, $base-line-height) | |
| margin-bottom: 0 | |
| @else | |
| margin-top: 0 | |
| +rem-fallback(margin-bottom, $base-line-height) | |
| // --------------------------------------------------------------------- | |
| /* 문서 본문 설정 */ | |
| html | |
| font-size: if($base-rem-size == 16px, 100%, $base-rem-size) | |
| body | |
| margin: 0 | |
| line-height: $base-line-height-ratio | |
| +rem-fallback(font-size, $base-font-size) | |
| &, &::before, &::after, & *, & *::before, & *::after | |
| box-sizing: border-box | |
| // --------------------------------------------------------------------- | |
| /* h1-6 제목 설정 */ | |
| // $headings 맵 초기 생성(임시 값 포함) | |
| $headings: (tmp:0) | |
| // $headings 맵 설정 | |
| @each $heading, $ratio in $headings-scale | |
| $_headings: ($heading: module-scale($ratio)) | |
| $headings: map-merge($headings, $_headings) | |
| // $headings 맵 완성(임시 값 제거) | |
| $headings: map-remove($headings, tmp) | |
| // 제목 설정 (맵 사용) | |
| @each $heading, $size in $headings | |
| #{$heading} | |
| @extend %vertical-spacing | |
| +rem-fallback(font-size, ceil($size)) | |
| line-height: vertical-rhythm($size) | |
| // 단락, 목록, 정의 목록, 피규어, 인용, 디테일, 수평선, 필드셋, 보존, 표 | |
| p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table | |
| @extend %vertical-spacing | |
| /* 목록 */ | |
| // ul, ol | |
| // padding-left: 1em | |
| /* 목록 2Depth 상,하 공간 제거 */ | |
| // ul ul, ol ol, ul ol, ol ul | |
| // margin: | |
| // top: 0 | |
| // bottom: 0 | |
| /* 링크 */ | |
| a | |
| background-color: transparent | |
| /* 수평선 */ | |
| hr | |
| margin: -1px 0 | |
| border: 1px solid | |
| /* 인라인 요소 행간 설정 */ | |
| b, strong, em, small, code | |
| line-height: 1 | |
| /* 윗첨자, 아랫첨자 */ | |
| sup, sub | |
| position: relative | |
| font-size: 75% | |
| line-height: 0 | |
| vertical-align: baseline | |
| sup | |
| top: -0.5em | |
| sub | |
| bottom: -0.25em | |
| /* 코드 */ | |
| pre, code, kbd, samp | |
| font-size: 100% | |
| /* 축약 */ | |
| abbr[title] | |
| cursor: help | |
| border-bottom: 1px dotted | |
| text-decoration: none | |
| b, strong | |
| font-weight: bold | |
| /* 미디어 */ | |
| img, video | |
| vertical-align: bottom | |
| iframe | |
| border: 0 | |
| /* 표 */ | |
| table | |
| border-collapse: collapse | |
| border-spacing: 0 | |
| width: 100% | |
| th, td | |
| border-bottom: 1px solid | |
| text-align: left | |
| thead th | |
| vertical-align: bottom | |
| // --------------------------------------------------------------------- | |
| // Grid System | |
| /* 그리드 레이아웃 가이드라인 */ | |
| .grid | |
| min-height: 100vh | |
| &:before,&::before | |
| content: '' | |
| position: absolute | |
| top: 0 | |
| left: 50% | |
| width: $page-width | |
| height: 200vh | |
| transform: translateX(-50%) | |
| @if $gutter-position == split | |
| background: linear-gradient(180deg, transparent $guideline-location, $guideline-color $guideline-location), linear-gradient(90deg, transparent $gutter-half-percentage, $column-color $gutter-half-percentage, $column-color $column-percentage, transparent $column-percentage) | |
| @if $gutter-position == before | |
| background: linear-gradient(180deg, transparent $guideline-location, $guideline-color $guideline-location), linear-gradient(90deg, $column-color $column-percentage, transparent $column-percentage) | |
| @if $gutter-position == after | |
| background: linear-gradient(180deg, transparent $guideline-location, $guideline-color $guideline-location), linear-gradient(90deg, $column-color $column-percentage, transparent $column-percentage) | |
| @if $gutter-position == inside | |
| background: linear-gradient(180deg, transparent $guideline-location, $guideline-color $guideline-location), linear-gradient(90deg, lighten($column-color, 20%) $gutter-half-percentage, $column-color $gutter-half-percentage, $column-color $column-percentage, lighten($column-color, 35%) $column-percentage) | |
| +rem-fallback(background-size, (1px $guideline-height, $unit-width $unit-width)) | |
| transition: height 0.2s ease-out | |
| &.guide-10 | |
| &:before,&::before | |
| +rem-fallback(background-size, (1px 10px, $unit-width $unit-width)) | |
| // &.guide:hover,&.show-guide | |
| // &:before,&::before | |
| // height: 100vh // IE 9+ | |
| /* 컨테이너, CONTAINER */ | |
| .container | |
| // position: relative | |
| @if $gutter-position == split or $gutter-position == inside | |
| +rem-fallback(width, $page-width) | |
| @if $gutter-position == before or $gutter-position == after | |
| +rem-fallback(width, $page-width - $gutter-width) | |
| // height: 100vh // IE 9+ | |
| @if $align-page == center | |
| margin: | |
| left: auto | |
| right: auto | |
| @if $align-page == right | |
| margin-left: auto | |
| &.is-fluid | |
| @if $gutter-position == split or $gutter-position == inside | |
| +rem-fallback(max-width, $page-width) | |
| @if $gutter-position == before or $gutter-position == after | |
| +rem-fallback(max-width, $page-width - $gutter-width) | |
| // --------------------------------------------------------------------- | |
| /* 행, ROW */ | |
| .row, .clearfix | |
| &:after, &::after | |
| content: '' | |
| display: block | |
| clear: both | |
| // --------------------------------------------------------------------- | |
| /* 열, COLUMN */ | |
| .column | |
| float: left | |
| @if $gutter-position == split | |
| +rem-fallback(margin-left, $gutter-width/2) | |
| +rem-fallback(margin-right, $gutter-width/2) | |
| @if $gutter-position == before | |
| +rem-fallback(margin-left, $gutter-width) | |
| &.first, &.alpha | |
| margin-left: 0 | |
| @if $gutter-position == after | |
| +rem-fallback(margin-right, $gutter-width) | |
| &.last, &.omega | |
| margin-right: 0 | |
| @if $gutter-position == inside | |
| &.gutter | |
| +rem-fallback(padding-left, $gutter-width/2) | |
| +rem-fallback(padding-right, $gutter-width/2) | |
| .is-fluid & | |
| @if $gutter-position == split | |
| margin-left: percentage(($gutter-width/2) / $page-width) | |
| margin-right: percentage(($gutter-width/2) / $page-width) | |
| @if $gutter-position == before | |
| margin-left: percentage($gutter-width / $page-width) | |
| @if $gutter-position == after | |
| margin-right: percentage($gutter-width / $page-width) | |
| @if $gutter-position == inside | |
| &.gutter | |
| padding-left: percentage(($gutter-width/2) / $page-width) | |
| padding-right: percentage(($gutter-width/2) / $page-width) | |
| /* .col-* 설정 */ | |
| @for $i from 1 through $columns | |
| .column.is-#{$i} | |
| +rem-fallback( width, $column-width * $i + $gutter-width * ($i - 1) ) | |
| .is-fluid & | |
| width: percentage( ($column-width * $i + $gutter-width * ($i - 1)) / $page-width ) | |
| // --------------------------------------------------------------------- | |
| /* .is-offset-* 설정 */ | |
| @for $i from 1 to $columns | |
| .column.is-offset-#{$i} | |
| +rem-fallback( margin-left, $column-width * $i + $gutter-width/2 * $i ) | |
| .is-fluid & | |
| margin-left: percentage( ($column-width * $i + $gutter-width/2 * $i) / $page-width ) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote, details, hr, fieldset, pre, table { | |
| margin-top: 0; | |
| margin-bottom: 24px; | |
| margin-bottom: 2.4rem; | |
| } | |
| html { | |
| font-size: 10px; | |
| } | |
| body { | |
| margin: 0; | |
| line-height: 1.5; | |
| font-size: 16px; | |
| font-size: 1.6rem; | |
| } | |
| body, body::before, body::after, body *, body *::before, body *::after { | |
| box-sizing: border-box; | |
| } | |
| h1 { | |
| font-size: 62px; | |
| font-size: 6.2rem; | |
| line-height: 1.17965; | |
| } | |
| h2 { | |
| font-size: 49px; | |
| font-size: 4.9rem; | |
| line-height: 1.47456; | |
| } | |
| h3 { | |
| font-size: 40px; | |
| font-size: 4rem; | |
| line-height: 1.2288; | |
| } | |
| h4 { | |
| font-size: 32px; | |
| font-size: 3.2rem; | |
| line-height: 0.768; | |
| } | |
| h5 { | |
| font-size: 25px; | |
| font-size: 2.5rem; | |
| line-height: 0.96; | |
| } | |
| h6 { | |
| font-size: 20px; | |
| font-size: 2rem; | |
| line-height: 1.2; | |
| } | |
| a { | |
| background-color: transparent; | |
| } | |
| hr { | |
| margin: -1px 0; | |
| border: 1px solid; | |
| } | |
| b, strong, em, small, code { | |
| line-height: 1; | |
| } | |
| sup, sub { | |
| position: relative; | |
| font-size: 75%; | |
| line-height: 0; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| pre, code, kbd, samp { | |
| font-size: 100%; | |
| } | |
| abbr[title] { | |
| cursor: help; | |
| border-bottom: 1px dotted; | |
| text-decoration: none; | |
| } | |
| b, strong { | |
| font-weight: bold; | |
| } | |
| img, video { | |
| vertical-align: bottom; | |
| } | |
| iframe { | |
| border: 0; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| width: 100%; | |
| } | |
| th, td { | |
| border-bottom: 1px solid; | |
| text-align: left; | |
| } | |
| thead th { | |
| vertical-align: bottom; | |
| } | |
| .grid { | |
| min-height: 100vh; | |
| } | |
| .grid:before, .grid::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| width: 960px; | |
| height: 200vh; | |
| transform: translateX(-50%); | |
| background: linear-gradient(180deg, transparent 95%, rgba(239, 64, 15, 0.5) 95%), linear-gradient(90deg, transparent 12.5%, rgba(239, 64, 15, 0.25) 12.5%, rgba(239, 64, 15, 0.25) 87.5%, transparent 87.5%); | |
| background-size: 1px 24px, 80px 80px; | |
| background-size: 0.1rem 2.4rem, 8rem 8rem; | |
| transition: height 0.2s ease-out; | |
| } | |
| .grid.guide-10:before, .grid.guide-10::before { | |
| background-size: 1px 10px, 80px 80px; | |
| background-size: 0.1rem 1rem, 8rem 8rem; | |
| } | |
| .container { | |
| width: 960px; | |
| width: 96rem; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .container.is-fluid { | |
| max-width: 960px; | |
| max-width: 96rem; | |
| } | |
| .row:after, .row::after, .clearfix:after, .clearfix::after { | |
| content: ''; | |
| display: block; | |
| clear: both; | |
| } | |
| .column { | |
| float: left; | |
| margin-left: 10px; | |
| margin-left: 1rem; | |
| margin-right: 10px; | |
| margin-right: 1rem; | |
| } | |
| .is-fluid .column { | |
| margin-left: 1.04167%; | |
| margin-right: 1.04167%; | |
| } | |
| .column.is-1 { | |
| width: 60px; | |
| width: 6rem; | |
| } | |
| .is-fluid .column.is-1 { | |
| width: 6.25%; | |
| } | |
| .column.is-2 { | |
| width: 140px; | |
| width: 14rem; | |
| } | |
| .is-fluid .column.is-2 { | |
| width: 14.58333%; | |
| } | |
| .column.is-3 { | |
| width: 220px; | |
| width: 22rem; | |
| } | |
| .is-fluid .column.is-3 { | |
| width: 22.91667%; | |
| } | |
| .column.is-4 { | |
| width: 300px; | |
| width: 30rem; | |
| } | |
| .is-fluid .column.is-4 { | |
| width: 31.25%; | |
| } | |
| .column.is-5 { | |
| width: 380px; | |
| width: 38rem; | |
| } | |
| .is-fluid .column.is-5 { | |
| width: 39.58333%; | |
| } | |
| .column.is-6 { | |
| width: 460px; | |
| width: 46rem; | |
| } | |
| .is-fluid .column.is-6 { | |
| width: 47.91667%; | |
| } | |
| .column.is-7 { | |
| width: 540px; | |
| width: 54rem; | |
| } | |
| .is-fluid .column.is-7 { | |
| width: 56.25%; | |
| } | |
| .column.is-8 { | |
| width: 620px; | |
| width: 62rem; | |
| } | |
| .is-fluid .column.is-8 { | |
| width: 64.58333%; | |
| } | |
| .column.is-9 { | |
| width: 700px; | |
| width: 70rem; | |
| } | |
| .is-fluid .column.is-9 { | |
| width: 72.91667%; | |
| } | |
| .column.is-10 { | |
| width: 780px; | |
| width: 78rem; | |
| } | |
| .is-fluid .column.is-10 { | |
| width: 81.25%; | |
| } | |
| .column.is-11 { | |
| width: 860px; | |
| width: 86rem; | |
| } | |
| .is-fluid .column.is-11 { | |
| width: 89.58333%; | |
| } | |
| .column.is-12 { | |
| width: 940px; | |
| width: 94rem; | |
| } | |
| .is-fluid .column.is-12 { | |
| width: 97.91667%; | |
| } | |
| .column.is-offset-1 { | |
| margin-left: 70px; | |
| margin-left: 7rem; | |
| } | |
| .is-fluid .column.is-offset-1 { | |
| margin-left: 7.29167%; | |
| } | |
| .column.is-offset-2 { | |
| margin-left: 140px; | |
| margin-left: 14rem; | |
| } | |
| .is-fluid .column.is-offset-2 { | |
| margin-left: 14.58333%; | |
| } | |
| .column.is-offset-3 { | |
| margin-left: 210px; | |
| margin-left: 21rem; | |
| } | |
| .is-fluid .column.is-offset-3 { | |
| margin-left: 21.875%; | |
| } | |
| .column.is-offset-4 { | |
| margin-left: 280px; | |
| margin-left: 28rem; | |
| } | |
| .is-fluid .column.is-offset-4 { | |
| margin-left: 29.16667%; | |
| } | |
| .column.is-offset-5 { | |
| margin-left: 350px; | |
| margin-left: 35rem; | |
| } | |
| .is-fluid .column.is-offset-5 { | |
| margin-left: 36.45833%; | |
| } | |
| .column.is-offset-6 { | |
| margin-left: 420px; | |
| margin-left: 42rem; | |
| } | |
| .is-fluid .column.is-offset-6 { | |
| margin-left: 43.75%; | |
| } | |
| .column.is-offset-7 { | |
| margin-left: 490px; | |
| margin-left: 49rem; | |
| } | |
| .is-fluid .column.is-offset-7 { | |
| margin-left: 51.04167%; | |
| } | |
| .column.is-offset-8 { | |
| margin-left: 560px; | |
| margin-left: 56rem; | |
| } | |
| .is-fluid .column.is-offset-8 { | |
| margin-left: 58.33333%; | |
| } | |
| .column.is-offset-9 { | |
| margin-left: 630px; | |
| margin-left: 63rem; | |
| } | |
| .is-fluid .column.is-offset-9 { | |
| margin-left: 65.625%; | |
| } | |
| .column.is-offset-10 { | |
| margin-left: 700px; | |
| margin-left: 70rem; | |
| } | |
| .is-fluid .column.is-offset-10 { | |
| margin-left: 72.91667%; | |
| } | |
| .column.is-offset-11 { | |
| margin-left: 770px; | |
| margin-left: 77rem; | |
| } | |
| .is-fluid .column.is-offset-11 { | |
| margin-left: 80.20833%; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container show-guide guide-10"></div> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment