In this article, we will learn how to add typography variables to the website using Primer CSS.
Primer CSS is a free open-source CSS framework that is built with the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Object-oriented CSS principles, functional CSS, and BEM architecture influence its approach to CSS. It is a highly reusable model.
Typography Variables: These variables are used to change the height, font-weight, and size of any font. In simple words, it is used to style the font.
Syntax:
$variable-name: value of the variable;
Variables Used for changing font size are listed below:
Heading sizes – mobile:
- $h00-size-mobile: This variable is used to set the font size to 40px.
- $h0-size-mobile: This variable is used to set the font size to 32px.
- $h1-size-mobile: This variable is used to set the font size to 26px.
- $h2-size-mobile: This variable is used to set the font size to 22px.
- $h3-size-mobile: This variable is used to set the font size to 18px.
Heading sizes – desktop:
- $h00-size:This variable is used to set the font size to 48px.
- $h0-size: This variable is used to set the font size to 40px.
- $h1-size: This variable is used to set the font size to 32px.
- $h2-size: This variable is used to set the font size to 24px.
- $h3-size: This variable is used to set the font size to 20px.
- $h4-size: This variable is used to set the font size to 16px.
- $h5-size: This variable is used to set the font size to 14px.
- $h6-size: This variable is used to set the font size to 12px.
Variables Used for changing font-weight are listed below:
- $font-weight-bold: This variable is used to set the font-weight to 600.
- $font-weight-light: This variable is used to set the font-weight to 300.
Variables Used for changing font height are listed below:
- $lh-condensed-ultra: This variable is used to set the font weight to 1.
- $lh-condensed: This variable is used to set the font-weight to 1.25.
- $lh-default: This variable is used to set the font weight to 1.5.
Approach:
- Firstly create one HTML file and include Primer CSS.
- In the next step map your CSS with the SCSS file using a compiler.
- In the last step just run the HTML file and you will get your output.
Example 1: In the below code, we will be using a font-size variable to change the size of the variable.
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<link rel="stylesheet" href="k/gfg.css">
</head>
<body>
<center>
<h1 style="color:green; ">GeeksforGeeks</h1><br>
<h2>A computer science portal for geeks.</h2>
</center>
</body>
</html>
|
SCSS code: Before creating the SCSS file, remember that the name of the SCSS file should be the same as the CSS file. In this example, we have used gfg.css and gfg.scss files.
- gfg.scss
$h00-size-mobile: 40px;
body { font-size: $h00-size-mobile;
}
|
Output:
Example 2:
<!DOCTYPE html> <html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<link rel="stylesheet" href="k/gfg.css">
</head>
<body>
<center>
<h1 style="font-size:50px;color:green; ">
GeeksforGeeks</h1><br>
<h2 class="gfg1">
A computer science portal for geeks.</h2>
<h1 class="gfg1">GeeksforGeeks</h1>
<h1 class="gfg2">GeeksforGeeks</h1>
<h1 class="gfg3">GeeksforGeeks</h1>
<h1 class="gfg4">GeeksforGeeks</h1>
<h1 class="gfg5">GeeksforGeeks</h1>
</center>
</body>
</html>
|
$h00-size-mobile: 40px;
$h0-size-mobile: 32px;
$h1-size-mobile: 26px;
$h2-size-mobile: 22px;
$h3-size-mobile: 18px;
.gfg1 {
font-size: $h00-size-mobile;
} .gfg2 {
font-size: $h0-size-mobile;
} .gfg3 {
font-size: $h1-size-mobile;
} .gfg4 {
font-size: $h2-size-mobile;
} .gfg5 {
font-size: $h3-size-mobile;
} |
Output:
Reference: https://primer.style/css/support/typography#typography-variables