Created
April 18, 2012 05:34
-
-
Save pixelwhip/2411274 to your computer and use it in GitHub Desktop.
Sample scss files for establishing a baseline for a new site. I've been starting every project with a variation of these files. They get refined each time and have proved super useful.
This file contains 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
| // | |
| // @file | |
| // Sitewide imports, variables and mixins. | |
| // | |
| @import "compass/css3"; | |
| @import "compass/typography"; | |
| @import "sassy-buttons"; | |
| @import "utilities"; | |
| @import "grids"; | |
| @import "rgbapng"; | |
| // | |
| // Font Sizes | |
| // | |
| $font-size-xxs: 9px; | |
| $font-size-xs: 10px; | |
| $font-size-s: 11px; | |
| $font-size-m: 12px; | |
| $font-size-l: 14px; | |
| $font-size-xl: 16px; | |
| $font-size-xxl: 24px; | |
| $font-size-xxxl: 30px; | |
| $font-size-xxxxl: 36px; | |
| $font-size-xxxxxl: 40px; | |
| // Font Shortcuts | |
| $fs-xxs: $font-size-xxs; | |
| $fs-xs: $font-size-xs; | |
| $fs-s: $font-size-s; | |
| $fs-m: $font-size-m; | |
| $fs-l: $font-size-l; | |
| $fs-xl: $font-size-xl; | |
| $fs-xxl: $font-size-xxl; | |
| $fs-xxxl: $font-size-xxxl; | |
| $fs-xxxxl: $font-size-xxxxl; | |
| $fs-xxxxxl: $font-size-xxxxxl; | |
| // | |
| // Configure Vertical Rhythm. | |
| // | |
| $base-font-size: $font-size-m; // Font-size of your body copy. | |
| $base-line-height: 9px; // Setting the base-line-height half | |
| // the height of the desired body copy | |
| // line-height helps prevent sparse | |
| // leading at different font-sizes. | |
| // | |
| // Typography | |
| // | |
| // Body copy font stack. | |
| $primary-typeface: Verdana, Helvetica, Arial, sans-serif; | |
| // Heading font stack. | |
| $secondary-typeface: CabinSketchRegular, Helvetica, Arial, sans-serif; | |
| // Accent font stack. (Defaults to the secondary typeface.) | |
| $tertiary-typeface: $secondary-typeface; | |
| // | |
| // Colors | |
| // | |
| $off-white: #fdfafb; | |
| $warm-grey: #393938; | |
| $brown: #7e745f; | |
| $brown-light: #92855a; | |
| $brown-dark: #292419; | |
| $red: #95012a; | |
| $blue-dark: #0e445a; | |
| $blue-light: #358aac; | |
| $green: #76800b; | |
| $green-light: #c2d02e; | |
| $orange: #f7b73b; | |
| $orange-light: #fdc14c; | |
| $primary-color: $warm-grey; // Body copy color. | |
| $secondary-color: $red; // Link color. | |
| $tertiary-color: $blue-light; // Accent color. | |
| $border-color: $brown; // Border color. | |
| // | |
| // Layout | |
| // | |
| $zen-column-count: 12; | |
| $zen-gutter-width: 24px; | |
| // | |
| // Buttons | |
| // | |
| $sb-padding: 0.5em 1em; | |
| $sb-text-style: "none"; | |
| @mixin button($button-color: $secondary-color, $text-color: $off-white) { | |
| @include sassy-button("flat", 6px, $fs-m, $button-color, $button-color, $text-color ); | |
| font-family: $secondary-typeface; | |
| padding: .125em 10px; | |
| } | |
| @mixin button-hover($button-color: $secondary-color, $text-color: white) { | |
| background-color: lighten($button-color, 10%); | |
| color: $text-color; | |
| } | |
| @mixin button-active($button-color: $secondary-color, $text-color: $off-white) { | |
| background-color: darken($button-color, 15%); | |
| color: $text-color; | |
| } | |
| // | |
| // Sprites | |
| // | |
| @import "icon/*.png"; | |
| // Like and Accept link sprites | |
| @mixin link-icon($spritename) { | |
| &:after { | |
| content: ""; | |
| @include icon-sprite($spritename); | |
| @include inline-block; | |
| width: 36px; | |
| height: 36px; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| margin-left: -18px; | |
| } | |
| &:active { | |
| &:after { | |
| @include icon-sprite($spritename + '-active'); | |
| } | |
| } | |
| &:hover { | |
| &:after { | |
| @include icon-sprite($spritename + '-hover'); | |
| } | |
| } | |
| } |
This file contains 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
| // | |
| // @file | |
| // Sitewide default Styles. | |
| // This defines all the base unclassed HTML tag styles for your site. | |
| // | |
| // If a WYSIWYG is available, it should reference this file for | |
| // for styling so it matches the user facing page as close as possible. | |
| // The only class selectors used here, are those made available to the | |
| // WYSIWYG editor. | |
| // | |
| @import "variables"; | |
| // Import Font Face fonts | |
| @font-face { | |
| font-family: 'CabinSketchRegular'; | |
| src: url('../fonts/cabinsketch-fontfacekit/CabinSketch-Regular-webfont.eot'); | |
| src: url('../fonts/cabinsketch-fontfacekit/CabinSketch-Regular-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('../fonts/cabinsketch-fontfacekit/CabinSketch-Regular-webfont.woff') format('woff'), | |
| url('../fonts/cabinsketch-fontfacekit/CabinSketch-Regular-webfont.ttf') format('truetype'), | |
| url('../fonts/cabinsketch-fontfacekit/CabinSketch-Regular-webfont.svg#CabinSketchRegular') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| @include establish-baseline(); | |
| html > body { | |
| //@include debug-vertical-alignment(); | |
| @include adjust-leading-to(2); | |
| color: $primary-color; | |
| font-family: $primary-typeface; | |
| } | |
| h1 { | |
| $font-size: $fs-xxxxxl; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(1, 0, 0, 1, $font-size); | |
| color: $tertiary-color; | |
| font-family: $secondary-typeface; | |
| font-weight: normal; | |
| } | |
| h2 { | |
| $font-size: $fs-xl; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(3, 0, 0, 1, $font-size); | |
| font-family: $secondary-typeface; | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| } | |
| h3 { | |
| $font-size: $fs-l; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(1, 0, 0, 1, $font-size); | |
| font-weight: bold; | |
| } | |
| h4 { | |
| $font-size: $fs-m; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(4, 0, 0, 0, $font-size); | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| } | |
| h5 { | |
| $font-size: $fs-m; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(4, 0, 0, 0, $font-size); | |
| font-weight: normal; | |
| text-transform: uppercase; | |
| } | |
| h6 { | |
| $font-size: $fs-s; | |
| @include adjust-font-size-to($font-size); | |
| @include rhythm(4, 0, 0, 0, $font-size); | |
| } | |
| p { | |
| @include rhythm(0, 0, 0, 2, $fs-m); | |
| } | |
| img { | |
| @include margin-trailer(1); | |
| height: auto; | |
| max-width: 100%; | |
| } | |
| blockquote { | |
| @include rhythm(1, 0, 0, 1, $fs-m); | |
| } | |
| em { | |
| color: darken($primary-color, 10%); | |
| } | |
| strong { | |
| font-weight: bold; | |
| } | |
| small { | |
| font-size: $fs-s; | |
| } | |
| // | |
| // Links | |
| // | |
| a { | |
| color: $secondary-color; | |
| text-decoration: none; | |
| &:visited { | |
| color: darken($secondary-color, 10%); | |
| } | |
| &:hover, | |
| &:active { | |
| color: $tertiary-color; | |
| text-decoration: underline; | |
| } | |
| } | |
| // | |
| // Lists | |
| // | |
| ul, | |
| ol { | |
| @include rhythm(1, 0, 0, 1, $fs-m); | |
| } | |
| dt { | |
| $font-size: $fs-m; | |
| font-family: $secondary-typeface; | |
| @include adjust-font-size-to($font-size); | |
| @include adjust-leading-to(1.5, $font-size); | |
| font-weight: normal; | |
| } | |
| // | |
| // Tables | |
| // | |
| // Must be defined outside a selector for scope reasons. | |
| $table-size: $fs-s; | |
| table { | |
| @include adjust-font-size-to($table-size); | |
| // Align every third line to every second baseline. | |
| @include adjust-leading-to(1.5, $table-size); | |
| @include rhythm(1, 0, 0, 1, $table-size); | |
| width: 100%; | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| thead { | |
| th { | |
| vertical-align: bottom; | |
| } | |
| &:first-child tr { | |
| th, | |
| td { | |
| // Set to transparent to preserve vertical rhythm. | |
| border-color: transparent; | |
| } | |
| } | |
| } | |
| th, | |
| td { | |
| border-color: $border-color; | |
| border-bottom: 0 none; | |
| @include rhythm(0, .167, .167, 0, $table-size); | |
| @include leading-border(1px, .167, $table-size, solid); | |
| padding-left: .5em; | |
| padding-right: .5em; | |
| text-align: left; | |
| vertical-align: top; | |
| } | |
| th { | |
| font-weight: bold; | |
| } | |
| caption { | |
| caption-side: bottom; | |
| @include leader(1/3); | |
| padding-left: .5em; | |
| text-align: left; | |
| font-style: italic; | |
| } | |
| // | |
| // Forms | |
| // | |
| input[type="text"], | |
| input[type="search"], | |
| input[type="textarea"] { | |
| @include border-radius(3px); | |
| @include rhythm(0, .25, .25, 0); | |
| @include adjust-leading-to(2); | |
| @include single-box-shadow($brown, 0, 0, 2px, 0px, true); | |
| border: none; | |
| } | |
| button, | |
| .button, | |
| input[type="submit"] { | |
| @include button; | |
| &:hover { | |
| @include button-hover; | |
| }; | |
| &:active { | |
| @include button-active; | |
| }; | |
| } | |
| // | |
| // WYSIWYG available Styles. | |
| // | |
| .intro { | |
| $font-size: $fs-xl; | |
| @include adjust-font-size-to($font-size); | |
| @include padding-leader(.25, $font-size); | |
| @include margin-trailer(.75, $font-size); | |
| } | |
| .fine-print { | |
| $font-size: $fs-s; | |
| @include adjust-font-size-to($font-size); | |
| // Align every third line to every second baseline. | |
| @include adjust-leading-to(1.5, $font-size); | |
| // Add margin based on the local leading. | |
| @include margin-trailer(4/3); | |
| display: block; | |
| } | |
| .drop-cap { | |
| &:first-letter { | |
| font-size: 300%; | |
| float: left; | |
| margin: .133em .125em 0 0; | |
| text-transform: uppercase; | |
| } | |
| } | |
| .image-left { | |
| float: left; | |
| margin-right: 1em; | |
| } | |
| .image-right { | |
| clear: left; | |
| float: right; | |
| margin-left: 1em; | |
| } |
This file contains 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
| <!-- Paste this into the body of a node and use | |
| as a guide for styling unclassed html tags --> | |
| <h2>Section Heading (h2)</h2> | |
| <img src="http://placekitten.com/600/288" /> | |
| <p><img src="http://placekitten.com/340/216" class="image-left"/>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| <p><img src="http://placekitten.com/230/216" class="image-right"/>Ut enim ad minim veniam, quis nostrud exercitation this is a link on hover nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> | |
| <h3>Section Heading (h3)</h3> | |
| <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| <h4>Section Heading (h4)</h4> | |
| <blockquote> Blockquote Style: Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </blockquote> | |
| <p>Basic Paragraph Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> | |
| <h5>Section Heading (h5)</h5> | |
| <p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| <h6>Section Heading (h6)</h6> | |
| <p>Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> | |
| <ul> | |
| <li>Unordered list Style: Ut enim ad minim veniam.</li> | |
| <li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> | |
| <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> | |
| </ul> | |
| <ol> | |
| <li>Unordered list Style: Ut enim ad minim veniam.</li> | |
| <li>Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </li> | |
| <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </li> | |
| </ol> | |
| <small class="fine-print">Fine Print Style: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, this is a link quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, this is a visited link consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </small> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>thead th</th> | |
| <th>thead th</th> | |
| <th>thead th</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr class="odd"> | |
| <th>tbody th</th> | |
| <td>tbody td</td> | |
| <td>tbody td</td> | |
| </tr> | |
| <tr class="even"> | |
| <th>tbody th</th> | |
| <td>tbody td</td> | |
| <td>tbody td</td> | |
| </tr> | |
| <tr class="odd"> | |
| <th>tbody th</th> | |
| <td>tbody td</td> | |
| <td>tbody td</td> | |
| </tr> | |
| </tbody> | |
| <tfoot> | |
| <tr> | |
| <th>tfoot th</th> | |
| <td>tfoot td</td> | |
| <td>tfoot td</td> | |
| </tr> | |
| </tfoot> | |
| </table> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment