maddesigns

(function () {
    function loadScript(a, b) {
        var c = document.createElement('script');
        c.type = 'text/javascript';
        c.src = a;
        var d = document.getElementsByTagName('head')[0],
            done = false;
        c.onload = c.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;

maddesigns

%div

maddesigns

<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed id deserunt fugiat veniam laboriosam perspiciatis perferendis dolores consequatur numquam dicta veritatis maxime nobis eligendi harum illum inventore voluptatibus eaque sunt!</p>
<p>Ea minima nesciunt eaque quaerat laudantium sed accusamus. Tenetur laborum sapiente enim dolor modi ullam pariatur hic quidem saepe at facere nobis. Itaque obcaecati quod cum at minus adipisci ut.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit vitae alias tempore autem reprehenderit amet impedit quia fugiat. Cupiditate ipsam sed quaerat assumenda fugit nihil architecto tenetur quia! Nobis vitae.</p>
<p>Sit animi beatae nemo porro iusto et tempore incidunt autem officiis debitis distinctio atque veniam voluptas maxime illo dolores aut minima ratione culpa nam at sapiente dignissimos omnis quae molestias.</p>

maddesigns

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// Singularity.gs (v1.1.2)
// Singularity Extras (v0.0.3)
// ----

@import "singularitygs";
@import "singularity-extras";

maddesigns

<article>article</article>
<aside>aside</aside>

maddesigns

<article>article</article>
<aside>aside</aside>

maddesigns

// ----
// Sass (v3.2.13)
// Compass (v0.12.2)
// ----

$test: #FFF1E0;

.test {
  background-color: $test;
  color: #{$test};

maddesigns

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// Toolkit (v2.0.0.alpha.7)
// ----

@import "toolkit";
.wrapperclass {
  @include intrinsic-ratio(4/3, 50%, 'img, figure')
}

maddesigns

Scalable Text with SVG

Just like FitText.js but with svg and no jQuery

A Pen by Jason Weaver on CodePen.

License.

maddesigns

.one
.two
.three
.four