danbettles
/ _mixins.scss
Created
May 21, 2016 12:52
Sass mixin for Compass that vertically centres a descendant of the element in which it is included. The mixin neatly wraps-up Sebastian Ekström's updated solution in http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
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
| @import "compass/css3/transform"; | |
| @mixin vertically-centre-descendant($descendant-selector, $descendant-position: relative) { | |
| @include transform-style(preserve-3d); | |
| position: relative; | |
| #{$descendant-selector} { | |
| @include transform(translateY(-50%)); | |
| position: $descendant-position; | |
| top: 50%; |
pstonier
/ grid-mixins.scss
Created
February 24, 2016 22:46
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
| // 1/4 width on Desktop and adjust appropriately based on device size | |
| @mixin one-quarter { | |
| @include media($small-screen) { | |
| @include span-columns(2); | |
| @include omega(1n); | |
| } | |
| @include media($medium-screen) { | |
| @include span-columns(2); | |
| @include omega(2n); | |
| } |
pburtchaell
/ styles.css
Last active
February 12, 2025 08:45
VH and VW units can cause issues on iOS devices. To overcome this, create media queries that target the width, height, and orientation of iOS devices.
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
| /** | |
| * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
| * | |
| * To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
| * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
| * the height of element `.foo` —which is a full width and height cover image. | |
| * | |
| * iOS Resolution Quick Reference: http://www.iosres.com/ | |
| */ | |