agantelin

//----------------------------------*\
// Center text using font x-height
//----------------------------------*/

%x-height {
  content: 'x';
  display: inline-block;
  vertical-align: middle;
  width: 0;
}

agantelin

// 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);

agantelin

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');

agantelin

Responsive layouts in stylus

Why this way?

1. 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.

2. 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.

3. It allows you to have the exact same markup, and completely different styles for different devices, resolutions, stylesheets, whatever. As it should be.

agantelin

/////////////////////////////
// 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, 

agantelin

Prolog

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

TTF to WOFF2 converting

• http://www.fontsquirrel.com/tools/webfont-generator

agantelin

.fixed-overlay__modal {
    text-align: center;
    white-space: nowrap;
}

.fixed-overlay__modal::after {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;

agantelin

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})