// jQuery
$(document).ready(function() {
// code
})
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
.fixed-overlay__modal { | |
text-align: center; | |
white-space: nowrap; | |
} | |
.fixed-overlay__modal::after { | |
display: inline-block; | |
vertical-align: middle; | |
width: 0; | |
height: 100%; |
Google Chrome Developers says:
The new WOFF 2.0 Web Font compression format offers a 30% average gain over WOFF 1.0 (up to 50%+ in some cases). WOFF 2.0 is available since Chrome 36 and Opera 23.
Some examples of file size differences: WOFF vs. WOFF2
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
///////////////////////////// | |
// Links underlining mixin // | |
///////////////////////////// | |
// using: | |
// link-underline(background color, text color, selection color[, line width]); | |
text-underline-crop(color-background) | |
text-shadow .03em 0 color-background, |
Responsive layouts in stylus
-
There is no
span1..15
styles, instead your css defines your layout and your html remains semantic and not polluted with display information. As it should be. -
The markup is incredibly easy, you specify the wrappers width, and then each columns width in percentages. Every other grid framework I've found is incredibly complicated with this.
-
It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.
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
I've been having this issue and the only way I've managed to fix it is to run both autoprefixer and cssNano together. I'd prefer to not minify when local dev because there's a legacy stylesheet with 20k lines in it... but this was the only thing that worked. | |
Maps work perfectly fine in Chrome, a little bit funky in FF (sometimes goes to closing bracket) and breaks in Safari (Goes to parent). | |
const gulp = require('gulp'); | |
const sass = require('gulp-sass'); | |
const sourcemaps = require('gulp-sourcemaps'); | |
const gulpIf = require('gulp-if'); | |
const postcss = require('gulp-postcss'); | |
const autoprefixer = require('autoprefixer'); |
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
//----------------------------------*\ | |
// Center text using font x-height | |
//----------------------------------*/ | |
%x-height { | |
content: 'x'; | |
display: inline-block; | |
vertical-align: middle; | |
width: 0; | |
} |
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
// 1st way. | |
// Add on element with overflow | |
-webkit-mask-image: -webkit-radial-gradient(white, black); | |
// 2nd way. | |
// on the element with overflow also works and it doesn't break the elements box-shadow, if any is applied | |
-webkit-backface-visibility: hidden; | |
-moz-backface-visibility: hidden; | |
-webkit-transform: translate3d(0, 0, 0); |