DEV Community: CodyHouse

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

Using responsive modifiers to control layout changes in your components

Claudia Romano — Mon, 20 Jan 2020 13:17:40 +0000

A new approach to the responsiveness of content-dependent components.

Planning the responsive behavior of a component can be tricky, particularly when the component layout is highly affected by its content.

For example, let's consider a table component. You may decide to use two different layouts: one optimized for smaller screens (state-a layout), the other for bigger screens (state-b layout).

You would then need to decide the breakpoint for the change of layout and set it in CSS using a media query.

However, the same table component could have two columns or twenty.

If your table has a low number of columns, you may decide to change the layout at a small breakpoint:

For a table with more columns or richer content, instead, you may want to change it later to make sure it does not look too crowded on small screens:

Ideally, you should find a breakpoint that works for both of them (and all the other tables you have on your website). You could use a .table class to define the style of the state-a layout, and use a media query to overwrite this style for the state-b layout:

<table class="table">
  <!-- table content -->
</table>

<style>
  .table {
    /* state-a layout style */

    @media (min-width: 600px) {
        /* state-b layout style */
    }
  }
</style>

This solution may not be ideal because the breakpoint you choose is a compromise: you could end up with some tables that look too crowded and others too sparse. Even if you find a solution that seems to work with today's tables, it could easily break with tomorrow's.

Class Modifiers

A possible alternative would be to define responsive class modifiers (classes that share the same style but target different breakpoints) to have the option of triggering the layout change at different breakpoints.

If we consider an example with two breakpoints (small and medium), you would have:

.table {
  /* state-a layout style */
}

/* small breakpoint */
@media (min-width: 600px) {
  .table--state-b\@sm {
    /* state-b layout style */
  }
}

/* medium breakpoint */
@media (min-width: 1000px) {
  .table--state-b\@md {
    /* state-b layout style */
  }
}

then you can apply those modifiers to different <table>s based on their content:

<!-- 👇 switch layout at a small breakpoint -->
<table class="table table--state-b@sm"></table>

<!-- 👇 switch layout at a medium breakpoint -->
<table class="table table--state-b@md"></table>

The code defined in the .table--state-b@sm class is the same as the one in the .table--state-b@md. Remember, those two classes are used to create the same layout; it's only applied at different breakpoints.

This approach has two main disadvantages. The first one is the maintainability of your code: if you need to make changes to the state-b layout, you would need to update two different classes (.table--state-b@sm and .table--state-b@md). This is something you can solve using a CSS pre-processor (e.g., using SASS mixins).

The second issue is having the CSS code for state-b repeated multiple times in the final CSS (twice if you have two modifiers, but it could be more if you need additional variations!).
Repeat this for all the components and the different media queries, and this could cause a significant increase in your CSS file size.

Solution

While working on the Table category of the Components Library at CodyHouse, we ended up using a different approach; we defined a class for the state-b layout:

.table {
  /* state-a layout style */
}

.table--state-b {
  /* state-b layout style */
}

We then defined a --table-layout CSS custom property inside the .table class and modified its value using class modifiers:

.table {
  --table-layout: state-a;
}

@media (min-width: 600px) {
  .table--state-b\@sm {
     --table-layout: state-b;
  }
}

@media (min-width: 1000px) {
  .table--state-b\@md {
     --table-layout: state-b;
  }
}

Note that the class modifiers are now used to change the value of a CSS custom property; there's no repetition of layout style.

Using JavaScript, we can check whether to add or remove the .table--state-b class based on the value of this CSS custom property. This will apply the proper layout style!

var layout = getComputedStyle(table).getPropertyValue('--table-layout');
table.classList.toggle('table--state-b',  layout == 'state-b');

This technique allows us to use a single class (.table--state-b) for the layout style, regardless of the media query. Adding a new variation only requires setting the value of a single CSS custom property. No code repetition involved!

In this example, we've been working with tables, but you can apply this technique to any component whose responsiveness is highly affected by its content.

Downsides?

This approach requires JavaScript to work, but that should not be an issue: if JS is off, we serve the state-a version of the table, which is perfectly accessible.

What about CSS custom properties support? Using CSS variables is probably the cleanest and most self-explanatory way. But if you need to support older browsers (e.g., IE 11 and below) you can use a ::before pseudo-element and change its content using the class modifiers:

.table::before {
  display: none;
  content: 'state-a';
}

@media (min-width: 600px) {
  .table--state-b\@sm::before {
      content: 'state-b';
  }
}

@media (min-width: 1000px) {
  .table--state-b\@md::before {
      content: 'state-b';
  }
}

In JS, you can check the value of the ::before content rather than a custom property. Same result, different browser support! You can decide based on your needs.

That's it. I hope you find this approach useful. If you use a different technique, I would love to hear it!

Originally published on CodyHouse

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.

Tutorial: Create an accessible rating plugin

Claudia Romano — Thu, 02 Jan 2020 12:35:47 +0000

In this tutorial, we'll go through the different steps of creating a rating plugin in CSS and JavaScript, with a particular focus on:

keyboard accessibility (use Tab key, Space bar and arrow keys to navigate and interact with the component);
aria attributes and roles to improve Screen Reader accessibility;
no JavaScript support.

Final result:

The Rating plugin is also available as a component in the CodyHouse UI Framework.

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

⚡️ 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