Last active
October 8, 2015 05:39
-
-
Save df2k2/6b5cb40c5d298f414916 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
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> | |
| <h2>Color Consistent Buttons</h2> | |
| <p> | |
| <a href="#" class="button">Standard</a> | |
| <a href="#" class="special-button">Special</a> | |
| <a href="#" class="button disabled">Yet another one</a> | |
| </p> | |
| </div> | |
| <div> | |
| <h2>Buttons With Color Contrast Checks</h2> | |
| <p> | |
| <a href="#" class="button good-contrast">Gets no compile warning</a> | |
| <a href="#" class="button bad-contrast">Gets a compile warning</a><br /> | |
| </p> | |
| </div> | |
| <div> | |
| <h2>Buttons With Color Contrast Selections</h2> | |
| <p> | |
| <a href="#" class="button smart-light-contrast">Light background</a> | |
| <a href="#" class="button smart-contrast">Dark background</a> | |
| </p> | |
| </div> | |
| <h3>Automatic rows</h3> | |
| <div class="code"> | |
| <code>@include outer-container;</code> | |
| </div> | |
| <section class="fifth"> | |
| <pre> | |
| li.block { | |
| @include span-columns(3); | |
| @include omega(4n); | |
| }</pre> | |
| <div class="block"> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| </div> | |
| </section> | |
| <h3>Media Queries</h3> | |
| <section class="sixth"> | |
| <pre> | |
| @include outer-container; | |
| $mobile: new-breakpoint(max-width 500px 4); | |
| </pre> | |
| <div id="alpha"> | |
| <pre> | |
| @include span-columns(4); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| </pre> | |
| </div> | |
| <div id="beta"> | |
| <pre> | |
| @include span-columns(8); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| </pre> | |
| </div> | |
| </section> | |
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
| // ---- | |
| // Sass (v3.4.14) | |
| // Compass (v1.0.3) | |
| // Bitters (v0.10.0) | |
| // Bourbon (v4.2.3) | |
| // Fancy Buttons (v1.2.0) | |
| // Neat (v1.6.0) | |
| // Toolkit (v2.9.0) | |
| // ---- | |
| /** Toolkit */ | |
| @import "toolkit"; | |
| /** Bourbon */ | |
| @import "bourbon/bourbon"; | |
| /** Neat */ | |
| @import "neat/neat"; | |
| /** Bitters */ | |
| @import "bitters/bitters"; | |
| /** BootStrap */ | |
| // @import "bootstrap"; | |
| /** Fancy Buttons */ | |
| @import "fancy-buttons"; | |
| /* Content Start */ | |
| $breakpoints: 480px, 600px, 840px, 960px, 1280px, 1600px !global; | |
| $breakpoint-gutters: 16px, 16px, 24px, 24px, 24px, 24px !global; | |
| $breakpoint-columns: 4, 8, 12, 12, 12, 12 !global; | |
| $breakpoint-names: xs, sm, md, lg, xl, xx !global; | |
| $bp-xs: nth($breakpoints,1) !global; | |
| $bp-sm: nth($breakpoints,2) !global; | |
| $bp-md: nth($breakpoints,3) !global; | |
| $bp-lg: nth($breakpoints,4) !global; | |
| $bp-xl: nth($breakpoints,5) !global; | |
| $bp-xx: nth($breakpoints,6) !global; | |
| // Define your breakpoints | |
| $mq-xx: new-breakpoint(max-width nth($breakpoints,6) nth($breakpoint-columns,6)) !global; | |
| $mq-xl: new-breakpoint(max-width nth($breakpoints,5) nth($breakpoint-columns,5)) !global; | |
| $mq-lg: new-breakpoint(max-width nth($breakpoints,4) nth($breakpoint-columns,4)) !global; | |
| $mq-md: new-breakpoint(max-width nth($breakpoints,3) nth($breakpoint-columns,3)) !global; | |
| $mq-sm: new-breakpoint(max-width nth($breakpoints,2) nth($breakpoint-columns,2)) !global; | |
| $mq-xs: new-breakpoint(max-width nth($breakpoints,1) nth($breakpoint-columns,1)) !global; | |
| //$mobile: new-breakpoint(max-width 480px 4) !default; | |
| $mobile: $mq-sm; | |
| $mqs: $mq-xx $mq-xl $mq-lg $mq-md $mq-sm $mq-xs; | |
| /* | |
| .col { | |
| width:$bp-xs; | |
| } | |
| */ | |
| @each $y in $mqs { | |
| @include media($y) { | |
| } | |
| } | |
| $x: 1 !global; | |
| @each $i in $breakpoints { | |
| .mq-#{nth($breakpoint-names,$x)} { | |
| content: "#{$mq-xs}"; | |
| } | |
| @include media(#{nth($breakpoint-names,$x)}) { | |
| } | |
| .test-#{nth($breakpoint-columns,$x)} { | |
| content:"."; | |
| } | |
| .col-#{nth($breakpoint-columns,$x)} { | |
| width:$i; | |
| height: $x; | |
| $x:$x+1 !global; | |
| } | |
| } | |
| $visual-grid: true; | |
| $visual-grid-color: #E6F6FF; | |
| $visual-grid-opacity: 0.4; | |
| $ltblue: #D5EEFB; | |
| $midblue: #AADBF5; | |
| $dkblue: #41A8DF; | |
| $dkerblue: #298EC3; | |
| $textblue: #072f44; | |
| $body-line-height:1; | |
| section { | |
| background-color: $ltblue; | |
| text-align: center; | |
| line-height: $body-line-height*1.5; | |
| div { | |
| background-color: $midblue; | |
| font-size: 0.8em; | |
| margin-bottom: 2em; | |
| } | |
| &.fifth { | |
| @include outer-container(); | |
| > pre { } | |
| .box { | |
| @include span-columns(3); | |
| @include omega(4n); | |
| } | |
| } | |
| &.sixth { | |
| > pre { | |
| padding: 10px 0; | |
| } | |
| @include media($mobile) { | |
| font-size: 0.9em; | |
| line-height: 1.5em; | |
| } | |
| div { | |
| line-height: 2em; | |
| min-height: 20em; | |
| text-align: left; | |
| padding: 1em; | |
| } | |
| div#alpha { | |
| @include span-columns(4); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| } | |
| div#beta { | |
| @include span-columns(8); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| } | |
| } | |
| } | |
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
| /** Toolkit */ | |
| /** Bourbon */ | |
| /** Neat */ | |
| * { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /** Bitters */ | |
| button, | |
| input[type="submit"] { | |
| -webkit-font-smoothing: antialiased; | |
| background-color: #477DCA; | |
| border-radius: 0.1875em; | |
| color: white; | |
| display: inline-block; | |
| font-size: 1em; | |
| font-weight: bold; | |
| line-height: 1; | |
| padding: .75em 1em; | |
| text-decoration: none; | |
| } | |
| button:hover, | |
| input[type="submit"]:hover { | |
| background-color: #2c5999; | |
| color: white; | |
| } | |
| body { | |
| -webkit-font-smoothing: antialiased; | |
| background-color: white; | |
| color: #333; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 1em; | |
| line-height: 1.5; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| line-height: 1.25em; | |
| margin: 0; | |
| text-rendering: optimizeLegibility; | |
| } | |
| h1 { | |
| font-size: 2.25em; | |
| } | |
| h2 { | |
| font-size: 2em; | |
| } | |
| h3 { | |
| font-size: 1.75em; | |
| } | |
| h4 { | |
| font-size: 1.5em; | |
| } | |
| h5 { | |
| font-size: 1.25em; | |
| } | |
| h6 { | |
| font-size: 1em; | |
| } | |
| p { | |
| margin: 0 0 0.75em; | |
| } | |
| a { | |
| -webkit-transition: color 0.1s linear; | |
| -moz-transition: color 0.1s linear; | |
| transition: color 0.1s linear; | |
| color: #477DCA; | |
| text-decoration: none; | |
| } | |
| a:hover { | |
| color: #2c5999; | |
| } | |
| a:active, a:focus { | |
| color: #2c5999; | |
| outline: none; | |
| } | |
| hr { | |
| border-bottom: 1px solid #DDD; | |
| border-left: none; | |
| border-right: none; | |
| border-top: none; | |
| margin: 1.5em 0; | |
| } | |
| img { | |
| margin: 0; | |
| max-width: 100%; | |
| } | |
| blockquote { | |
| border-left: 2px solid #DDD; | |
| color: #595959; | |
| margin: 1.5em 0; | |
| padding-left: 0.75em; | |
| } | |
| cite { | |
| color: #737373; | |
| font-style: italic; | |
| } | |
| cite:before { | |
| content: '\2014 \00A0'; | |
| } | |
| fieldset { | |
| background: #f7f7f7; | |
| border: 1px solid #DDD; | |
| margin: 0 0 0.75em 0; | |
| padding: 1.5em; | |
| } | |
| input, | |
| label, | |
| select { | |
| display: block; | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 1em; | |
| } | |
| label { | |
| font-weight: bold; | |
| margin-bottom: 0.375em; | |
| } | |
| label.required:after { | |
| content: "*"; | |
| } | |
| label abbr { | |
| display: none; | |
| } | |
| textarea, | |
| input[type="email"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="url"], input[type="color"], input[type="date"], input[type="datetime"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], | |
| select[multiple=multiple] { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| -webkit-transition: border-color; | |
| -moz-transition: border-color; | |
| transition: border-color; | |
| background-color: white; | |
| border-radius: 0.1875em; | |
| border: 1px solid #DDD; | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06); | |
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| font-size: 1em; | |
| margin-bottom: 0.75em; | |
| padding: 0.5em 0.5em; | |
| width: 100%; | |
| } | |
| textarea:hover, | |
| input[type="email"]:hover, input[type="number"]:hover, input[type="password"]:hover, input[type="search"]:hover, input[type="tel"]:hover, input[type="text"]:hover, input[type="url"]:hover, input[type="color"]:hover, input[type="date"]:hover, input[type="datetime"]:hover, input[type="datetime-local"]:hover, input[type="month"]:hover, input[type="time"]:hover, input[type="week"]:hover, | |
| select[multiple=multiple]:hover { | |
| border-color: #c4c4c4; | |
| } | |
| textarea:focus, | |
| input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, | |
| select[multiple=multiple]:focus { | |
| border-color: #477DCA; | |
| box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(55, 112, 192, 0.7); | |
| outline: none; | |
| } | |
| textarea { | |
| resize: vertical; | |
| } | |
| input[type="search"] { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| -ms-appearance: none; | |
| -o-appearance: none; | |
| appearance: none; | |
| } | |
| input[type="checkbox"], input[type="radio"] { | |
| display: inline; | |
| margin-right: 0.375em; | |
| } | |
| input[type="file"] { | |
| margin-bottom: 0.75em; | |
| padding-bottom: 0.5em; | |
| width: 100%; | |
| } | |
| select { | |
| width: auto; | |
| max-width: 100%; | |
| margin-bottom: 1.5em; | |
| } | |
| table { | |
| border-collapse: collapse; | |
| margin: 0.75em 0; | |
| table-layout: fixed; | |
| width: 100%; | |
| } | |
| th { | |
| border-bottom: 1px solid #b7b7b7; | |
| font-weight: bold; | |
| padding: 0.75em 0; | |
| text-align: left; | |
| } | |
| td { | |
| border-bottom: 1px solid #DDD; | |
| padding: 0.75em 0; | |
| } | |
| tr, td, th { | |
| vertical-align: middle; | |
| } | |
| ul, ol { | |
| margin: 0; | |
| padding: 0; | |
| list-style-type: none; | |
| } | |
| dl { | |
| margin-bottom: 0.75em; | |
| } | |
| dl dt { | |
| font-weight: bold; | |
| margin-top: 0.75em; | |
| } | |
| dl dd { | |
| margin: 0; | |
| } | |
| button, | |
| input[type="submit"] { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| -ms-appearance: none; | |
| -o-appearance: none; | |
| appearance: none; | |
| border: none; | |
| cursor: pointer; | |
| user-select: none; | |
| vertical-align: middle; | |
| white-space: nowrap; | |
| } | |
| /** BootStrap */ | |
| /** Fancy Buttons */ | |
| /* incase an inverted custom gradient isn't specified */ | |
| .fancy-button-reset-base-class { | |
| font-family: "Lucida Grande", Lucida, Arial, sans-serif; | |
| background: url('/images/button_bg.png') repeat-x bottom left; | |
| margin: 0; | |
| width: auto; | |
| overflow: visible; | |
| display: inline-block; | |
| cursor: pointer; | |
| text-decoration: none; | |
| border-style: solid; | |
| font-weight: bold; | |
| } | |
| .fancy-button-reset-base-class::-moz-focus-inner { | |
| border: none; | |
| padding: 0; | |
| } | |
| .fancy-button-reset-base-class:focus { | |
| outline: none; | |
| } | |
| /* Content Start */ | |
| /* | |
| .col { | |
| width:$bp-xs; | |
| } | |
| */ | |
| .mq-xs { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-4 { | |
| content: "."; | |
| } | |
| .col-4 { | |
| width: 480px; | |
| height: 1; | |
| } | |
| .mq-sm { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-8 { | |
| content: "."; | |
| } | |
| .col-8 { | |
| width: 600px; | |
| height: 2; | |
| } | |
| .mq-md { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-12 { | |
| content: "."; | |
| } | |
| .col-12 { | |
| width: 840px; | |
| height: 3; | |
| } | |
| .mq-lg { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-12 { | |
| content: "."; | |
| } | |
| .col-12 { | |
| width: 960px; | |
| height: 4; | |
| } | |
| .mq-xl { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-12 { | |
| content: "."; | |
| } | |
| .col-12 { | |
| width: 1280px; | |
| height: 5; | |
| } | |
| .mq-xx { | |
| content: "max-width 480px 4"; | |
| } | |
| .test-12 { | |
| content: "."; | |
| } | |
| .col-12 { | |
| width: 1600px; | |
| height: 6; | |
| } | |
| section { | |
| background-color: #D5EEFB; | |
| text-align: center; | |
| line-height: 1.5; | |
| } | |
| section div { | |
| background-color: #AADBF5; | |
| font-size: 0.8em; | |
| margin-bottom: 2em; | |
| } | |
| section.fifth { | |
| *zoom: 1; | |
| max-width: 68em; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| section.fifth:before, section.fifth:after { | |
| content: " "; | |
| display: table; | |
| } | |
| section.fifth:after { | |
| clear: both; | |
| } | |
| section.fifth .box { | |
| float: left; | |
| display: block; | |
| margin-right: 2.3576516%; | |
| width: 23.2317613%; | |
| } | |
| section.fifth .box:last-child { | |
| margin-right: 0; | |
| } | |
| section.fifth .box:nth-child(4n) { | |
| margin-right: 0; | |
| } | |
| section.fifth .box:nth-child(4n+1) { | |
| clear: left; | |
| } | |
| section.sixth > pre { | |
| padding: 10px 0; | |
| } | |
| @media screen and (max-width: 600px) { | |
| section.sixth { | |
| font-size: 0.9em; | |
| line-height: 1.5em; | |
| } | |
| } | |
| section.sixth div { | |
| line-height: 2em; | |
| min-height: 20em; | |
| text-align: left; | |
| padding: 1em; | |
| } | |
| section.sixth div#alpha { | |
| float: left; | |
| display: block; | |
| margin-right: 2.3576516%; | |
| width: 31.7615656%; | |
| } | |
| section.sixth div#alpha:last-child { | |
| margin-right: 0; | |
| } | |
| @media screen and (max-width: 600px) { | |
| section.sixth div#alpha { | |
| float: left; | |
| display: block; | |
| margin-right: 3.57866361%; | |
| width: 35.26333525%; | |
| } | |
| section.sixth div#alpha:last-child { | |
| margin-right: 0; | |
| } | |
| } | |
| section.sixth div#beta { | |
| float: left; | |
| display: block; | |
| margin-right: 2.3576516%; | |
| width: 65.8807828%; | |
| } | |
| section.sixth div#beta:last-child { | |
| margin-right: 0; | |
| } | |
| @media screen and (max-width: 600px) { | |
| section.sixth div#beta { | |
| float: left; | |
| display: block; | |
| margin-right: 3.57866361%; | |
| width: 35.26333525%; | |
| } | |
| section.sixth div#beta:last-child { | |
| margin-right: 0; | |
| } | |
| } |
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> | |
| <h2>Color Consistent Buttons</h2> | |
| <p> | |
| <a href="#" class="button">Standard</a> | |
| <a href="#" class="special-button">Special</a> | |
| <a href="#" class="button disabled">Yet another one</a> | |
| </p> | |
| </div> | |
| <div> | |
| <h2>Buttons With Color Contrast Checks</h2> | |
| <p> | |
| <a href="#" class="button good-contrast">Gets no compile warning</a> | |
| <a href="#" class="button bad-contrast">Gets a compile warning</a><br /> | |
| </p> | |
| </div> | |
| <div> | |
| <h2>Buttons With Color Contrast Selections</h2> | |
| <p> | |
| <a href="#" class="button smart-light-contrast">Light background</a> | |
| <a href="#" class="button smart-contrast">Dark background</a> | |
| </p> | |
| </div> | |
| <h3>Automatic rows</h3> | |
| <div class="code"> | |
| <code>@include outer-container;</code> | |
| </div> | |
| <section class="fifth"> | |
| <pre> | |
| li.block { | |
| @include span-columns(3); | |
| @include omega(4n); | |
| }</pre> | |
| <div class="block"> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| <div class="box"> | |
| <code>li.block</code> | |
| </div> | |
| </div> | |
| </section> | |
| <h3>Media Queries</h3> | |
| <section class="sixth"> | |
| <pre> | |
| @include outer-container; | |
| $mobile: new-breakpoint(max-width 500px 4); | |
| </pre> | |
| <div id="alpha"> | |
| <pre> | |
| @include span-columns(4); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| </pre> | |
| </div> | |
| <div id="beta"> | |
| <pre> | |
| @include span-columns(8); | |
| @include media($mobile) { | |
| @include span-columns(3); | |
| } | |
| </pre> | |
| </div> | |
| </section> | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment