Forem: Kite

Fluid Typography Using CSS Custom Properties (CSS Variables)

Kite — Mon, 31 Jan 2022 10:17:51 +0000

Introduction

If you want to change font sizes fluidly responsive to the screen size, you can do so by using units such as vw. For example, if you set font-size: 5vw;, the font size will be 48px for a viewport width of 960px, and 16px for 320px. However, if you feel 16px is too small for 320px and want to make it 32px, you will need to do some calculations.

For more details about fluid typography and the calculation, please refer to the slide from my old presentation if you can read Japanese:

Typography Basic

Or, you can read the following English articles:

I've also made a web app that generates CSS with the calculation:

ViewportScaler

And a Sass mixin:

ixkaito / viewportscale

To linearly scale font-size, margin, padding, etc. across viewport widths.

In this article, I'll show you how to implement fluid typography using calc(), clamp(), min(), max() and CSS custom properties, so that you don't need to calculate every time by yourself.

Source code and demo

How to Use

First, copy and paste the following code into your CSS. The comment part is optional but helps you understand how to use. Then, all you have to do is to set necessary CSS custom properties to any elements, referring to the documentation.

/**
* Available vars:
* @var --viewport-from: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
* @var --viewport-to: <number> - Number in pixels without the unit. Required if `--font-size` is not exist.
* @var --font-size-from: <number> - Number in pixels without the unit. Required if `--font-size` and `--min-font-size` is not exist.
* @var --font-size-to: <number> - Number in pixels without the unit. Required if `--font-size` and `--max-font-size` is not exist.
* @var --max-font-size: <number> - Number in pixels without the unit. Optional.
* @var --min-font-size: <number> - Number in pixels without the unit. Optional.
* @var --viewport-unit-converter: 1vw | 1vh | 1vmin | 1vmax - Optional. Default: 1vw.
* @var --font-size: <length> | <percentage> | <absolute-size> | <relative-size> | Global values - Optional.
*/
*, ::before, ::after {
  --viewport-unit-converter: 1vw;
  --fz-from: var(--font-size-from, var(--min-font-size));
  --fz-to: var(--font-size-to, var(--max-font-size));
  --fz-slope: (var(--fz-to) - var(--fz-from)) / (var(--viewport-to) - var(--viewport-from)) * 100;
  --fz-intercept: (var(--viewport-to) * var(--fz-from) - var(--viewport-from) * var(--fz-to)) / (var(--viewport-to) - var(--viewport-from));
  --font-size: calc(var(--fz-slope) * var(--viewport-unit-converter) + var(--fz-intercept) * 1px);

  --min-fz-px: calc(var(--min-font-size) * 1px);
  --max-fz-px: calc(var(--max-font-size) * 1px);
  --clamp: clamp(var(--min-fz-px), var(--font-size), var(--max-fz-px));
  --max: var(--has-max, var(--min));
  --min: var(--has-min, var(--font-size));
  --has-max: min(var(--max-fz-px), var(--font-size));
  --has-min: max(var(--min-fz-px), var(--font-size));

  font-size: var(--clamp, var(--max));
}

Example 1:

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

In this case, the font size will be 32px for a viewport width of 320px and 48px for 960px without minimum and maximum values. The font size will keep getting smaller or bigger, even the viewport is smaller than 320px or larger than 960px.

Example 2:

h1 {
  --viewport-from: 320;
  --viewport-to: 960;
  --min-font-size: 32;
  --max-font-size: 48;
}

This has the same rate of change as example 1, but the font size will not be smaller than 32px or bigger than 48px.

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
  --min-font-size: 32;
  --max-font-size: 48;
}

This code gives you the same result. You can omit --font-size-from and --font-size-to if --font-size-from and --min-font-size, and --font-size-to and --max-font-size have the same value.

Example 3:

h1 {
  --viewport-from: 320;
  --viewport-to: 960;
  --min-font-size: 32;
  --font-size-to: 48;
}

You can also specify only the minimum or maximum value.

Example 4:

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
  --min-font-size: 36;
  --max-font-size: 40;
}

--font-size-from and --min-font-size, and --font-size-to and --max-font-size can have different values. In this case, the font size will change from 32px for 320px to 48px for 960px; actually, it will not be smaller than 36px and bigger than 40px.

Example 5:

h1 {
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

@media (min-width: 960px) {
  h1 {
    --viewport-from: 960;
    --font-size-from: 48;
    --viewport-to: 1920;
    --font-size-to: 64;
  }
}

If you use media queries, you can change the rate of change in the middle. If the above code didn't have the media query part, the font size would be 72px at 1920px.

Example 6:

h1 {
  --viewport-from: 320;
  --font-size-from: 48;
  --viewport-to: 960;
  --font-size-to: 32;
  --min-font-size: 16;
}

It is also possible to change from a large size to a small size.

Example 7:

h1 {
  --font-size: 2rem;
}

You can also set a constant value. If --font-size is specified, all other properties are optional.

Example 8:

h1 {
  --font-size: calc(2.5vw + 24px);
}

You can also specify your own formula.

Example 9:

h1 {
  --font-size: calc(2.5vw + 24px);
  --min-font-size: 32;
  --max-font-size: 48;
}

You can also use your own formula with maximum and minimum values.

Example 10:

h1 {
  --viewport-unit-converter: 1vh;
  --viewport-from: 320;
  --font-size-from: 32;
  --viewport-to: 960;
  --font-size-to: 48;
}

By default, vw is used to calculate for the viewport width, but you can also use vh, vmin or vmax. Please note that you need to add 1 to each unit, as in 1vh.

I hope these examples cover most of the usage.

Explanation

The formula is the same as in the above articles, so let's skip it.

Point 1

If we set the initial value and formulas of CSS custom property to :root, we will not get the expected result because of the value inheritance. We have to set them to * to apply them to all elements.

Point 2

The CSS calc() can add and subtract values with units, but not multiply and divide them. We need to append units after calculating the unitless values. Therefore, most of the properties need to be set without units.

We can append a unit by multiplying by 1 with a unit, as in var(--fz-intercept) * 1px. This is why it has to be 1vh in example 10.

Point 3

For now, CSS doesn't have conditional expressions. How I did to determine whether maximum or minimum values are specified or not is using clamp(), min() and max() with the CSS custom property fallback. clamp(), min() and max() return an empty value if arguments are not passed correctly. If the return value is empty, the custom property will refer to the fallback.

Conclusion

This is a byproduct of my other project, but I think it turned out to be quite useful. I hope this helps. Thank you for reading my article.

NextSSS, Next.js static site starter

Kite — Tue, 20 Jul 2021 07:31:20 +0000

I made a Next.js starter template especially for static site. It includes full setup for TypeScript, Tailwind CSS, Sass, Google Analytics, Next SEO, active link component, etc.

GitHub: https://github.com/ixkaito/nextsss

How to Use

Execute create-next-app with npm or Yarn to bootstrap the template:

npx create-next-app --example https://github.com/ixkaito/nextsss
# or
yarn create next-app --example https://github.com/ixkaito/nextsss

Google Analytics

Edit GA_TRACKING_ID in /lib/gtag.ts.

Example:

export const GA_TRACKING_ID = 'G-XXXXXXXXXX'

Active `className` on a link

Example:

import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/">
        <a>Home</a>
      </Link>
      <Link href="/about/">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav

This will dynamically add the active class name to each links. You can also change the activeClassName like this:

import Link from '../components/ActiveLink'

const Nav: React.FC = () => {
  return (
    <nav>
      <Link href="/" activeClassName="current">
        <a>Home</a>
      </Link>
      <Link href="/about/" activeClassName="current">
        <a>About</a>
      </Link>
    </nav>
  )
}

export default Nav

Pure CSS iMac 2021

Kite — Thu, 22 Apr 2021 12:17:16 +0000

HTML:

<div class="imac">
  <img src="...">
</div>

<div class="imac blue">
  <img src="...">
</div>

<div class="imac purple">
  <img src="...">
</div>

<div class="imac pink">
  <img src="...">
</div>

<!-- using iframe inside `.imac` -->
<div class="imac orange">
  <iframe src="https://kiteretz.com/about/"></iframe>
</div>

<!-- the recommended size of the inner element is 1600x900 -->
<div class="imac yellow">
  <img src="https://via.placeholder.com/1600x900">
</div>

<!-- power off -->
<div class="imac green"></div>

CSS:

.imac {
  --body-width: 50vw;
  --body-border-radius: calc(var(--body-width) * 0.016);
  --bezel-width: calc(var(--body-width) * 0.025);
  --display-height: calc(var(--body-width) * 0.538);
  --front-panel-height: calc(var(--body-width) * 0.125);
  --stand-height: calc(var(--body-width) * 0.1554);
  --stand-width: calc(var(--body-width) * 0.2372);
  --color: #d5d6d8;  
  display: grid;
  grid: var(--bezel-width) 
        var(--display-height) 
        var(--front-panel-height)
        var(--stand-height) 
        / var(--bezel-width) 1fr var(--stand-width) 1fr var(--bezel-width);
  width: var(--body-width);
}

.imac > * {
  background: #fff;
  border-radius: calc(var(--body-width) * 0.002);
  border: calc(var(--body-width) * 0.001) solid #333;
  grid-area: 2 / 2 / 3 / 5;
  place-self: stretch;
}

.imac::before {
  background: 
    radial-gradient(circle,
      #333 calc(100% - 1px), 
      transparent calc(100% - 0.5px)
    ),
    linear-gradient(to bottom, 
      #eeeef0 85.25%, 
      var(--color) 85.25%
    );
  background-repeat: no-repeat;
  background-position: top var(--bezel-width) center, top;
  background-size: 94.8% 78%, 100%;
  border-radius: var(--body-border-radius);
  box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
  content: "";
  grid-area: 1 / 1 / 4 / 6;
}

.imac::after {
  background:
    linear-gradient(to bottom, 
      rgba(0 0 0 / 0.125),
      rgba(0 0 0 / 0.05) 55%,
      rgba(0 0 0 / 0.05) 75%,
      rgba(0 0 0 / 0.075) 92%,
      rgba(255 255 255 / 0.3) 96%,
      rgba(0 0 0 / 0.35) 99%
    ),
    linear-gradient(to right, 
      rgba(255 255 255 / 0.2),
      rgba(0 0 0 / 0.35) 1%,
      rgba(255 255 255 / 0.3) 4%,
      rgba(0 0 0 / 0.02) 8%,
      rgba(255 255 255 / 0.2) 25%,
      rgba(255 255 255 / 0.2) 75%,
      rgba(0 0 0 / 0.02) 92%,
      rgba(255 255 255 / 0.3) 96%,
      rgba(0 0 0 / 0.35) 99%,
      rgba(255 255 255 / 0.2)
    ),
    linear-gradient(to bottom,
      var(--color),
      var(--color)
    );
  background-repeat: no-repeat;
  background-position: top, bottom, top;
  background-size: 100% 94%, 100% 6%, 100%;
  border-radius: 0 0 6% 6% / 2%;
  box-shadow: 0 0 calc(var(--body-width) * 0.001) rgba(0 0 0 / 0.2);
  content: "";
  grid-area: 4 / 3 / 5 / 4;
  z-index: -1;
}

.imac.blue {
  --color: #b6c8db;
}

.imac.purple {
  --color: #c5c6e6;
}

.imac.pink {
  --color: #ecccc6;
}

.imac.orange {
  --color: #e8b7a5;
}

.imac.yellow {
  --color: #f4d596;
}

.imac.green {
  --color: #bcd0c8;
}

Results:

To change the size of iMac, just edit or override the --body-width custom property.

You can easily create your original color iMac by editing the --color custom property 😉

KTRZ Monokai - Minimal VS Code color theme

Kite — Fri, 29 Jan 2021 06:06:29 +0000

When I first moved to VS Code from Sublime Text, I couldn't find a color theme that I liked, so I made my own and used it for a long time. Finally, I published it on the Marketplace. It's minimal, flat and with the Monokai color scheme. Of course totally free and open source. It's listed on the trending page 🎉

Syntax highlight

Terminal

Setting

👉 Homepage | Marketplace

Too many configuration files in development nowadays

Kite — Mon, 14 Sep 2020 05:49:57 +0000

We use lots of tools in development nowadays, and there are too many configuration files in a single project. With irony, I made a list of configuration files.

.config is a list of configuration files with a brief description of each tool, so it might help you a little.
https://github.com/ixkaito/.config

Pull-requests of addition and translation are welcome.

Bathe, the simplest WordPress starter theme

Kite — Tue, 28 Jul 2020 01:44:10 +0000

I released a simplest WordPress starter theme including full setup for Sass, Autoprefixer, stylelint, Webpack, ESLint, Browsersync, etc.

Documentation: https://ixkaito.github.io/bathe/
GitHub repository: https://github.com/ixkaito/bathe

If you use wp-env with Bathe, you can start your theme development really fast.

1. Download or clone your repository generated from Bathe
2. Change directories into the Bathe folder

cd /path/to/bathe

3. Start wp-env

wp-env start

4. Install dependencies

npm i

5. Start developing

npm run dev

Of course, you can use Bathe with any development environment other than wp-env.

I would love to hear your feedback, and issues and PRs are welcome 😎

Forem: Kite

Fluid Typography Using CSS Custom Properties (CSS Variables)

Introduction

ixkaito / viewportscale

To linearly scale font-size, margin, padding, etc. across viewport widths.

Source code and demo

How to Use

Example 1:

Example 2:

Example 3:

Example 4:

Example 5:

Example 6:

Example 7:

Example 8:

Example 9:

Example 10:

Explanation

Point 1

Point 2

Point 3

Conclusion

NextSSS, Next.js static site starter

How to Use

Google Analytics

Active className on a link

Pure CSS iMac 2021

KTRZ Monokai - Minimal VS Code color theme

Too many configuration files in development nowadays

Bathe, the simplest WordPress starter theme

Active `className` on a link