| title |
before |
folders |
after |
notes |
Set up the project |
Before we get started, create some files and get ready.
|
| label |
type |
using-a-type-system |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
css |
folder |
1 |
|
|
|
| label |
type |
indent |
fade |
images |
folder |
1 |
true |
|
| label |
indent |
fade |
glyptodon.jpg |
2 |
true |
|
|
1. Make an `index.html`
2. Make a `type.css` in your `css` folder
3. Make a `main.css` in your `css` folder
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
notes |
Add HTML boilerplate |
*Use the `html5`, `viewport`, and `css` snippets.* |
html |
index.html |
<!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>
|
| num |
text |
7-8 |
Don’t forget to attach both CSS files: `type.css` and `main.css`
|
|
|
| label |
text |
HTML snippets |
Create the boilerplate with `html5`, `viewport` & `css` |
|
| label |
text |
Important |
The order of these files is extremely important: `type.css` should always come before `main.css` in the HTML. |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
notes |
Add CSS boilerplate |
*Use the `cssviewport`, `borderbox` & `textsize` snippets.* |
css |
css/main.css |
@-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%;
}
|
| num |
text |
15 |
Let’s set the default font for the website to `Georgia` |
|
| num |
text |
22-25 |
Make sure to add the class for scalable images. |
|
|
| label |
text |
CSS snippets |
Create the boilerplate with `cssviewport`, `borderbox` & `textsize` |
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
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.*
|
html |
index.html |
⋮
<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>
|
|
|
| num |
text |
4 |
Notice the `.card` class, we’re going to add some really basic styles to this in the next step. |
|
| num |
text |
5 |
Don’t forget to add the `.img-flex` class to all the images. |
|
| num |
text |
6 |
This `<div>` is here—not for semantics—but because we’ll need a hook later to add some spacing. |
|
| num |
text |
11 |
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.
|
|
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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. |
css |
css/main.css |
⋮
.img-flex {
display: block;
width: 100%;
}
a {
color: currentColor;
}
.card {
overflow: hidden;
background-color: #d9ccaa;
border-radius: 6px;
}
|
|
| num |
text |
7-9 |
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.
|
|
| num |
text |
12 |
The `overflow: hidden` here is used to chop the corners of the image off to make them round. |
|
|
We should see something like this when we refresh in the browser.
|
|
| title |
before |
after |
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.]( https://typografier.web-dev.tools/)
*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.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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.**
|
html |
index.html |
⋮
<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>
|
|
|
|
| num |
text |
6 |
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.
|
|
| num |
text |
11 |
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`
|
|
|
So, our layout should look like this now:
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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.*
|
html |
index.html |
⋮
<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>
|
|
|
|
| num |
text |
7 |
The `.zetta` class is the second largest font-size. We’re using it here to make our `<h1>` a little bigger than normal. |
|
| num |
text |
8 |
The `.mega` class is one font-size larger than the default body copy. |
|
| num |
text |
10 |
The `.micro` font-size is the smallest size possible—we’re using it on `<footer>` because the information isn’t too important. |
|
|
Refresh to see the layout now. Make sure to resize your browser to see how the font sizes change.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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.*
|
html |
index.html |
⋮
<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>
|
|
|
|
| num |
text |
8 |
We’re permanently setting this text to be `.italic` in order to make it stand out on all screen sizes. |
|
| num |
text |
10 |
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. |
|
|
Refresh and see what we’ve got.
|
|
| title |
before |
code_lang |
code_file |
code |
lines |
after |
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`
|
html |
index.html |
⋮
<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>
|
|
|
| num |
text |
4 |
We can use `.max-length` class to force an element or text to never exceed a recommended maximum line-length. |
|
|
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).
|
|