Using a type system · Web Dev 2

Goal

Typografier is a tool I created for myself that generates a responsive type system. It was inspired by lots of other type systems like Bootstrap, Foundation and Type Scale but has it’s own features and doesn’t require you to use the whole framework to implement it in your websites.

Let’s look at how to use Typografier in your website.

This is what it should look like when it’s done:

Type it, type it real good

Remember the purpose of this lesson is to type the code out yourself—build up that muscle memory in your fingers!

Fork & clone

Start the lesson by forking and cloning the using-a-type-system repository.

Fork & clone the “using-a-type-system” repo.

The repository will have some starter files to get you on your way and include requirements for Markbot so you can be sure you’ve completed the lesson.

Fork, clone & Markbot

This includes some starter code that you can get by forking and cloning the repository. You’ll use Markbot to double check everything is done properly.

Set up the project

Before we get started, create some files and get ready.

using-a-type-system
index.html
css
type.css
main.css
images
glyptodon.jpg

Make an index.html
Make a type.css in your css folder
Make a main.css in your css folder

Naming conventions

Don’t forget to follow the naming conventions.

Add HTML boilerplate

Use the html5, viewport, and css snippets.

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>Using a type system</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link href="css/type.css" rel="stylesheet">
  <link href="css/main.css" rel="stylesheet">
</head>
<body>

</body>
</html>

HTML snippets

Create the boilerplate with html5, viewport & css
Important

The order of these files is extremely important: type.css should always come before main.css in the HTML.
Lines G–H

Don’t forget to attach both CSS files: type.css and main.css

Add CSS boilerplate

Use the cssviewport, borderbox & textsize snippets.

@-moz-viewport { width: device-width; scale: 1; }
@-ms-viewport { width: device-width; scale: 1; }
@-o-viewport { width: device-width; scale: 1; }
@-webkit-viewport { width: device-width; scale: 1; }
@viewport { width: device-width; scale: 1; }

html {
  box-sizing: border-box;

  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  font-family: Georgia, serif;
}

*, *::before, *::after {
  box-sizing: inherit;
}

.img-flex {
  display: block;
  width: 100%;
}

CSS snippets

Create the boilerplate with cssviewport, borderbox & textsize
Line O

Let’s set the default font for the website to Georgia
Lines V–Y

Make sure to add the class for scalable images.

Add content to the HTML

Let’s add all the content we need to the HTML including the basic tags.

You can copy-paste all this content from the content.txt file.

⋮
<body>

  <article class="card">
    <img class="img-flex" src="images/glyptodon.jpg" alt="">
    <div>
      <h1>Glyptodon</h1>
      <p>Glyptodon was a large, armored mammal, a relative of armadillos, that lived during the Pleistocene epoch. It was roughly the same size and weight as a Volkswagen Beetle, though flatter in shape.</p>
      <p>With its rounded, bony shell and squat limbs, it superficially resembled turtles, and the much earlier dinosaurian ankylosaur, as an example of the convergent evolution of unrelated lineages into similar forms.</p>
      <footer>
        <p><a href="https://en.wikipedia.org/wiki/Glyptodon">Information from Wikipedia</a></p>
      </footer>
    </div>
  </article>

</body>
</html>

Line D

Notice the .card class, we’re going to add some really basic styles to this in the next step.
Line E

Don’t forget to add the .img-flex class to all the images.
Line F

This <div> is here—not for semantics—but because we’ll need a hook later to add some spacing.
Line K

It makes more semantic sense to use a <small> tag here because it’s a copyright-like notice. I’m using a <p> tag simply because I want to demonstrate a point about margins & font-sizes.

Add some basic CSS

Now we’ll add a little bit of CSS just so our card is recognizable—but the majority of the code we’re going to write is classes in our HTML.

⋮
.img-flex {
  display: block;
  width: 100%;
}

a {
  color: currentColor;
}

.card {
  overflow: hidden;

  background-color: #d9ccaa;
  border-radius: 6px;
}

We should see something like this when we refresh in the browser.

Lines G–I
Change the default colour of links to match the text.
- If you do this it’s extremely important that you DO NOT remove the underline.
Line L

The overflow: hidden here is used to chop the corners of the image off to make them round.

Add the Typografier CSS

We’re going to use Typografier to generate a fully complete type system for us to use in our website.

Go to Typografier.

Keep all the settings as their defaults.

Copy all code generated by Typografier, in the right-hand panel & paste it into your type.css file.

That’s it—we have a fully functional type system. Now we can concentrate fully on our layout and write much less CSS.

We should never touch the generated CSS just in case we want to replace it later.

Refresh to see what Typografier has done to the type. Try resizing your browser and notice how the font-sizes and line-heights adjust.

Add spacing classes

Let’s start by making the space around things consistent.

The spacing classes add padding and margins that match the type size and line-height. This allows us to create a consistent vertical rhythm because all space around and inside elements matches the type sizes.

It’s important to remember that Typografier removes all top margins and uses only the bottom margins—this makes it much easier to keep a consistent vertical rhythm.

⋮
<body>

  <article class="card">
    <img class="img-flex" src="images/glyptodon.png" alt="">
    <div class="island">
      <h1>Glyptodon</h1>
      <p>Glyptodon was a large, armored mammal, a relative of armadillos, that lived during the Pleistocene epoch. It was roughly the same size and weight as a Volkswagen Beetle, though flatter in shape.</p>
      <p>With its rounded, bony shell and squat limbs, it superficially resembled turtles, and the much earlier dinosaurian ankylosaur, as an example of the convergent evolution of unrelated lineages into similar forms.</p>
      <footer>
        <p class="push-0"><a href="https://en.wikipedia.org/wiki/Glyptodon">Information from Wikipedia</a></p>
      </footer>
    </div>
  </article>

