Created
January 10, 2014 17:11
-
-
Save wastemobile/8358316 to your computer and use it in GitHub Desktop.
一個極簡的起手式，使用LESS，具備Vertical Rhythm設計。
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
| /* Vars */ | |
| @font-size: 16px; | |
| @vertical-rhythm: @font-size * 1.5; | |
| @fontstack1: sans-serif; /* Headings */ | |
| @fontstack2: Georgia, serif; /* Body copy */ | |
| @color1: #20bd7c; /* Main theme colour colour */ | |
| @color2: #333; /* headings */ | |
| @color3: #888; /* Neutral / body copy colour */ | |
| @color4: #e5e5e5; /* Background / light colour */ | |
| /* Grid Variables */ | |
| @columnWidth: 49px; | |
| @gutter: 16px; | |
| @allColumns: @columnWidth * 12; | |
| @allGutters: (@gutter * 12) * 2; | |
| @totalWidth: @allColumns + @allGutters; | |
| /* Imports */ | |
| /* @import 'animation.css'; Un-comment if using animations */ | |
| /* Mixins */ | |
| .clearfix() { | |
| overflow: hidden; | |
| zoom:1; | |
| } | |
| .clear() { | |
| clear: both; | |
| } | |
| .border_radius(@radius:10px) { | |
| -webkit-border-radius:@radius; | |
| -moz-border-radius:@radius; | |
| border-radius:@radius; | |
| } | |
| .border_radius_right(@radius:10px) { | |
| -webkit-border-top-right-radius: @radius; | |
| -webkit-border-bottom-right-radius: @radius; | |
| -moz-border-radius-topright: @radius; | |
| -moz-border-radius-bottomright: @radius; | |
| border-top-right-radius: @radius; | |
| border-bottom-right-radius: @radius; | |
| } | |
| .border_radius_left(@radius:10px) { | |
| -webkit-border-top-left-radius: @radius; | |
| -webkit-border-bottom-left-radius: @radius; | |
| -moz-border-radius-topleft: @radius; | |
| -moz-border-radius-bottomleft: @radius; | |
| border-top-left-radius: @radius; | |
| border-bottom-left-radius: @radius; | |
| } | |
| .border_radius_bottom(@radius:10px) { | |
| -webkit-border-bottom-left-radius: @radius; | |
| -webkit-border-bottom-right-radius: @radius; | |
| -moz-border-radius-bottomleft: @radius; | |
| -moz-border-radius-bottomright: @radius; | |
| border-bottom-left-radius: @radius; | |
| border-bottom-right-radius: @radius; | |
| } | |
| .border_radius_top(@radius:10px) { | |
| -webkit-border-top-left-radius: @radius; | |
| -webkit-border-top-right-radius: @radius; | |
| -moz-border-radius-topleft: @radius; | |
| -moz-border-radius-topright: @radius; | |
| border-top-left-radius: @radius; | |
| border-top-right-radius: @radius; | |
| } | |
| .box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) { | |
| box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| -webkit-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| -moz-box-shadow:@shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| } | |
| .inset_box_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_in:3px, @shadow_color:#888) { | |
| box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| -webkit-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| -moz-box-shadow:inset @shadow_x @shadow_y @shadow_rad @shadow_in @shadow_color; | |
| } | |
| .text_shadow(@shadow_x:3px, @shadow_y:3px, @shadow_rad:3px, @shadow_color:#fff) { | |
| text-shadow:@shadow_x @shadow_y @shadow_rad @shadow_color; | |
| } | |
| .transition(@selector:all, @animation:ease-in-out, @duration:.2s) { | |
| -webkit-transition:@selector @animation @duration; | |
| -moz-transition:@selector @animation @duration; | |
| -o-transition:@selector @animation @duration; | |
| transition:@selector @animation @duration; | |
| } | |
| .vertical_gradient(@from: #000, @to: #FFF) { | |
| background: @from; | |
| background: -webkit-gradient(linear, left top, left bottom, from(@from), to(@to)); | |
| background: -webkit-linear-gradient(@from, @to); | |
| background-image: -moz-linear-gradient(top, @from, @to); | |
| background-image: -moz-gradient(top, @from, @to); | |
| filter: e(%("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d,endColorstr=%d)", @from, @to)); | |
| -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=%d, endColorstr=%d)", @from, @to); | |
| } | |
| /* The grid */ | |
| .theWidth (@theColumn: 1, @theGutter: 0) { | |
| width: (@columnWidth * @theColumn) + (@gutter * @theGutter); | |
| } | |
| .grid_1 { .theWidth(1,0); } | |
| .grid_2 { .theWidth(2,2); } | |
| .grid_3 { .theWidth(3,4); } | |
| .grid_4 { .theWidth(4,6); } | |
| .grid_5 { .theWidth(5,8); } | |
| .grid_6 { .theWidth(6,10); } | |
| .grid_7 { .theWidth(7,12); } | |
| .grid_8 { .theWidth(8,14); } | |
| .grid_9 { .theWidth(9,16); } | |
| .grid_10 { .theWidth(10,18); } | |
| .grid_11 { .theWidth(11,20); } | |
| .grid_12 { .theWidth(12,22); } | |
| .column { | |
| margin: 0 @gutter; | |
| overflow: hidden; | |
| float: left; | |
| display: inline; | |
| } | |
| .row { | |
| width: @totalWidth; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| } | |
| .row .row { | |
| margin: 0 (@gutter * -1); | |
| width: auto; | |
| display: inline-block; | |
| } | |
| /* Headings */ | |
| h1,h2,h3,h4,h5,h6 { | |
| font-family:@fontstack2; | |
| } | |
| h1 { | |
| font-size:@font-size * 3.0625; /* 49px */ | |
| line-height:1.4694em; /*72px*/ | |
| margin-top: 0.87em; | |
| margin-bottom:0.1096em; | |
| } | |
| h2 { | |
| font-size:@font-size * 2.25; /* 36px */ | |
| line-height: 1.3333em; /*48px*/ | |
| margin-top:1em; | |
| margin-bottom:.3334em; | |
| } | |
| h3 { | |
| font-size:@font-size * 1.75; /* 28px */ | |
| line-height:1.7143em; /*48px*/ | |
| margin-top: 1.4142em; | |
| margin-bottom:0.3333em; | |
| } | |
| h4 { | |
| font-size:@font-size * 1.4375; /* 23px */ | |
| line-height:1.0435em; /*24px*/ | |
| margin-top:1.2912em; | |
| margin-bottom:0.7956em ; | |
| } | |
| h5 { | |
| font-size:@font-size * 1.125em; /* 16px */ | |
| line-height: 1.3333em; /*24px*/ | |
| margin-top:1.8em; /* 2.7222em */ | |
| margin-bottom:.9222em; | |
| } | |
| body { | |
| font-size:@font-size; | |
| line-height:@vertical-rhythm; | |
| font-family: @fontstack2; | |
| } | |
| p, ul, ol, dl, table, form { | |
| margin-bottom:@vertical-rhythm; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment