JSFiddle - React, Tailwind, and code Playground

Good example of: - fittext (- jQuery) - SCSS - SCSS same @mixin

by mhouser_nowmediagroup

HTML

<!-- EMMET STRING: nav>ul#menu>(li{[ MENU ITEM ]}*5)^^section#text>h1{YES!!}^section#paragraph({[ LOREM IPSUM ]}*60) -->

<nav><ul id="menu">
  <li>Home</li>
  <li>Why Yes!!?</li>
  <li>Maybe?</li>
  <li>No :(</li>
  <li class="double">Our Blog to be read</li>
</ul></nav>

<section id="text"><h1>YES!!</h1></section>
<section id="paragraph">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Fringilla phasellus faucibus scelerisque eleifend donec. Leo duis ut diam quam nulla. Interdum posuere lorem ipsum dolor sit amet consectetur adipiscing elit. Fermentum iaculis eu non diam phasellus. Tristique sollicitudin nibh sit amet commodo. Cras ornare arcu dui vivamus arcu felis bibendum ut tristique. Risus viverra adipiscing at in tellus. Mi sit amet mauris commodo. Fermentum leo vel orci porta non pulvinar. Tellus rutrum tellus pellentesque eu tincidunt tortor. Elit ullamcorper dignissim cras tincidunt lobortis feugiat vivamus. Euismod elementum nisi quis eleifend quam adipiscing. Amet porttitor eget dolor morbi non arcu risus. Malesuada proin libero nunc consequat interdum varius sit amet mattis. 
</section>

SCSS

@mixin same($values...){
  $length: length($values);
  $value: nth($values, $length);

  @for $i from 1 to $length{
    #{nth($values, $i)}: $value;
  }
}

* {
  @include same(padding, margin, top, left, 0);
  @include same(size, line-height, 16px);
}

body {
  padding: 6px;
}

#text {
  display: block;
  width: 80%;
  outline: solid 2px red;
  text-align: center;
  margin: auto;
  max-width: 1160px;
  h1 {
    text-align: center;
    margin: 40px 0;
    line-height: initial;
  }
}

#paragraph {
  margin: auto;
  padding: 0 4%;
  line-height: initial;
  text-align: justify;
  max-width: calc(860px + 4%);
}

#menu {
  margin: auto;
  padding: 0;
  overflow: hidden;
  display: flex;
  max-width: 900px;
  outline: solid 3px #00f;
  li {
    display: table-cell;
    float: left;
    width: 16%;
    padding: 40px 2%;
    margin: 0;
    list-style: none;
    text-align: center;
    outline: solid 1px #00f;
    cursor: pointer;
    line-height: 200%;
  }
  li.double {
    line-height: 100%;
  }
  li:hover {
    background: #e7e7e7;
  }
}

JavaScript

/*!	
* FitText.js 1.0 jQuery free version
*
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/
* Modified by Slawomir Kolodziej http://slawekk.info
*
* Date: Tue Aug 09 2011 10:45:54 GMT+0200 (CEST)
*/
(function(){

  var addEvent = function (el, type, fn) {
    if (el.addEventListener)
      el.addEventListener(type, fn, false);
		else
			el.attachEvent('on'+type, fn);
  };
  
  var extend = function(obj,ext){
    for(var key in ext)
      if(ext.hasOwnProperty(key))
        obj[key] = ext[key];
    return obj;
  };

  window.fitText = function (el, kompressor, options) {

    var settings = extend({
      'minFontSize' : -1/0,
      'maxFontSize' : 1/0
    },options);

    var fit = function (el) {
      var compressor = kompressor || 1;

      var resizer = function () {
        el.style.fontSize = Math.max(Math.min(el.clientWidth / (compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize)) + 'px';
      };

      // Call once to set.
      resizer();

      // Bind events
      // If you have any js library which support Events, replace this part
      // and remove addEvent function (or use original jQuery version)
      addEvent(window, 'resize', resizer);
      addEvent(window, 'orientationchange', resizer);
    };

    if (el.length)
      for(var i=0; i<el.length; i++)
        fit(el[i]);
    else
      fit(el);

    // return set of elements
    return el;
  };
})()


window.onload = function(){
	window.fitText(document.getElementById("text"), 0.55)
  window.fitText(document.getElementById("paragraph"), 1.9, {'minFontSize' : 16, 'maxFontSize' : 26})
  for (var menu_item of document.getElementById('menu').getElementsByTagName('li'))
  	window.fitText(menu_item, 0.65, {'minFontSize' : 12})
}