</body>
</html>

So, our layout should look like this now:

Line F

The .island class adds padding, equal to the line-height around all four sides.

We’re using .island here to add space around the text but still allow the image to be full bleed.
Line K

The .push-0 class will remove the default margin from the bottom of an element.

We’re using it here because if we didn’t remove the bottom margin, there would be extra space at the bottom caused by the margin of the <p> adding onto the padding of .island

Add font sizes

Now, let’s add a few classes to adjust the font size on some elements, to make them bigger and smaller.

Typografier’s font-size classes are based on the metric system, or computer sizes if that’s more familiar. .micro is the smallest, going up to .kilo, .giga, and all the way to .yotta

There are only 10 font-sizes to choose from—if you need more than that you’re probably doing something wrong.

⋮
<body>

  <article class="card">
    <img class="img-flex" src="images/glyptodon.jpg" alt="">
    <div class="island">
      <h1 class="zetta">Glyptodon</h1>
      <p class="mega">Glyptodon was a large, armored mammal, a relative of armadillos, that lived during the Pleistocene epoch. It was roughly the same size and weight as a Volkswagen Beetle, though flatter in shape.</p>
      <p>With its rounded, bony shell and squat limbs, it superficially resembled turtles, and the much earlier dinosaurian ankylosaur, as an example of the convergent evolution of unrelated lineages into similar forms.</p>
      <footer class="micro">
        <p class="push-0"><a href="https://en.wikipedia.org/wiki/Glyptodon">Information from Wikipedia</a></p>
      </footer>
    </div>
  </article>

</body>
</html>

Refresh to see the layout now. Make sure to resize your browser to see how the font sizes change.

Line G

The .zetta class is the second largest font-size. We’re using it here to make our <h1> a little bigger than normal.
Line H

The .mega class is one font-size larger than the default body copy.
Line J

The .micro font-size is the smallest size possible—we’re using it on <footer> because the information isn’t too important.

Add stylistic classes

Typografier has a few stylistic classes to control font styles and text positions.

Be warned though, many of these stylistic classes aren’t responsive: if you make something bold it’s always bold.

⋮
<body>

  <article class="card">
    <img class="img-flex" src="images/glyptodon.jpg" alt="">
    <div class="island">
      <h1 class="zetta">Glyptodon</h1>
      <p class="mega italic">Glyptodon was a large, armored mammal, a relative of armadillos, that lived during the Pleistocene epoch. It was roughly the same size and weight as a Volkswagen Beetle, though flatter in shape.</p>
      <p>With its rounded, bony shell and squat limbs, it superficially resembled turtles, and the much earlier dinosaurian ankylosaur, as an example of the convergent evolution of unrelated lineages into similar forms.</p>
      <footer class="micro text-center">
        <p class="push-0"><a href="https://en.wikipedia.org/wiki/Glyptodon">Information from Wikipedia</a></p>
      </footer>
    </div>
  </article>

</body>
</html>

Refresh and see what we’ve got.

Line H

We’re permanently setting this text to be .italic in order to make it stand out on all screen sizes.
Line J

The .text-center class will make the text always be centered, there’s nothing responsive about this, it’ll be centered on every single screen size.

Control the line-length

Finally, we’re going to add one last class that will help control the line-length of the card: .max-length

⋮
<body>

  <article class="card max-length">
    <img class="img-flex" src="images/glyptodon.jpg" alt="">
    <div class="island">
      <h1 class="zetta">Glyptodon</h1>
      <p class="mega italic">Glyptodon was a large, armored mammal, a relative of armadillos, that lived during the Pleistocene epoch. It was roughly the same size and weight as a Volkswagen Beetle, though flatter in shape.</p>
      <p>With its rounded, bony shell and squat limbs, it superficially resembled turtles, and the much earlier dinosaurian ankylosaur, as an example of the convergent evolution of unrelated lineages into similar forms.</p>
      <footer class="micro text-center">
        <p class="push-0"><a href="https://en.wikipedia.org/wiki/Glyptodon">Information from Wikipedia</a></p>
      </footer>
    </div>
  </article>

</body>
</html>

That’s it we’re done.

With Typografier we were able to make a nice layout, with spacing consistency and good vertical rhythm without touching CSS (except to add some colours).

Line D

We can use .max-length class to force an element or text to never exceed a recommended maximum line-length.

Drop it into Markbot & submit

Drop the final, coded exercise into Markbot and fix all the errors until Markbot gives you all green (and maybe a little yellow).

After you’ve fixed all the problems, go ahead and submit the assignment. You’ll immediately get your grade.

Submit

Whenever you’ve passed all Markbot’s specific tests go ahead and submit this lesson for marks.

Goal

Type it, type it real good

Fork & clone

Fork, clone & Markbot

1 Set up the project

Naming conventions

2 Add HTML boilerplate

HTML snippets

Important

Lines G–H

3 Add CSS boilerplate

CSS snippets

Line O

Lines V–Y

4 Add content to the HTML

Line D

Line E

Line F

Line K

5 Add some basic CSS

Lines G–I

Line L

6 Add the Typografier CSS

Go to Typografier.

7 Add spacing classes

Line F

Line K

8 Add font sizes

Line G

Line H

Line J

9 Add stylistic classes