
Input groups, popularlized by Bootstrap, is a pattern that includes an input with a label and/or a button element.

```html
<div class="input-group">
  <div class="input-group-prepend">
    <label for="name">Name</label>
  </div>
  <input type="text" name="name" id="name" />
</div>
```

We wrap the elements in a div with a class of `input-group`. We will use this element to provide our focus styles. We also wrap our label in an element with a class of `input-group-prepend` which allows us to add a border to the right of the label. We could also have a `input-group-append` class which would add a border to the left of the label.

Now that we have our markup structure in place, we can start to apply our styling to the elements.

```scss
.input-group {
  display: inline-flex;
  border: 1px solid #ddd;

  input {
    padding: 1rem;
    border: 0;
    font: inherit;

    // Since we are providing an alternative focus
    // style, it is safe to remove the focus styling
    // from the input itself
    &:focus {
      outline: none;
    }
  }

  label {
    padding: 1rem;
  }
}
```

Now we can now watch for focus within our input group and adjust our border color and apply a box-shadow.

```scss {2-5}
.input-group {
  &:focus-within {
    border-color: #05f;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  }
}
```

[View the demo](https://codepen.io/alexcarpenter/pen/PobzRXr).


Using focus-within to style input groups


Words that break to their own line when there is not enough horizontal space are often refered to as "widows". This can be awkward, so it's often common to ensure there are always at least two words on the last line.

```
Getting started with
JavaScript
```

To prevent this from happening, it's common to add a `&nbsp;` in between the last two words. Here is a helper function that uses Regex to find the last word with a space before it in a string, and replaces the space with a `&nbsp;`.

```js
const widont = (str) => {
  const REGEX = /\s((?=(([^\s<>]|<[^>]*>)+))\2)\s*$/;
  return str.replace(REGEX, '\u00A0$1');
};
```

Now in the case that JavaScript breaks to its own line, both `with` and `JavaScript` will go to the next line. Preventing any awkward "widows" across your website.

```
Getting started
with JavaScript
```


Preventing widows with a widont helper function


I, like a lot of folks these days make heavy use of emoji's in text communication throughout the day. I was about to add an emoji within a new post on this site and remembered that there are some [limitations of how emojis work on the web](https://tink.uk/accessible-emoji/), requiring a bit more work.

Since my blog is built on top of MDX, I built a small React component that takes a `label` and a `symbol` as props and returns markup to be used by screen readers.

Usage:

```jsx
<Emoji label="bacon" symbol="🥓" />
```

Which ouputs:

```html
<span role="img" aria-label="bacon">🥓</span>
```


Building an accessible emoji component for my MDX blog


When building client sites, it was a common request to adjust grid layouts based on content types. For example, if the content type was a blog article, we wanted to display three items per row and include a gap between the items equal to `1rem`. If the content type was a calendar event, we wanted two items per row and increase the gap to `2rem`.

To do this, we would typically create grid variants based on type – `grid--article`, `grid--event`, etc. This required us to know the content types before hand and increased the amount of CSS needed for our grid object.

Now we can make use of CSS grid and custom properties to create a flexible grid system. Below we create our grid object and create a custom property for `grid-gap` and `grid-items-per-row` and set their default values.

```css
.o-grid {
  --grid-gap: 1rem;
  --grid-items-per-row: 3;
  display: grid;
  grid-gap: var(--grid-gap);
  grid-template-columns: repeat((var(--grid-items-per-row)), 1fr);
}
```

Now we can use of grid object with our defaults as seen below. With this we'd expect to see three items per row with a grid gap of `1rem`.

```html
<div class="o-grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

If we want to override the defaults, we can set our custom properties inline. Now we'd have a grid with two items per row and a grid gap of `2rem`.

```html
<div class="o-grid" style="--grid-gap: 2rem; --grid-items-per-row: 2;">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

[Here's a demo on CodePen](https://codepen.io/alexcarpenter/pen/Vwwgywd) that you can play with.


How to create a flexible grid solution with custom properties.