CSS Logical Properties

Andy Bell shares a tutorial on how to “create spacing that works regardless of the direction of your content or the environment of your users” with CSS logical properties.

See the Pen Logical Properties Demo by Andy Bell (@andybelldesign) on CodePen.

Created on March 13, 2020 Updated on March 13, 2020. A Pen by Andy Bell on CodePen. License.

index.html

<button dir="ltr" class="button" type="button">
  <svg viewBox="0 0 24 24">
    <path d="M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z" />
  </svg>
  <span>A nice button</span>
</button>

script.js

const button = document.querySelector("button");

button.addEventListener("click", evt => {
  if (button.getAttribute("dir") === "ltr") {
    button.setAttribute("dir", "rtl");
  } else {
    button.setAttribute("dir", "ltr");
  }
});

style.css

.button {
  display: inline-flex;
  align-items: center;
  padding: 0.8rem 2rem;
  color: #ffffff;
  background: hsl(338, 81%, 41%);
  border: none;
  font-family: Courier New, monospace;
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: 0.03ch;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.button:hover:focus {
  outline: none;
}

.button svg {
  margin-inline-end: 0.5em;
  width: 1.4em;
  height: 1.4em;
  fill: currentcolor;
  transform: translateY(-1px); 
}

body {
  display: grid;
  place-items: center;
  background: hsl(39, 100%, 97%);
  color: hsl(222, 30%, 16%);
}

styles

<link href="https://unpkg.com/modern-css-reset/dist/reset.min.css" rel="stylesheet" />