|
<div> |
|
<article> |
|
|
|
<h1 class="responsive-fonts"> |
|
<span>Responsive Fonts</span> |
|
</h1> |
|
|
|
<figure class="responsive-fonts"> |
|
<img src="http://a.fod4.com/images/user_photos/1335039/b892600c3e15fb4dd218c3fe081d8b52_fullsize.jpg" /> |
|
<figcaption>Please Resize<br>Responsively</figcaption> |
|
</figure> |
|
<fieldset class="responsive-fonts"> |
|
<label>base-width:<input type="text" id="bw" value="960"/></label> |
|
<label>min-width:<input type="text" id="min" value="320"/></label> |
|
<label>max-width:<input type="text" id="max" value="1200"/></label> |
|
<label>selectors:<input type="text" id="elm" value=".responsive-fonts"/></label> |
|
<label><button>Generate CSS</button></label> |
|
<label><textarea></textarea><label> |
|
</fieldset> |
|
|
|
|
|
<h2>Beta version warning!!!</h2> |
|
<p>Responsive font sizing is based on a set of SCSS generated media queries – setting a percentual font-size in relation to the viewport width. </p> |
|
<pre> |
|
|
|
<strong>HTML</strong> |
|
<header class="responsive-fonts"> |
|
<h1>Responsive Font</h1> |
|
</header> |
|
|
|
or |
|
|
|
<h1 class="responsive-fonts"> |
|
<span>Responsive Font</span> |
|
</h1> |
|
|
|
<strong>SCSS</strong> |
|
1) Set viewport breakpoints (pixels) |
|
$base-width:960; // Design 1:1 |
|
$min-width:320; // Lowest scaling point |
|
$max-width:1600; // Highest scaling point |
|
|
|
2) Create media queries |
|
@include ResponsiveFonts(); |
|
|
|
3) Style your font |
|
Note! if adding the class to a text element |
|
you must add an inline element eg. span |
|
|
|
h1, |
|
h1.responsive-fonts span { font-size:2em; } |
|
|
|
</pre> |
|
<p>Note! CSS output 4-10 KB - a little more than most js versions... if you dont count loading jQuery ;)</p> |
|
<p>Note! ie8 needs respond.js </p> |
|
<p>Note! if applied to the HTML tag everything (em,rem,%) becomes responsive</p> |
|
<p>Note! if applied to the BODY tag everything (em,%) becomes responsive</p> |
|
<p>Note! to avoid @include order problems add html or body before the target element<br> |
|
@include ResponsiveFonts('body .responsive-fonts'); |
|
</p> |
|
|
|
<div class="responsive-fonts em"><span>font-size:2em </span></div> |
|
<div class="responsive-fonts pct"><span>font-size:200% </span></div> |
|
<div class="responsive-fonts rem"><span>font-size:2rem </span></div> |
|
<div class="responsive-fonts px"><span>font-size:32px </span></div> |
|
<p> </p> |
|
<p> </p> |
|
|
|
|
|
<pre> |
|
<strong>// SCSS Mixin v.1.0 - beta</strong> |
|
// ========================================= |
|
// ResponsiveFonts |
|
// ========================================= |
|
// Config |
|
$base-width:960 !default; // Width @ 100% layout or 1:1 |
|
$min-width:320 !default; // Minimum width |
|
$max-width:2560 !default; // Maximum width |
|
|
|
// Tip! |
|
// Setting a percentual min/max can be done like this: |
|
// $min-width:$base-width * 0.5; // 50%; |
|
// $max-width:$base-width * 1.5; // 150%; |
|
|
|
// only run once |
|
$ResponsiveFonts-init:false !default; |
|
@mixin ResponsiveFonts($args...){ |
|
@if($ResponsiveFonts-init==false){ |
|
$ResponsiveFonts-init:true; |
|
|
|
// loop start counter |
|
$s:floor($min-width*100/$base-width); |
|
|
|
// loop end counter |
|
$e:ceil($max-width*100/$base-width); |
|
|
|
// ratio (pixel per percent of base-width) |
|
// It is a bit like the <a href="http://dev.w3.org/csswg/css-values/#viewport-relative-lengths" target="_blank">vw unit</a> |
|
$r:$base-width/100; |
|
|
|
// list to hold passed selectors |
|
$l:(); |
|
@for $i from 1 through length($args){ |
|
$l:append($l,unquote(nth($args,$i)),comma); |
|
} |
|
$l:if(length($l)==0,unquote('.responsive-font-size'),$l); |
|
|
|
@for $i from $s through $e { |
|
// font-size percentage |
|
$p:percentage($i/$base-width)*$r; |
|
|
|
// media query type min/max |
|
$t:if($i==$s,max,min); |
|
|
|
// media query width |
|
$w:round(if($i==$s,($r*$i)+($r - 1)*1px+$r*1px,$r*$i*1px)); |
|
|
|
// build media query |
|
@media (#{$t}-width:$w){ |
|
#{$l}{ font-size:$p;} |
|
} |
|
} |
|
} |
|
} |
|
|
|
// Include examples |
|
// Note! only the first will work |
|
@include ResponsiveFonts(); // default |
|
@include ResponsiveFonts(html); // Scale all em, rem and % |
|
@include ResponsiveFonts(body); // Scale all em and % (rems are relative to body) |
|
@include ResponsiveFonts('.rf'); // I'm lazy don't want .responsive-fonts |
|
@include ResponsiveFonts('.foo','.bar'); // Other selectors just add |
|
|
|
|
|
|
|
Thank you for visiting |
|
and please comment :) |
|
Jakob E |
|
|
|
|
|
|
|
</pre> |
|
<p> |
|
<strong>2DO's</strong> |
|
</p> |
|
<ul> |
|
<li class="done">Add min width</li> |
|
<li class="done">Add max width</li> |
|
<li class="done">Create the damn mixin</li> |
|
<li class="done">Allow selector list html, body, class, id, article,...</li> |
|
<li class="done">Update the damn mixin</li> |
|
<li class="done">Be nice – make a js version for the non-SCSS'ers</li> |
|
<li>Write LESS mixin</li> |
|
<li>Move project to <a href="http://www.responsivefonts.com" target="_blank">responsivefonts.com</a></li> |
|
<li>Character limits - learn about <a href="http://simplefocus.com/flowtype/" target="_blank">flowtype</a> - thanks Nick <br>- maybe adding a min/max scale could solve this</li> |
|
<li>Nice things up</li> |
|
<li>Add config control min>max etc.</li> |
|
<li>Allow various units em, rem, cm,...</li> |
|
<li>Update the damn mixin again</li> |
|
<li>Begin work on baseline</li> |
|
<li>Make framework</li> |
|
<li>Buy bigger boat </li> |
|
</ul> |
|
<p> </p> |
|
<p><strong>Log:</strong></p> |
|
<ul> |
|
<li>2013.09.22 - Markup example updated</li> |
|
<li>2013.09.19 - Generator missing "}" bug fixed</li> |
|
<li>2013.09.19 - CSS generator added</li> |
|
<li>2013.09.19 - SCSS @mixin beta 1.0</li> |
|
<li>2013.09.19 - Just playing</li> |
|
<li> |
|
</ul> |
|
</article> |
|
</div> |