DEV Community: Sebastiano Guerriero

Custom, accessible radio/checkbox buttons with perfect alignment

Sebastiano Guerriero — Wed, 09 Sep 2020 10:43:21 +0000

Building custom radio/checkbox buttons is not an easy task. They need to be accessible, easy-to-customize, and perfectly aligned to their labels.

Here's how we do it at CodyHouse.

Final result

Here's a preview of the final result (or download the CodyHouse UI component):

HTML

An important rule I try to stick to when building components is to start with the simplest structure and add more elements (e.g., wrapping parents) only if necessary.

For radio and checkbox buttons, here is all we need:

<!-- radio button -->
<div>
  <input class="radio" type="radio" name="radio-button" id="radio-1">
  <label for="radio-1">Choice 1</label>
</div>

<!-- checkbox button -->
<div>
  <input class="checkbox" type="checkbox" id="checkbox-1">
  <label for="checkbox-1">Option 1</label>
</div>

The HTML structure is identical to the one we'd use with native buttons, except we're adding a .radio/.checkbox class to the input.

CSS

Step 1 is to visually hide the native buttons:

// hide native buttons
.radio,
.checkbox {
  position: absolute;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0;
  height: 0;
  width: 0;
  pointer-events: none;
}

If you don't set top/right/bottom/left values for absolute position elements, they're removed from the flow, but they don't move. It's important because otherwise, their position would be unpredictable and may cause a scroll to the top of the page when the buttons are clicked.

Next, we're going to use the + (adjacent sibling combinator) to target and stylize the labels and their ::before pseudo elements (the custom buttons):

// label
.radio + label,
.checkbox + label { 
  user-select: none;
  cursor: pointer;
  line-height: 1.4;
}

// custom buttons - basic style
.radio + label::before,
.checkbox + label::before { 
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: var(--color-bg);
  border: 2px solid var(--color-contrast-low);
  margin-right: var(--space-xxxs); // gap between custom input and label
  transition: .2s;
}

// radio only style
.radio + label::before {
  border-radius: 50%; 
}

// checkbox only style
.checkbox + label::before {
  border-radius: 4px;
}

At this point, we can create some CSS custom properties. The advantage of doing so is that customization will be much easier later on if we decide to modify the buttons: we can look at and update the variables as opposed to inspecting all the CSS.

:root {
  // radios and checkboxes
  --checkbox-radio-size: 18px;
  --checkbox-radio-gap: var(--space-xxxs); // gap between button and label
  --checkbox-radio-border-width: 2px;
  --checkbox-radio-line-height: var(--body-line-height);

  // radio buttons
  --radio-marker-size: 8px;

  // checkboxes
  --checkbox-marker-size: 12px;
  --checkbox-radius: 4px;
}

// replace fixed values with variables - example 👇
.checkbox + label::before {
  border-radius: var(--checkbox-radius);
}

We're going to target the inputs' checked status and apply the style to the labels pseudo-elements:

// :checked
.radio:checked + label::before,
.checkbox:checked + label::before {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

// radio button :checked
.radio:checked + label::before {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg class='nc-icon-wrapper' fill='%23ffffff'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23ffffff'%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
  background-size: var(--radio-marker-size);
}

// checkbox button :checked
.checkbox:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpolyline points='1 6.5 4 9.5 11 2.5' fill='none' stroke='%23FFFFFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'/%3E%3C/svg%3E");
  background-size: var(--checkbox-marker-size);
}

We're using the background-image property to add the SVG markers (via data URI). The advantage of this technique is that you can customize the thickness of the icon (stroke-width='2') and its color (stroke='%23FFFFFF') in CSS.

What we have so far:

Alignment

Here comes the most challenging part: aligning the radio/checkbox buttons with their labels.

First, set the label's display property equal to inline-flex and align-items equal to flex-start:

:root {
  // ...
  --checkbox-radio-gap: var(--space-xxxs);
  --checkbox-radio-line-height: var(--body-line-height);
}

// label
.radio + label,
.checkbox + label { 
  display: inline-flex;
  align-items: flex-start; // align button and label to top
  line-height: var(--checkbox-radio-line-height);
  // ...
}

// custom buttons - basic style
.radio + label::before,
.checkbox + label::before { 
  flex-shrink: 0; // prevent the button from shrinking
  margin-right: var(--checkbox-radio-gap); // gap
  // ...
}

By doing so, we've fixed the left alignment issue visible when the label breaks in multiple lines, and we've vertically aligned buttons and labels to the top:

To vertically align buttons and labels, we need to calculate the label's height, which is equal to its font size multiplied by the line-height.

The line-height is stored in the var(--checkbox-radio-line-height) custom property. The font-size computed value of the label is unpredictable (e.g., we could change it using utility classes), but for its label::before pseudo-element that font-size is always going to be equal to 1em!

By knowing the height, we can use a formula to push down the custom radio/checkbox buttons of a very specific amount that aligns them with the label's first line. 🤯

.radio + label::before,
.checkbox + label::before {
  // ..
  position: relative;
  top: calc((1em * var(--checkbox-radio-line-height) - var(--checkbox-radio-size)) / 2);
}

This formula is compatible with any font-size and font-family values.

No more casual, unpredictable negative margin tricks! 🎉

Accessibility

Because we haven't created any custom element, the component is accessible, and screen readers properly announce it.

However, don't forget to include a :focus effect (the native buttons aren't visible):

// :focus
.radio:focus + label::before,
.checkbox:focus + label::before {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px alpha(var(--color-primary), 0.2);
}

Final Result

Here's the final result! You can download this component in our UI Framework.

Originally published at CodyHouse.co

Styling siblings on hover in CSS

Sebastiano Guerriero — Wed, 27 May 2020 12:28:09 +0000

Normally, you would need JavaScript to stylize all the siblings of an element you're interacting with. But wait! There's a cool method based 100% on CSS.

The idea, in short, is to target the :hover of the parent, then target all the children except the one you're hovering over.

.parent:hover .child:not(:hover) {
  /* this style affects all the children except the one you're hovering over */
}

Here's an example:

Originally published at CodyHouse.co

CSS Nugget: Text Divider in Flexbox

Sebastiano Guerriero — Thu, 27 Feb 2020 12:53:54 +0000

In this tutorial, we'll create a fluid text divider with a single <div>, with the help of Flexbox and pseudo-elements.

Preview

HTML

The structure is super simple: a single <div> containing the label of the divider.

<div class="text-divider">Text divider</div>

CSS

We can use the ::before and ::after pseudo-elements to create two lines on both sides of the label. Because we set the display property of the .text-divider equal to flex, we can apply flex-grow: 1 to the pseudo elements to have them occupy all the available space.

.text-divider {
  display: flex;
  align-items: center; // align text and lines vertically
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1; // both lines will expand to occupy the available space
}

A final touch would be using a CSS custom property to set the gap between the label and the lines:

.text-divider {
  display: flex;
  align-items: center;
  --text-divider-gap: 1rem; // set a customizable gap between label and lines
}

.text-divider::before,
.text-divider::after {
  content: '';
  height: 1px;
  background-color: silver;
  flex-grow: 1;
}

.text-divider::before {
  margin-right: var(--text-divider-gap);
}

.text-divider::after {
  margin-left: var(--text-divider-gap);
}

Create a Quick Cart Panel using CodyFrame

Sebastiano Guerriero — Thu, 23 Jan 2020 14:35:04 +0000

In case you've never heard of CodyFrame, it's a lightweight CSS framework that comes with 200+ accessible components.

In this tutorial, we'll create a quick cart template in a drawer panel.

Final result:
👉 https://codyhouse.co/ds/components/app/cart-drawer

Requirements

To follow along the tutorial, fork this pen on Codepen:
🕹 codepen.io/codyhouse/pen/Wqvpmm

or download CodyFrame on Github:

📦 Framework github.com/CodyHouse/codyhouse-framework
🎨 A1 Theme github.com/CodyHouse/a1-codyframe-theme

Video tutorial

Design an e-commerce product section using CodyFrame

Sebastiano Guerriero — Wed, 15 Jan 2020 11:33:27 +0000

In case you've never heard of CodyFrame, it's a lightweight CSS framework that comes with 200+ accessible components.

In this tutorial, I'm going to show you how to quickly combine a few components to create a product section for your online store, using CodyFrame's utility classes.

All the components used in this tutorial are free:

Final result:

🕹 https://codyhouse.co/ds/components/app/product

You don't need a CodyHouse account to follow along. Download CodyFrame on Github, follow the instructions to launch it using Gulp and copy/paste the components using the links above.

Video tutorial

Here's a video where I go through the process of creating a product section using CodyFrame's utility classes.

Highlights

Utility classes are particularly helpful when dealing with template components.

A template component contains layout rules. It manages spacing and responsive behavior. Because a template is an abstract entity, it's not easy to label it with a class identifier (i.e., .template-name).

The Product section we build in the video tutorial is a good example of a template component. It glues together other components, each one with its own logic and style.

What kind of utility classes help you build a template component?

Margin/Padding for managing spacing;
Flexbox/Grid for managing layout changes;
Text size for editing the component's size (if the component is built using em units).

Here's a skeleton of the Product component:

<section>
  <div class="margin-bottom-sm">
    <nav class="breadcrumbs text-sm"><!-- ... --></nav>
  </div>

  <div class="grid grid-gap-md">
    <div class="col-6@md col-7@lg">
      <figure class="image-zoom"></figure>
    </div>

    <div class="col-6@md col-5@lg">
      <h1 class="margin-bottom-xs">Product Name</h1>

      <div class="flex">
        <div class="rating text-xs"></div>
        <p class="margin-left-xxs"><!-- ... --></p>
      </div>

      <div class="text-component v-space-md margin-y-md">
        <!-- ... -->
      </div>

      <div class="margin-bottom-md">
        <p class="sr-only">Select size:</p>

        <div class="btns btns--radio"><!-- ... --></div>
      </div>

      <div class="flex flex-gap-xs">
        <label class="sr-only">Quantity:</label>

        <div class="number-input"><!-- ... --></div>

        <button class="btn btn--primary flex-grow">Add to Cart</button>
      </div>
    </div>
  </div>
</section>

In the snippet above:

The margin utility classes are used to create vertical spacing (along with the .v-space-md class applied to the .text-component).
The .sr-only accessibility class is used to hide content while keeping it accessible to screen readers.
The text size utility classes are used on multiple components to modify their size (with the help of the em units).
The .grid and col classes are used for the responsive layout
.flex is used to distribute items on the same row, while .flex-grow is used on the main button so that it takes all the available space.

The final result is that the Product component itself doesn't contain any custom CSS. Although this was not the goal when I started developing this component, having a good arsenal of utility classes can help you reduce the size of your CSS and create component variations by switching a class.

⚡️ Flash Grid: learn CSS Grid by building a grid system

Sebastiano Guerriero — Fri, 27 Dec 2019 10:36:11 +0000

Lately, I've been experimenting with the idea of building a lightweight grid system based on CSS Grid.

We do have a grid system in CodyFrame, and it's based on Flexbox. However, CSS Grid has so many powerful features not available in Flexbox, so I ended up creating Flash Grid.

I'm going to share the whole process behind creating Flash Grid. If you'd like to learn more about CSS Grid, this is a great place to start, since we'll touch the main CSS Grid properties, and we'll share some practical tricks to get the most out of this powerful layout system.

In case you'd rather skip the tutorial and just grab the code:

📦 Download Flash Grid on Github
🕹 Take if for a spin on Codepen

Let's start! 🙌

The first step is creating the .grid class:

$grid-columns: 12 !default;

.grid {
  --grid-cols: #{$grid-columns};
  display: grid;
  grid-gap: var(--grid-gap, 0); // default grid-gap = 0
  grid-template-columns: repeat(var(--grid-cols), 1fr); // grid of 12 flexible columns

  > * {
    grid-column-end: span var(--grid-cols); // each grid item takes full-width by default
  }
}

In defining the number of grid columns, we use the !default SCSS flag in case the grid system is imported as a module, and we want this value to be customizable.

The grid-template-columns is the property where we define the grid layout: we want 12 responsive columns. The width of each column is 1fr. Fr (fraction unit) is a smart unit, equal to 1 part of the available space. Because our grid is composed of 12x 1fr columns, each flexible column takes 1/12 of the available width.

The repeat() function allows us to pass a single width value (1fr). Another way to define the same grid would be:

.grid {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; // 🙈
}

...but, you know...not so elegant!

Here's a quick overview of the grid we've just created:

In the screenshot above, notice the numbers in between columns (for now, focus only on the positive numbers on top). These line numbers can be used to place grid items.

In the .grid snippet, we're also targeting all the grid children, and setting their grid-column-end value equal to span 12.

By default, we want each child to take the whole available width. grid-column-end is used to specify the grid item's end position. You can use this property to set an end line (e.g., grid-column-end: 3;). But if you use the "span" magic word, you define how many columns should be occupied by the grid item. For example, grid-column-end: span 12; means "span this element across 12 columns".

Why setting a default 12 columns span for the grid items? We're working mobile-first. We can assume, in most cases, our grid items will occupy the full-width (12 columns) at first, and then a smaller amount of columns on bigger screens. Our default value prevents us from having to specify on each grid item .col-12 (span 12) manually.

The number of columns is set as a CSS custom property, in case you want to change it on a component level (or by creating other utility classes). For example:

.grid--2 {
  --grid-cols: 2;
}

Next, we can define utility classes for the grid-gap property:

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

The spacing variables are part of CodyFrame. You can replace them with your own spacing scale or use the fallbacks specified in each variable (the value after the comma is applied if the variable is undefined).

The grid-gap property is used to define the space between grid items.

To complete the basic grid system, we should define the .col classes:

@for $i from 1 through $grid-columns {
  .col-#{$i}  { grid-column-end: span #{$i}; }
}

We use the SASS @for loop to generate the .col classes according to the number of columns specified in the $grid-columns variable.

The compiled CSS is:

.col-1  { grid-column-end: span 1; }
.col-2  { grid-column-end: span 2; }
.col-3  { grid-column-end: span 3; }
.col-4  { grid-column-end: span 4; }
.col-5  { grid-column-end: span 5; }
.col-6  { grid-column-end: span 6; }
.col-7  { grid-column-end: span 7; }
.col-8  { grid-column-end: span 8; }
.col-9  { grid-column-end: span 9; }
.col-10 { grid-column-end: span 10; }
.col-11 { grid-column-end: span 11; }
.col-12 { grid-column-end: span 12; }

The col classes specify the number of columns occupied by a grid item. Remember that the "span" word means "span the element across x columns", where x is the number specified after span.

Add some CSS Grid spice

To recap, the barebone version of Flash Grid includes the definition of the grid, the grid-gap, and the col utility classes:

Now it's time to add some spice! 💃

Here's the .grid-auto-cols utility class:

.grid-auto-cols { // cols = same size
  display: grid;
  grid-gap: var(--grid-gap, 0);
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

This class is similar to the .grid class, except we don't set a number of columns. auto-fit replaces the 12 in the .grid class. It means letting CSS Grid decide the number of columns based on the width value of the columns (the second value of the repeat() function).

But wait! The width value (1fr in the .grid class) is now replaced by a minmax() function. It literally means the minimum width of a column is 0, while the max value is 1fr. We're setting a range of values for the column width.

The result: you get a grid where all columns have the same width, regardless of their content or the number of grid items.

Using a similar approach, we create the .grid-auto-{size} utility classes:

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid
  display: grid;
  grid-gap: var(--grid-gap, 0);
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

Unlike .grid-auto-cols, these new classes have a minimum width value equal to --col-min-width. The result is a responsive grid where a new column is added when there's enough space for it (the minimum width specified in the minmax() function).

🔥 With the .grid-auto utility classes (.grid-auto-cols and .grid-auto-{size}) you can create responsive layouts with no need to use .col classes on the grid items. Actually, you shouldn't use .col classes at all if you want the .grid-auto classes to work properly.

Finally, to take advantage of the grid line numbers, we can create a new set of utility classes: col-start-{line-number} and .col-end-{line-number}.

@for $i from 1 through $grid-columns {
  .col-start-#{$i} { grid-column-start: #{$i}; }
  .col-end-#{$i+1} { grid-column-end: #{$i+1}; }
}

The .col-start classes go from .col-start-1 to col-start-12, while the .col-end classes go from .col-end-2 to .col-end-13.

Use them if you want a grid item to span between a specific start and end line.

Remember these are the line numbers:

The negative numbers at the bottom are an alternative way to target the same lines. Why they're useful: if you want to target the final line, regardless of the number of columns, you can do the following:

.col-end { 
  grid-column-end: -1; 
}

The .col-start/end classes allow you to create advanced grids:

Class breakpoint modifiers

To make our grid editable at different breakpoints, we can add class modifiers. In CodyFrame, our convention is to add a @{breakpoint} suffix to the classes (e.g., col-4@sm) to target breakpoints.

Here's an example of the class modifiers at the x-small breakpoint:

$breakpoints: (
  xs: 32rem, 
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs { --col-min-width: 8rem; }
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }

  .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xs { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xs { grid-column-start: auto; }
  .col-end-auto\@xs { grid-column-end: auto; }
}

Beta version of ⚡️ Flash Grid

The beta of Flash Grid is good to go!

📦 Download Flash Grid on Github

Take it for a spin on Codepen:

Final SCSS code:

// ⚡️ Flash Grid
$grid-columns: 12 !default;

.grid, [class*="grid-auto-"] {
  display: grid;
  grid-gap: var(--grid-gap, 0);
}

.grid {
  --grid-cols: #{$grid-columns};
  grid-template-columns: repeat(var(--grid-cols), 1fr);

  > * {
    grid-column-end: span var(--grid-cols);
  }
}

.grid-auto-xs, .grid-auto-sm, .grid-auto-md, .grid-auto-lg, .grid-auto-xl { // auto-sized grid
  grid-template-columns: repeat(auto-fit, minmax(var(--col-min-width), 1fr));
}

.grid-auto-xs { --col-min-width: 8rem; }
.grid-auto-sm { --col-min-width: 10rem; }
.grid-auto-md { --col-min-width: 15rem; }
.grid-auto-lg { --col-min-width: 20rem; }
.grid-auto-xl { --col-min-width: 25rem; }

.grid-auto-cols { // cols = same size
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs, 0.125rem); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs, 0.25rem); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs, 0.375rem); }
.grid-gap-xs    { --grid-gap: var(--space-xs, 0.5rem); }
.grid-gap-sm    { --grid-gap: var(--space-sm, 0.75rem); }
.grid-gap-md    { --grid-gap: var(--space-md, 1.25rem); }
.grid-gap-lg    { --grid-gap: var(--space-lg, 2rem); }
.grid-gap-xl    { --grid-gap: var(--space-xl, 3.25rem); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl, 5.25rem); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl, 8.5rem); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl, 13.75rem); }

@for $i from 1 through $grid-columns {
  .col-#{$i}  { grid-column-end: span #{$i}; }
  .col-start-#{$i} { grid-column-start: #{$i}; }
  .col-end-#{$i+1} { grid-column-end: #{$i+1}; }
}

.col-start { grid-column-start: 1; }
.col-end { grid-column-end: -1; }

// breakpoints
$breakpoints: (
  xs: 32rem, 
  sm: 48rem,
  md: 64rem,
  lg: 80rem,
  xl: 90rem
) !default;

@mixin breakpoint($breakpoint) {
  @media (min-width: map-get($map: $breakpoints, $key: $breakpoint)) { @content; }
}

@include breakpoint(xs) {
  .grid-auto-xs\@xs { --col-min-width: 8rem; }
  .grid-auto-sm\@xs { --col-min-width: 10rem; }
  .grid-auto-md\@xs { --col-min-width: 15rem; }
  .grid-auto-lg\@xs { --col-min-width: 20rem; }
  .grid-auto-xl\@xs { --col-min-width: 25rem; }

  .grid-auto-cols\@xs { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xs  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xs { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xs { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xs { grid-column-start: auto; }
  .col-end-auto\@xs { grid-column-end: auto; }
}

@include breakpoint(sm) {
  .grid-auto-xs\@sm { --col-min-width: 8rem; }
  .grid-auto-sm\@sm { --col-min-width: 10rem; }
  .grid-auto-md\@sm { --col-min-width: 15rem; }
  .grid-auto-lg\@sm { --col-min-width: 20rem; }
  .grid-auto-xl\@sm { --col-min-width: 25rem; }

  .grid-auto-cols\@sm { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@sm  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@sm { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@sm { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@sm { grid-column-start: auto; }
  .col-end-auto\@sm { grid-column-end: auto; }
}

@include breakpoint(md) {
  .grid-auto-xs\@md { --col-min-width: 8rem; }
  .grid-auto-sm\@md { --col-min-width: 10rem; }
  .grid-auto-md\@md { --col-min-width: 15rem; }
  .grid-auto-lg\@md { --col-min-width: 20rem; }
  .grid-auto-xl\@md { --col-min-width: 25rem; }

  .grid-auto-cols\@md { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@md  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@md { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@md { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@md { grid-column-start: auto; }
  .col-end-auto\@md { grid-column-end: auto; }
}

@include breakpoint(lg) {
  .grid-auto-xs\@lg { --col-min-width: 8rem; }
  .grid-auto-sm\@lg { --col-min-width: 10rem; }
  .grid-auto-md\@lg { --col-min-width: 15rem; }
  .grid-auto-lg\@lg { --col-min-width: 20rem; }
  .grid-auto-xl\@lg { --col-min-width: 25rem; }

  .grid-auto-cols\@lg { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@lg  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@lg { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@lg { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@lg { grid-column-start: auto; }
  .col-end-auto\@lg { grid-column-end: auto; }
}

@include breakpoint(xl) {
  .grid-auto-xs\@xl { --col-min-width: 8rem; }
  .grid-auto-sm\@xl { --col-min-width: 10rem; }
  .grid-auto-md\@xl { --col-min-width: 15rem; }
  .grid-auto-lg\@xl { --col-min-width: 20rem; }
  .grid-auto-xl\@xl { --col-min-width: 25rem; }

  .grid-auto-cols\@xl { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }

  @for $i from 1 through $grid-columns {
    .col-#{$i}\@xl  { grid-column-end: span #{$i}; }
    .col-start-#{$i}\@xl { grid-column-start: #{$i}; }
    .col-end-#{$i+1}\@xl { grid-column-end: #{$i+1}; }
  }

  .col-start-auto\@xl { grid-column-start: auto; }
  .col-end-auto\@xl { grid-column-end: auto; }
}

How to create decorative section dividers in CSS

Sebastiano Guerriero — Wed, 18 Dec 2019 11:51:43 +0000

In the first part of this tutorial, you'll learn how to create a vector divider in Illustrator using brushes and effects. In the second part, you'll learn to integrate the divider into an HTML+CSS project.

Final result:

To follow along the tutorial, fork this pen on Codepen:
🕹 codepen.io/codyhouse/pen/Wqvpmm

or download CodyFrame on Github:

📦 Framework github.com/CodyHouse/codyhouse-framework
🎨 A1 Theme github.com/CodyHouse/a1-codyframe-theme

Here's the video tutorial:

Originally published on CodySchool

Animated card component in HTML and CSS

Sebastiano Guerriero — Thu, 12 Dec 2019 12:38:13 +0000

In this tutorial, we'll design an animated card using CodyFrame.

Final result:

To follow along the tutorial, fork this pen on Codepen:
🕹 codepen.io/codyhouse/pen/Wqvpmm

or download CodyFrame on Github:

📦 Framework github.com/CodyHouse/codyhouse-framework
🎨 A1 Theme github.com/CodyHouse/a1-codyframe-theme

Here's the video tutorial:

Originally published at CodyHouse.co

Using CSS custom properties to reduce the size of your CSS

Sebastiano Guerriero — Tue, 26 Nov 2019 13:08:52 +0000

Unlike SASS variables, CSS Custom Properties can be modified in class selectors, allowing you to create abstractions and reduce the size of your CSS.

Let me show you an example!

Here's a quick video tutorial. Jump this section if you prefer to read the article.

In the CodyHouse Framework, we use the .grid-gap-{size} utility classes to set the spacing among grid items:

.grid {
  display: flex;
  flex-wrap: wrap;

  > * {
    flex-basis: 100%;
  }
}

.grid-gap-xxxs {
  margin-bottom: calc(-1 * var(--space-xxxs));
  margin-left: calc(-1 * var(--space-xxxs));

  > * {
    margin-bottom: var(--space-xxxs);
    margin-left: calc(var(--space-xxxs));
  }
}

.grid-gap-xxs {
  margin-bottom: calc(-1 * var(--space-xxs));
  margin-left: calc(-1 * var(--space-xxs));

  > * {
    margin-bottom: var(--space-xxs);
    margin-left: calc(var(--space-xxs));
  }
}

.grid-gap-xs {
  margin-bottom: calc(-1 * var(--space-xs));
  margin-left: calc(-1 * var(--space-xs));

  > * {
    margin-bottom: var(--space-xs);
    margin-left: calc(var(--space-xs));
  }
}

.grid-gap-sm {
  margin-bottom: calc(-1 * var(--space-sm));
  margin-left: calc(-1 * var(--space-sm));

  > * {
    margin-bottom: var(--space-sm);
    margin-left: calc(var(--space-sm));
  }
}

.grid-gap-md {
  margin-bottom: calc(-1 * var(--space-md));
  margin-left: calc(-1 * var(--space-md));

  > * {
    margin-bottom: var(--space-md);
    margin-left: calc(var(--space-md));
  }
}

.grid-gap-lg {
  margin-bottom: calc(-1 * var(--space-lg));
  margin-left: calc(-1 * var(--space-lg));

  > * {
    margin-bottom: var(--space-lg);
    margin-left: calc(var(--space-lg));
  }
}

.grid-gap-xl {
  margin-bottom: calc(-1 * var(--space-xl));
  margin-left: calc(-1 * var(--space-xl));

  > * {
    margin-bottom: var(--space-xl);
    margin-left: calc(var(--space-xl));
  }
}

.grid-gap-xxl {
  margin-bottom: calc(-1 * var(--space-xxl));
  margin-left: calc(-1 * var(--space-xxl));

  > * {
    margin-bottom: var(--space-xxl);
    margin-left: calc(var(--space-xxl));
  }
}

.grid-gap-xxxl {
  margin-bottom: calc(-1 * var(--space-xxxl));
  margin-left: calc(-1 * var(--space-xxxl));

  > * {
    margin-bottom: var(--space-xxxl);
    margin-left: calc(var(--space-xxxl));
  }
}

Because there's a lot of repetition, a few weeks ago, we've decided to use CSS custom properties to simplify these classes.

The first step was creating an abstraction that contains the code we repeat for each utility class:

[class*="grid-gap"] {
  margin-bottom: calc(-1 * var(--grid-gap, 1em));
  margin-left: calc(-1 * var(--grid-gap, 1em));

  > * { 
    margin-bottom: var(--grid-gap, 1em); 
    margin-left: var(--grid-gap, 1em);
  }
}

This attribute selector looks for classes that contain the "grid-gap" string (all the grid-gap utility classes). Note that we've replaced the --space-unit variables with a new --grid-gap variable.

In our .grid class, we set the --grid-gap variable equal to 0 (default value).

.grid {
  --grid-gap: 0px;
  display: flex;
  flex-wrap: wrap;

  > * {
    flex-basis: 100%;
  }
}

Now we can modify, for example, the .grid-gap-xxxxs class as the following:

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }

We no longer need all the chunk of code about margins; we can just modify the value of the --grid-gap variable.

If we do the same for all the utility classes, we end up with the following:

.grid {
  --grid-gap: 0px;
  display: flex;
  flex-wrap: wrap;

  > * {
    flex-basis: 100%;
  }
}

[class*="grid-gap"] {
  margin-bottom: calc(-1 * var(--grid-gap, 1em));
  margin-left: calc(-1 * var(--grid-gap, 1em));

  > * { 
    margin-bottom: var(--grid-gap, 1em); 
    margin-left: var(--grid-gap, 1em);
  }
}

.grid-gap-xxxxs { --grid-gap: var(--space-xxxxs); }
.grid-gap-xxxs  { --grid-gap: var(--space-xxxs); }
.grid-gap-xxs   { --grid-gap: var(--space-xxs); }
.grid-gap-xs    { --grid-gap: var(--space-xs); }
.grid-gap-sm    { --grid-gap: var(--space-sm); }
.grid-gap-md    { --grid-gap: var(--space-md); }
.grid-gap-lg    { --grid-gap: var(--space-lg); }
.grid-gap-xl    { --grid-gap: var(--space-xl); }
.grid-gap-xxl   { --grid-gap: var(--space-xxl); }
.grid-gap-xxxl  { --grid-gap: var(--space-xxxl); }
.grid-gap-xxxxl { --grid-gap: var(--space-xxxxl); }

This optimization reduces the CSS size of this example by more than half! Obviously, you can apply this technique only when it's possible to abstract some rules (I'm not suggesting that CSS custom properties will reduce by half the size of your CSS). But still, this tutorial is just an example of code optimization made possible by using CSS variables.

ps: CSS Variables are supported in all modern browsers.

Originally published at CodyHouse.co

Everyone uses CSS frameworks

Sebastiano Guerriero — Wed, 30 Oct 2019 13:20:47 +0000

Every front-end developer uses CSS frameworks, even those saying they don’t.

Anytime the “what’s your favorite CSS framework” question pops up, you read the same comments: a bunch of developers expressing their love for framework X or Y, and others stating they don’t use frameworks.

Some of the reasons why some developers say they don’t use CSS frameworks:

Frameworks are opinionated.
Why would I need a framework when I can write clean CSS myself?
Frameworks are bloated with stuff I don’t need.

But what is a framework, exactly?

"A framework is a supporting structure around which something can be built."

A framework doesn’t need to be opinionated. Its CSS can be as clean as yours (or it could literally be yours). It can be super slim, to the point where it includes only a bunch of reusable rules.

If you do one of the following, you’re using a framework even if you say you don’t:

You have a bunch of utility classes that you copy and paste from project to project.
You have a set of basic rules (e.g., for typography and spacing) that you copy into new projects, and then tweak to accommodate different needs.
You have a boilerplate for the style of buttons and forms that is easy to customize.
In general, in any case where you reuse something across different projects.

There’s only one case when you can say you don’t use a CSS framework, and it’s the truth: if you start a project with your CSS files completely blank.

But seriously, why would you do that? 🤔

I know I’m being pedantic. “When I say I don’t use a CSS framework, I’m referring to Bootstrap, not 20 lines of code!”, I hear you scream. However, I think there’s a misleading message that is delivered to young developers: “Frameworks are bad. If you were a good developer, you’d write clean CSS from scratch”. And yet millions of developers download Bootstrap every month. Are they all making a mistake? Not at all.

You could use a super slim framework or create one yourself, and it would be fine. You could use a heavier framework or create one yourself, and it would be fine.

Starting from (literally) scratch every time does not prove you’re a good developer.

Let me walk you through the main problems a framework helps you solve and why we all need one.

Global styles and abstraction

When Claudia and I started working on the CodyHouse Components project (a library of HTML, CSS, JS web components), we soon realized how important it is to have global styles and abstract rules.

A global style is a rule that, when modified, affects all the components it crosses (e.g., a buttons.scss file where you store the style of your buttons).

A CSS abstraction is a rule that gives the same result regardless of the element it is applied to (e.g., utility classes).

Global styles make your project customizable. For example, if you create a reusable typography.scss file where you define the type scale, you can 1) edit the type scale and affect all the components of your current project or 2) set a custom type scale for your next project.

CSS abstractions make it easier to create component variations without the headaches caused by naming things. For example, imagine you create a new component. If you want to create two class modifiers where the text is aligned in the center or right, you end up doing the following:

Then you create another component and have the same ‘issue’. Once again, you create two new class modifiers:

An alternative approach would be creating 3 utility classes (abstractions):

Now you can have infinite components and apply the same utility classes to align text.

I’m not suggesting you should create utility classes for everything (even though some frameworks do so, and developers love them). Find your own balance, create the abstractions you need.

Do not reinvent the wheel

If you come up with a pattern that works, why wouldn’t you extend it to new projects (and include it in your framework)? For example, you start working on accessibility and soon realize how handy it is the .sr-only utility class:

Is there any reason why you shouldn’t use it in all your projects? Nope.

Getting back to your old projects doesn’t need to be THAT painful

Opening up an old CSS project is a pain; we all know that. However, it doesn’t need to be THAT painful. Using the same framework across multiple projects means working with patterns you’re already familiar with. If you use the same mixins, global settings, grid rules, and utility classes, you’ll need less time figuring out how to do stuff.

For example, let’s imagine you have created a scale of spacing values:

You know you can go ahead and modify a component using one of the scale values:

The spacing values may vary in different projects, but the way you apply them is the same. You go ahead and set padding: var(--space-md);. If it’s too small/big, you can pick another value (or edit the scale).

The alternative approach would be:

First, figure out how spacing rules were set when the project was initiated.
Then, apply the spacing rules.

That extra step makes all the difference in the world. It’s where the frustration lies: figuring out things when you, or someone else you work with, already went through that process before.

Frameworks evolve and get updated (e.g., when you learn new patterns and replace old ones). There will be cases when you still need to remember how/why some rules were set in the first place. It sucks, but working with reusable patterns (framework) means reducing the number of times this happens.

Learn by building reusable patterns

One more advantage of creating your own framework is learning to identify reusable patterns. You find that piece of your CSS puzzle that could work across multiple projects, and decide to store it in a safe place (your framework).

Or, you can learn from frameworks created by other developers. Question why that rule was abstracted. If you can’t come up with an answer, google it; or ask the author.

The process of questioning what you do and discovering the mechanics behind a decision is what makes you learn. Not the assumption that you have to come up with all the solutions yourself.

Conclusion

A CSS framework is a tool. It’s not good or bad, and it doesn’t define you as a developer. When you find a pattern that works, save it. If you find a framework that ticks all your boxes, use it. As long as you learn in the process, nothing bad comes from using it. Quite the opposite.

If you’re looking for a lightweight front-end framework for building accessible, bespoke interfaces, check out CodyHouse!