Skip to content

Instantly share code, notes, and snippets.

@jackw

jackw/_defeat-fout.scss

Created September 25, 2013 16:55
Show Gist options
  • Save jackw/6702593 to your computer and use it in GitHub Desktop.
Save jackw/6702593 to your computer and use it in GitHub Desktop.
Download ZIP
Defeat Typekit FOUT with SASS I've been working on a large website with Typekit and needed a way to chain selectors with the Typekit FOUT css rather than (http://help.typekit.com/customer/portal/articles/6852-controlling-the-flash-of-unstyled-text-or-fout-using-font-events). Extending a class in SASS generally causes bloat but I'm thinking it mi…
Raw
_defeat-fout.scss
// How about we try some FOUT fixing with SASS...
// a fallback if people forget to set the stack.
$default-font-stack: "Museo-sans", "Helvetica Neue", Arial, Helvetica, sans-serif !default;
// we'll extend these in some sort of attempt to chain selectors without needing to worry about it.
.visible-hidden {
visibility:hidden;
}
// This is our call to arms, let's kick FOUT in the face.
@mixin defeatFOUT ($font-stack:$default-font-stack) {
font-family:$font-stack;
.wf-loading & {
@extend .visible-hidden;
}
}
Raw
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>FOUT Fighting</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript">
(function() {
var config = {
kitId: 'xxxxxxx', // replace with your typekit kitId.
scriptTimeout: 3000
};
var h=document.getElementsByTagName("html")[0];h.className+=" wf-loading";var t=setTimeout(function(){h.className=h.className.replace(/(\s|^)wf-loading(\s|$)/g," ");h.className+=" wf-inactive"},config.scriptTimeout);var tk=document.createElement("script"),d=false;tk.src='//use.typekit.net/'+config.kitId+'.js';tk.type="text/javascript";tk.async="true";tk.onload=tk.onreadystatechange=function(){var a=this.readyState;if(d||a&&a!="complete"&&a!="loaded")return;d=true;clearTimeout(t);try{Typekit.load(config)}catch(b){}};var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(tk,s)
})();
</script>
<link rel="stylesheet" href="stylesheets/screen.css">
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<h1>FOUT Fighting <span class="sub-heading">Trying to fight FOUT with SASS</span></h1>
<ul id="fcuk-fout">
<li>list item</li>
<li>another one</li>
<li>and another one</li>
</ul>
<div class="another-message">
<span>More FOUT Fighting!</span>
</div>
</body>
</html>
Raw
screen.scss
/* Welcome to Compass. */
@import "compass/reset";
@import "defeat-fout";
body {
background:#bbb;
border:10px solid #ccc;
padding:2%;
text-align:center;
}
h1 {
@include defeatFOUT;
font-size:30px;
font-weight:900;
margin-bottom:0.5em;
.sub-heading {
@include defeatFOUT;
display:block;
font-size:18px;
font-style:italic;
}
}
#fcuk-fout {
@include defeatFOUT;
margin-bottom:0.5em;
}
.another-message {
@include defeatFOUT;
margin-bottom:0.5em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment