Ligatures Web Type Workshop – 1. Clock specimen

In this example below you will see how to do a Ligatures Web Type Workshop – 1. Clock specimen with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by jazzvanz, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright jazzvanz ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ligatures Web Type Workshop – 1. Clock specimen</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='https://unpkg.com/utility-opentype@0.1.4/css/utility-opentype.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900" rel="stylesheet">

<div class="container">
   <div class="wrapper">
<!--       <div>
        <h2>Valentine Typographic</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nulla doloribus officia numquam. Eum placeat est ducimus, tempore cupiditate eos pariatur aspernatur quasi corrupti nihil illo, nesciunt, aliquid ea maiores?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nulla doloribus officia numquam. Eum placeat est ducimus, tempore cupiditate eos pariatur aspernatur quasi corrupti nihil illo, nesciunt, aliquid ea maiores?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae nulla doloribus officia numquam. Eum placeat est ducimus, tempore cupiditate eos pariatur aspernatur quasi corrupti nihil illo, nesciunt, aliquid ea maiores?</p>
      </div> -->
     
      <div id="js-Clock" class="specimen-clock gutter tnum ">12:00:00</div>
    <div class="complete swsh">
      Lovely Day Me Lady
      <span class="dlig">(1)(2)(3)(39)</span>
    </div>
    <div class="specimen--scale js-Scale gutter">
      <span>Here we go again</span>
      <span class="font-weight-300">on my own</span>
      <span>Going down the only road I have ever known</span>
    </div>

    <div class="specimen--scale specimen--scale-2 js-Scale gutter">
      <span>blah blah blah</span>
      <span class="font-weight-700">boom boom boom</span>
      <span><div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore repellat provident</div></span>
    </div>
     
     <div>
       <ul class="font-styles">
         <li class="font-style font-weight-100">Thin</li>
         <li class="font-style font-weight-200">Extra-Light</li>
         <li class="font-style font-weight-300">Light</li>
         <li class="font-style font-weight-400">Regular</li>
         <li class="font-style font-weight-500">Medium</li>
         <li class="font-style font-weight-600">Semi-Bold</li>
         <li class="font-style font-weight-700">Bold</li>
         <li class="font-style font-weight-800">Extra-Bold</li>
         <li class="font-style font-weight-900">Black</li>
       </ul>
     </div>
     
     <div class="columns">
       <div class="column column-3">
          <div class="specimen--scale specimen--scale--33 js-Scale gutter">
            <span>Here we go again</span>
            <span class="font-weight-300">on my own</span>
            <span>Going down the only road I have ever known</span>
          </div>
        </div>
        <div class="column column-3">
          <div class="specimen--scale specimen--scale--33 js-Scale gutter">
            <span>Here we go again</span>
            <span class="font-weight-300">on my own</span>
            <span>Going down the only road I have ever known</span>
          </div>
        </div>
       <div class="column column-3">
          <div class="specimen--scale specimen--scale--33 js-Scale gutter">
          <span>Here we go again</span>
          <span class="font-weight-300">on my own</span>
          <span>Going down the only road I have ever known</span>
        </div>
       </div>
     </div>
     
     <div class="columns">
        <div class="column">
          <div class="specimen--scale specimen--scale--50 js-Scale">
            <span>Here we go again</span>
            <span class="font-weight-300">on my own</span>
            <span>Going down the only road I have ever known</span>
          </div>
        </div>
       
        <div class="column">
          <div class="specimen--scale specimen--scale--50 js-Scale">
            <span>Here we go again</span>
            <span class="font-weight-300">on my own</span>
            <span>Going down the only road I have ever known</span>
          </div>
        </div>
     </div>
  </div> 
</div>
  <script src='https://unpkg.com/fontfaceobserver@2.0.13/fontfaceobserver.standalone.js'></script>
<script src='https://unpkg.com/big-ideas-text@0.4.1/dist/big-ideas-text.js'></script>
<script src='https://unpkg.com/fitter-happier-text@0.0.7/dist/fitter-happier-text.js'></script>
<script src='https://unpkg.com/@kennethormandy/font-to-width@0.5.0/font-to-width.js'></script>
<script src='https://unpkg.com/typogr@0.6.7/typogr.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/jazzvanz/ligatures-web-type-workshop-andx2013-1-clock-specimen-xLvdMw */
@font-face {
  font-family: "Work Sans Complete";
  src: url(https://rawgit.com/weiweihuanghuang/Work-Sans/master/fonts/webfonts/woff2/WorkSans-Regular.woff2?raw=true) format('woff2');
  font-weight:400;
  font-style:normal;
}

.complete {
  font-family:"Work Sans Complete";
}

body {
  background: white;
  color: black;
  font-family: "Work Sans", "Avenir Next", sans-serif;
  margin: 0;
  padding: 0;
}

/* Specimen Clock */
.specimen-clock {
  font-family: "Work Sans Complete", sans-serif;
  background: crimson;
  color: white;
  font-size: 5rem;
  text-align: center;
  padding:35px 0;
}

.container {
  background-color:crimson;
}

.gutter {
  padding-right:1rem;
  padding-left:1rem;
}

.wrapper {
  width:100%;
  max-width:750px;
  margin:0 auto;
  background-color:pink;
}

.specimen--scale {
  background: white;
  color: crimson;
  text-align: center;
  width:100%;
  height:100%;
}

.specimen--scale--50 {
  text-align:left;
}

.specimen--scale--33 {
  text-align:left;
}

.columns {
  display:flex;
  background-color:#ffffff;
}

.column {
  flex:0 1 50%;
  padding:20px;
  flex-wrap:no-wrap;
}

.column-3 {
   flex:0 1 33.33%;
}

.column:nth-child(odd){
  padding-right:0;
}

/* .specimen--scale--33 {
  width:33.33%;
  background-color:darkseagreen;
  color:white;
} */

.font-styles {
  margin:0;
  background-color:crimson;
  padding:0px 0 60px 0;
}

.font-styles {
 list-style-type:none;
 color:white;
  text-align:center;
  font-size:6rem;
  padding:30px;
}

.font-weight-100 {
  font-weight:100;
}

.font-weight-200 {
  font-weight:200;
}

.font-weight-300 {
  font-weight:300;
}

.font-weight-400 {
  font-weight:400;
}

.font-weight-500 {
  font-weight:500;
}

.font-weight-600 {
  font-weight:600;
}

.font-weight-700 {
  font-weight:700;
}

.font-weight-800 {
  font-weight:800;
}

.font-weight-900 {
  font-weight:900;
}

@media(min-width:650px) {
  .specimen-clock {
    font-size:10em;
  }
}

/*Downloaded from https://www.codeseek.co/jazzvanz/ligatures-web-type-workshop-andx2013-1-clock-specimen-xLvdMw */
var el = document.getElementById('js-Clock');

// OUR NODES TO SCALE
var elScale = document.querySelectorAll('.js-Scale');

var observer = new FontFaceObserver('Work Sans');

observer.load().then(function () {
  // SCALE THESE NODES
  bigIdeasText(elScale)
})


var setClock = function(el){
  
  var currentDate = new Date().toLocaleTimeString("en-GB")

  el.innerHTML = currentDate
  window.setTimeout(function(){
    setClock(el)
  }, 1000)
  
}

setClock(el);

















// Clock Specimen
// Make it a function because we might want to re-use it
// and keep it all grouped together
// var setClock = function(el) {
//   var currentDate = new Date().toLocaleTimeString('en-GB')
//   el.innerHTML = currentDate
//   window.setTimeout(function() {
//     setClock(el)
//   }, 1000)
// }

// Run Clock Specimen
// var elClock = document.getElementById('js-Clock')
// setClock(elClock)

Comments