Just like FitText.js but with svg and no jQuery
A Pen by Jason Weaver on CodePen.
Sven Wolfermann maddesigns
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
| <div class="wrapperclass"> | |
| <span> 16:9 </span> | |
| </div> |
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
| // ---- | |
| // Sass (v3.3.0.rc.5) | |
| // Compass (v1.0.0.alpha.18) | |
| // ---- | |
| // Copied and Pasted from Harry Roberts Beutons - | |
| // http://github.com/csswizardry/beautons/blob/master/beautons.css | |
| // Base |
maddesigns
/ SassMeister-input-HTML.haml
Created
February 15, 2014 17:58
Generated by SassMeister.com.
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
| .one | |
| .two | |
| .three | |
| .four |
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
| // ---- | |
| // 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
/ SassMeister-input.scss
Created
January 19, 2014 11:38
— forked from matthew-andrews/SassMeister-input.scss
Generated by SassMeister.com.
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
| // ---- | |
| // Sass (v3.2.13) | |
| // Compass (v0.12.2) | |
| // ---- | |
| $test: #FFF1E0; | |
| .test { | |
| background-color: $test; | |
| color: #{$test}; |
maddesigns
/ SassMeister-input-HTML.html
Created
January 7, 2014 09:22
Generated by SassMeister.com.
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
| <article>article</article> | |
| <aside>aside</aside> |
maddesigns
/ SassMeister-input-HTML.html
Created
January 7, 2014 09:08
Generated by SassMeister.com.
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
| <article>article</article> | |
| <aside>aside</aside> |
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
| // ---- | |
| // 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
/ SassMeister-input-HTML.html
Created
January 3, 2014 18:06
Generated by SassMeister.com.
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
| <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> |