Uses bourbon... Thus add:
@import "bourbon"
This code is exactly the same as the code Stephen Scaff has on GitHub. This version just combines the partials for ease of creating a Pen.
A Pen by Munair Simpson on CodePen.
Forked from anonymous/Stephen Scaff's SCSS Banner.markdown
Last active
April 22, 2016 02:29
-
-
Save munair/d222d08d60211f2235d4a9e84be0e012 to your computer and use it in GitHub Desktop.
Stephen Scaff's SCSS Banner
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
| <section class="sect-banner"> | |
| <!-- Slider animation --> | |
| <ul class="kf-slider"> | |
| <li></li> | |
| <li></li> | |
| <li></li> | |
| </ul> | |
| <div class="v-center"> | |
| <h1>Stupid Simple Slider</h1> | |
| <p>Silky smooth background image slider with css keyframes</p> | |
| </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
| /* --Bourbon from CodeKit | |
| =======================================*/ | |
| @import 'bourbon'; | |
| /* --settings | |
| =======================================*/ | |
| /*---------------------------------------------- | |
| --Fonts | |
| ----------------------------------------------- */ | |
| $font-header: "playfair display", georgia, times, serif; | |
| $font-paragraph: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| /*---------------------------------------------- | |
| --MQs | |
| ----------------------------------------------- */ | |
| $mq-xsmall: 22em; | |
| $mq-small: 36em; | |
| $mq-med: 58em; | |
| $mq-large: 86em; | |
| $mq-xlarge: 115em; | |
| $mq-xxlarge: 125em; | |
| $mq-xxxlarge: 145em; | |
| /*---------------------------------------------- | |
| --Colors | |
| ----------------------------------------------- */ | |
| $color-light: rgba(255,255,255,0.8); | |
| $color-alpha: #98DAEE; | |
| $color-beta: #7690A4; | |
| /*---------------------------------------------- | |
| --Banner Bgs | |
| ----------------------------------------------- */ | |
| @mixin bg-abs{ | |
| height: 100% !important; | |
| width: 100%; | |
| position: absolute; | |
| top: 0; | |
| background-size: cover; | |
| background-repeat: no-repeat; | |
| background-position: 50%; | |
| z-index: 0; | |
| } | |
| /*---------------------------------------------- | |
| --overlay psedu | |
| ----------------------------------------------- */ | |
| @mixin overlay($bgColor: #000, $bgOpacity: 0.6){ | |
| &:after{ | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 100%; | |
| width: 100%; | |
| background: rgba($bgColor, $bgOpacity); | |
| z-index: 0; | |
| } | |
| .v-center{ | |
| position: relative; | |
| z-index: 2; | |
| } | |
| } | |
| /* --vendor | |
| =======================================*/ | |
| /*! normalize.css v3.0.2 | MIT License | github.com/necolas/normalize.css | |
| * Plus some extra defualts by me | |
| */ | |
| /*---------------------------------------------- | |
| --html | |
| 1. baseline font-size. | |
| 2. Prevent jumps by forcing horizontal scroll | |
| 3. Prevent right gaps on mobile | |
| 4. Defualt to sans | |
| 5. Prevent iOS text size adjust after orientation change, without disabling | |
| * user zoom. | |
| ----------------------------------------------- */ | |
| html { | |
| font-size: 100%; /* 1 */ | |
| overflow-y: scroll; /* 2 */ | |
| font-family: sans-serif; /* 3 */ | |
| -ms-text-size-adjust: 100%; /* 4 */ | |
| -webkit-text-size-adjust: 100%; /* 4 */ | |
| } | |
| /*---------------------------------------------- | |
| -body | |
| 1. Defualt margins | |
| 2. prevent mobile gaps | |
| 3. Better font rendering across browsers | |
| ----------------------------------------------- */ | |
| body { | |
| margin: 0; | |
| width: 100%; | |
| font-weight: 400; | |
| font-style: normal; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| /*---------------------------------------------- | |
| -body, html | |
| -Set 100% height if needed for full viewport stuff | |
| -Prevent gaps in mobile layout | |
| ----------------------------------------------- */ | |
| html, body{ | |
| //height: 100%; | |
| position: relative; | |
| overflow-x: hidden; | |
| } | |
| /*---------------------------------------------- | |
| -Defualt to border-box | |
| ----------------------------------------------- */ | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| /*---------------------------------------------- | |
| -HTML5 Block Levels | |
| ----------------------------------------------- */ | |
| article, | |
| aside, | |
| details, | |
| figcaption, | |
| figure, | |
| footer, | |
| header, | |
| hgroup, | |
| main, | |
| menu, | |
| nav, | |
| section, | |
| summary { | |
| display: block; | |
| } | |
| /*---------------------------------------------- | |
| 1. Correct `inline-block` display not defined in IE 8/9. | |
| 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. | |
| ----------------------------------------------- */ | |
| audio, | |
| canvas, | |
| progress, | |
| video { | |
| display: inline-block; /* 1 */ | |
| vertical-align: baseline; /* 2 */ | |
| } | |
| /*---------------------------------------------- | |
| -Prevent modern browsers from displaying `audio` without controls. | |
| -Remove excess height in iOS 5 devices. | |
| ----------------------------------------------- */ | |
| audio:not([controls]) { | |
| display: none; | |
| height: 0; | |
| } | |
| /*---------------------------------------------- | |
| -Address `[hidden]` styling not present in IE 8/9/10. | |
| -Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. | |
| ----------------------------------------------- */ | |
| [hidden], | |
| template { | |
| display: none; | |
| } | |
| /*---------------------------------------------- | |
| LINKS | |
| -Remove the gray background color from active links in IE 10. | |
| -Remove defualt text-decoration | |
| -Improve readability | |
| ----------------------------------------------- */ | |
| a { | |
| background-color: transparent; | |
| outline: 0; | |
| text-decoration: none; | |
| } | |
| a:active, | |
| a:hover { | |
| outline: 0; | |
| } | |
| /*---------------------------------------------- | |
| TEXT LEVEL | |
| -Abbr: Address styling not present in IE 8/9/10/11, Safari, and Chrome. | |
| -Bold: Address style set to `bolder` in Firefox 4+, Safari, and Chrome. | |
| dfn, mark: Address unset styles | |
| -Small: Address inconsistent and variable font size in all browsers. | |
| -Prevent `sub` and `sup` affecting `line-height` in all browsers. | |
| ----------------------------------------------- */ | |
| abbr[title] { | |
| border-bottom: 1px dotted; | |
| } | |
| b, | |
| strong { | |
| font-weight: bold; | |
| } | |
| dfn { | |
| font-style: italic; | |
| } | |
| mark { | |
| background: #ff0; | |
| color: #000; | |
| } | |
| small { | |
| font-size: 80%; | |
| } | |
| sub, | |
| sup { | |
| font-size: 75%; | |
| line-height: 0; | |
| position: relative; | |
| vertical-align: baseline; | |
| } | |
| sup { | |
| top: -0.5em; | |
| } | |
| sub { | |
| bottom: -0.25em; | |
| } | |
| /*---------------------------------------------- | |
| HEADERS | |
| -Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. | |
| -Remove Margins from headers and type elements to better define in your typographic system | |
| ----------------------------------------------- */ | |
| h1 { | |
| font-size: 2em; | |
| margin: 0.67em 0; | |
| } | |
| h1, h2, h3, h4, h5, h6, ul, ol,dl, li,dd, small{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| /*---------------------------------------------- | |
| IMAGES & EMBEDDED CONTENT | |
| -Responsive defualt | |
| -IE Scaling fix | |
| ----------------------------------------------- */ | |
| img,object,embed{ | |
| max-width:100%; | |
| height:auto; | |
| } | |
| img{ | |
| -ms-interpolation-mode:bicubic; | |
| border: 0; | |
| outline: none; | |
| } | |
| /** | |
| * Correct overflow not hidden in IE 9/10/11. | |
| */ | |
| /*---------------------------------------------- | |
| SVG | |
| -Correct overflow not hidden in IE 9/10/11 | |
| ----------------------------------------------- */ | |
| svg:not(:root) { | |
| overflow: hidden; | |
| } | |
| /*---------------------------------------------- | |
| Google Maps responsive fix | |
| ----------------------------------------------- */ | |
| #map_canvas img, | |
| .map_canvas img{ | |
| max-width:none !important; | |
| } | |
| /** | |
| * Address margin not present in IE 8/9 and Safari. | |
| */ | |
| figure { | |
| margin: 1em 40px; | |
| } | |
| /** | |
| * Address differences between Firefox and other browsers. | |
| */ | |
| hr { | |
| -moz-box-sizing: content-box; | |
| box-sizing: content-box; | |
| height: 0; | |
| } | |
| /*---------------------------------------------- | |
| CODE & PREFORMATED | |
| ----------------------------------------------- */ | |
| pre { | |
| overflow: auto; | |
| } | |
| /** | |
| * Address odd `em`-unit font size rendering in all browsers. | |
| */ | |
| code, | |
| kbd, | |
| pre, | |
| samp { | |
| font-family: monospace, monospace; | |
| font-size: 1em; | |
| } | |
| /*---------------------------------------------- | |
| FORMS | |
| ----------------------------------------------- */ | |
| form{ | |
| margin: 0; | |
| } | |
| /** | |
| * 1. Correct color not being inherited. | |
| * Known issue: affects color of disabled elements. | |
| * 2. Correct font properties not being inherited. | |
| * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. | |
| */ | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| color: inherit; /* 1 */ | |
| //font: inherit; /* 2 */ | |
| margin: 0; /* 3 */ | |
| font-size: 100%; | |
| vertical-align: middle; | |
| } | |
| /** | |
| * Address `overflow` set to `hidden` in IE 8/9/10/11. | |
| * Address Firefox 4+ setting `line-height` on `input` using `!important` in | |
| * the UA stylesheet. | |
| */ | |
| button, input { | |
| overflow: visible; | |
| line-height: normal; | |
| } | |
| /** | |
| * Address inconsistent `text-transform` inheritance for `button` and `select`. | |
| * All other form control elements do not inherit `text-transform` values. | |
| * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. | |
| * Correct `select` style inheritance in Firefox. | |
| */ | |
| button, | |
| select { | |
| text-transform: none; | |
| } | |
| /** | |
| * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` | |
| * and `video` controls. | |
| * 2. Correct inability to style clickable `input` types in iOS. | |
| * 3. Improve usability and consistency of cursor style between image-type | |
| * `input` and others. | |
| */ | |
| button, | |
| html input[type="button"], /* 1 */ | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; /* 2 */ | |
| cursor: pointer; /* 3 */ | |
| } | |
| /* Ensure pointer */ | |
| label, | |
| select, | |
| button, | |
| input { | |
| cursor: pointer; | |
| } | |
| /** | |
| * Re-set default cursor for disabled elements. | |
| */ | |
| button[disabled], | |
| html input[disabled] { | |
| cursor: default; | |
| } | |
| /** | |
| * Remove inner padding and border in Firefox 4+. | |
| */ | |
| button::-moz-focus-inner, | |
| input::-moz-focus-inner { | |
| border: 0; | |
| padding: 0; | |
| } | |
| input:focus, | |
| select:focus, | |
| textarea:focus, | |
| button:focus, | |
| .btn:focus { | |
| outline: none; | |
| } | |
| /** | |
| * It's recommended that you don't attempt to style these elements. | |
| * Firefox's implementation doesn't respect box-sizing, padding, or width. | |
| * | |
| * 1. Address box sizing set to `content-box` in IE 8/9/10. | |
| * 2. Remove excess padding in IE 8/9/10. | |
| */ | |
| input[type="checkbox"], | |
| input[type="radio"] { | |
| box-sizing: border-box; /* 1 */ | |
| padding: 0; /* 2 */ | |
| } | |
| /** | |
| * Fix the cursor style for Chrome's increment/decrement buttons. For certain | |
| * `font-size` values of the `input`, it causes the cursor style of the | |
| * decrement button to change from `default` to `text`. | |
| */ | |
| input[type="number"]::-webkit-inner-spin-button, | |
| input[type="number"]::-webkit-outer-spin-button { | |
| height: auto; | |
| } | |
| /** | |
| * 1. Address `appearance` set to `searchfield` in Safari and Chrome. | |
| * 2. Address `box-sizing` set to `border-box` in Safari and Chrome | |
| * (include `-moz` to future-proof). | |
| */ | |
| input[type="search"] { | |
| -webkit-appearance: textfield; /* 1 */ | |
| -moz-box-sizing: content-box; | |
| -webkit-box-sizing: content-box; /* 2 */ | |
| box-sizing: content-box; | |
| } | |
| /** | |
| * Remove inner padding and search cancel button in Safari and Chrome on OS X. | |
| * Safari (but not Chrome) clips the cancel button when the search input has | |
| * padding (and `textfield` appearance). | |
| */ | |
| input[type="search"]::-webkit-search-cancel-button, | |
| input[type="search"]::-webkit-search-decoration { | |
| -webkit-appearance: none; | |
| } | |
| /** | |
| * Define consistent border, margin, and padding. | |
| */ | |
| fieldset { | |
| border: 1px solid #c0c0c0; | |
| margin: 0 2px; | |
| padding: 0.35em 0.625em 0.75em; | |
| } | |
| /** | |
| * 1. Correct `color` not being inherited in IE 8/9/10/11. | |
| * 2. Remove padding so people aren't caught out if they zero out fieldsets. | |
| */ | |
| legend { | |
| border: 0; /* 1 */ | |
| padding: 0; /* 2 */ | |
| } | |
| /** | |
| * Remove default vertical scrollbar in IE 8/9/10/11. | |
| */ | |
| textarea { | |
| overflow: auto; | |
| vertical-align: text-bottom; | |
| width: 100%; | |
| } | |
| /** | |
| * Don't inherit the `font-weight` (applied by a rule above). | |
| * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. | |
| */ | |
| optgroup { | |
| font-weight: bold; | |
| } | |
| /*---------------------------------------------- | |
| TABLES | |
| ----------------------------------------------- */ | |
| /** | |
| * Remove most spacing | |
| between table cells. | |
| */ | |
| table { | |
| border-collapse: collapse; | |
| border-spacing: 0; | |
| } | |
| td, | |
| th { | |
| padding: 0; | |
| } | |
| /* --Modules | |
| =======================================*/ | |
| /*---------------------------------------------- | |
| --Google Fonts Import | |
| ----------------------------------------------- */ | |
| @import url(http://fonts.googleapis.com/css?family=Lato:300|Playfair+Display:900); | |
| /*---------------------------------------------- | |
| --Typography: Body | |
| ----------------------------------------------- */ | |
| body { | |
| font-family: $font-paragraph; | |
| position: relative; | |
| width: 100%; | |
| font-weight: 400; | |
| font-style: normal; | |
| line-height: 1.7; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| text-rendering: optimizeLegibility; | |
| } | |
| /*---------------------------------------------- | |
| --Typography: Fluid body sizing hotness | |
| * Adjust to suit your needs. | |
| ----------------------------------------------- */ | |
| body { | |
| font-size: 100%; | |
| @media (min-width: $mq-small) { | |
| font-size: 110% | |
| } | |
| @media (min-width: $mq-med) { | |
| font-size: 120% | |
| } | |
| @media (min-width: $mq-large) { | |
| font-size: 130% | |
| } | |
| @media (min-width: $mq-xlarge) { | |
| font-size: 160% | |
| } | |
| @media (min-width: $mq-xxlarge) { | |
| font-size: 170% | |
| } | |
| @media (min-width: $mq-xxxlarge) { | |
| font-size: 180% | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Typography: Headers | |
| ----------------------------------------------- */ | |
| h1{ | |
| font-size: 2.75em; | |
| color: rgba(255,255,255,0.8); | |
| font-family: $font-header; | |
| font-weight: 700; | |
| text-rendering:optimizeLegibility; | |
| line-height: 1.2; | |
| @media (min-width: $mq-med) { | |
| font-size: calc(2.75em + 70%); | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Typography: paragraph | |
| ----------------------------------------------- */ | |
| p{ | |
| font-family: $font-paragraph; | |
| font-weight: 300; | |
| } | |
| /*---------------------------------------------- | |
| --Links | |
| ----------------------------------------------- */ | |
| a{ | |
| color: $color-alpha; | |
| @include transition(color 0.7s ease); | |
| &:hover{ | |
| color: darken($color-alpha, 15); | |
| @include transition(color 0.7s ease); | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Setup | |
| ----------------------------------------------- */ | |
| *, *:before, *:after { | |
| -webkit-box-sizing: border-box; | |
| -moz-box-sizing: border-box; | |
| box-sizing: border-box; | |
| } | |
| html { | |
| font-size: 100%; | |
| width: 100%; | |
| -webkit-text-size-adjust: 100%; | |
| background-color: $color-beta; | |
| } | |
| //Fade In Body | |
| body{ | |
| @include animation(fade-in ease-in-out 1.4s); | |
| } | |
| /*---------------------------------------------- | |
| --Banner | |
| ----------------------------------------------- */ | |
| .sect-banner{ | |
| display: table; | |
| width: 100%; | |
| margin: 0 auto; | |
| text-align: center; | |
| height: 100vh; | |
| color: rgba(255,255,255,0.9); | |
| @include overlay($color-beta, 0.4); | |
| .v-center{ | |
| display: table-cell; | |
| vertical-align: middle; | |
| position: relative; | |
| z-index: 4; | |
| padding: 0 5%; | |
| h1{ | |
| @include animation(fade-in ease-in-out 2s 0.5s both); | |
| } | |
| p{ | |
| font-size: 120%; | |
| @include animation(fade-in ease-in-out 2s 1s both); | |
| } | |
| } | |
| /*---------------------------------------------- | |
| -DEMO1: Unordered list | |
| ----------------------------------------------- */ | |
| ul.kf-slider{ | |
| li{ | |
| @include bg-abs; | |
| opacity: 0; | |
| @include animation(fade-out 9s infinite both); | |
| background-image: url(../images/banner-1-sm.jpg); | |
| @media (min-width: $mq-med){ | |
| background-image: url(../images/banner-1.jpg); | |
| } | |
| } | |
| li:nth-child(2){ | |
| background-image: url(../images/banner-2-sm.jpg); | |
| @include animation-delay(3s); | |
| @media (min-width: $mq-med){ | |
| background-image: url(../images/banner-2.jpg); | |
| } | |
| } | |
| li:nth-child(3){ | |
| background-image: url(../images/banner-3-sm.jpg); | |
| @include animation-delay(6s); | |
| @media (min-width: $mq-med){ | |
| background-image: url(../images/banner-3.jpg); | |
| } | |
| } | |
| } | |
| /*---------------------------------------------- | |
| -DEMO2: Banner bg | |
| ----------------------------------------------- */ | |
| .banner-bg{ | |
| @include bg-abs; | |
| background-image: url(../images/banner-1-sm.jpg); | |
| @include animation(slider-sm ease-in-out 30s both infinite); | |
| @media (min-width: $mq-med) { | |
| background-image: url(../images/banner-1.jpg); | |
| @include animation(slider-lg ease-in-out 30s both infinite); | |
| } | |
| } | |
| } | |
| /*---------------------------------------------- | |
| -Footer | |
| ----------------------------------------------- */ | |
| footer{ | |
| width: 100%; | |
| text-align: center; | |
| color: $color-light; | |
| position: fixed; | |
| z-index: 8; | |
| bottom: 1em; | |
| } | |
| /*---------------------------------------------- | |
| --Fade ins | |
| ----------------------------------------------- */ | |
| @include keyframes(fade-in) { | |
| 0%{ | |
| opacity: 0 | |
| } | |
| 100%{ | |
| opacity: 1 | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Fade out for slider | |
| ----------------------------------------------- */ | |
| @include keyframes(fade-out) { | |
| 33%{ | |
| opacity: 1 | |
| } | |
| 66%{ | |
| opacity: 0 | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Keyframes Slider - Sm | |
| ----------------------------------------------- */ | |
| @include keyframes(slider-sm) { | |
| 0%{ | |
| background-image: url(../images/banner-1-sm.jpg); | |
| } | |
| 33%{ | |
| background-image: url(../images/banner-2-sm.jpg); | |
| } | |
| 66%{ | |
| background-image: url(../images/banner-3-sm.jpg); | |
| } | |
| 100%{ | |
| background-image: url(../images/banner-1-sm.jpg); | |
| } | |
| } | |
| /*---------------------------------------------- | |
| --Keyframes Slider - Lg | |
| ----------------------------------------------- */ | |
| @include keyframes(slider-lg) { | |
| 0%{ | |
| background-image: url(../images/banner-1.jpg); | |
| } | |
| 33%{ | |
| background-image: url(../images/banner-2.jpg); | |
| } | |
| 66%{ | |
| background-image: url(../images/banner-3.jpg); | |
| } | |
| 100%{ | |
| background-image: url(../images/banner-1.jpg); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment