Implementing a consistent CSS structure for various media sizes

Question

Implementing a consistent CSS structure for various media sizes

Utilizing CSS grid and Sass, I implement varying grid layouts for different screen sizes (phone, tablet, desktop). However, on certain pages, I desire the same layouts at slightly larger or smaller screens than others.

Is there a way to achieve this without duplicating styles excessively? My current solution (shown below) functions, but results in repetitive styling.

To elaborate:

I have 3 distinct grids selected according to screen size.

.hero {
    &__container {
        grid-template-areas:
            "header"
            "image"
            "text";
        }
        @media min-width: 1000px {
            grid-template-areas:
                "header header header"
                "text   ...     image"
                "text   ...     image";
            }
            // additional definitions for this screen size
        }
        @media min-width: 1300px {
            grid-template-areas:
                "header header image"
                "text   ...    image"
                "text   ...    image";
            }
            // other definitions for this size
        }
    }

  &__header {
    grid-area: header;
    font-size: 2.5rem;
    
    @media min-width: 1000px {
        font-size: 2.8rem;
    }
    @media min-width: 1300px {
        font-size: 3.2rem;
    }
  }
  ...
}

These are utilized across approximately 20 similar web pages.

<div class="page_a">
    <div class="hero">
        <div class="hero__container">
            <div class="hero__header">...</div>
            <div class="hero__text">...</div>
            <div class="hero__image">...</div>
        </div>
    </div>
</div>

The layout remains consistent, however, I wish to transition to different layouts at varying breakpoints based on content specifics like header text length, image size, importance, etc.

What I aim to accomplish is depicted as follows:

.page_a {
    .hero {
        // retain default settings, no alterations
    }
}

.page_c {
    .hero {
        // longer header requires bigger screen for largest layout switch 
        // specify that the 1300px layout should be used from 1500px
    }
}

The sole workaround I achieved was merely redefining all the grids at each potential breakpoint (default + custom ones), leading to excessive repetition in the code:

.page_c {
    .hero {
        // utilize 1000px layout also for 1300px - whole process needs to be repeated
        @media min-width: 1300px {
            grid-template-areas:
                "header header header"
                "text   ...     image"
                "text   ...     image";
            }
            // additional definitions for this size
        }
        // use 1300px layout for 1500px - entire set of rules has to be reiterated
        @media min-width: 1500px {
            grid-template-areas:
                "header header image"
                "text   ...    image"
                "text   ...    image";
            }
            // other specifications for this size
        }
    }
}

This implies that whenever a layout adjustment is made, changes must be applied throughout all instances where it is used at various sizes.

css responsive-design css-grid grid-layout

Answer 1

Answer №1

Consider using SASS or SCSS along with a @mixin to solve your issue. I personally prefer SCSS, but you can also use SASS.

Understanding the @mixin

According to the official SASS documentation:

Mixins enable you to define styles that are reusable throughout your stylesheet.

To utilize a @mixin, first define it and then call it in your code using an @include. Each @mixin should have a distinct name. For instance, create a @mixin layout_600 and employ it with an @include layout_600.

There are two key considerations when working with @mixin:

Define a @mixin before utilizing it with an @include. Otherwise, SCSS will attempt to call something undefined as it's declared later in your stylesheet.
Declare a @mixin outside of your nested code (preferably at the top of your stylesheet). If you define a @mixin within nested code, you won't be able to reference it later for modifying default styles. To understand this concept better, let me show you the right way versus the wrong way.

Correct Approach:

@mixin layout_600 {
    font-size: 3rem;
    color: blue;
    font-weight: 700;
}

.hero {
    &__header {
        @media (min-width: 600px) {
            @include layout_600;
        }
    }
}

.page_b {
    .hero {
        // Using the 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                // This works successfully
                @include layout_600;
            }
        }
    }
}

Incorrect Approach:

.hero {
    &__header {
        @media (min-width: 600px) {
            @mixin layout_600 {
                font-size: 3rem;
                color: blue;
                font-weight: 700;
            }
        }
    }
}

.page_b {
    .hero {
        // Using the 600px layout for the 1000px as well
        &__header {
            @media (min-width: 1000px) {
                // This won't work
                @include layout_600;
            }
        }
    }
}

For each desired layout (e.g., 600px), create a @mixin. You only need to define it once per layout, but you can invoke a particular @mixin multiple times. This has several advantages:

No need to rewrite your code, simply call the specific @mixin with @include whenever needed.
If style modifications are required, update the @mixin once. The changes will reflect across all references to that @mixin.

Demonstration Example

Prior to Default Style Alteration

I defined three @mixins like so:

for window width < 600px,
for 600px < window width < 1000px and
for window width > 1000px.

https://i.stack.imgur.com/dC7Qw.png

The font-size and color vary based on different window widths. Font size increases and color transitions from black to blue to red as window width expands. Additionally, there's a div in the top right corner displaying current window width.

Post Default Style Modification

I opted to utilize the 600px layout (@mixin layout_600) for page_b even at 1000px. Achieving this is simple by calling @mixin layout_600 via @include layout_600 as shown below:

.page_b {
    .hero {
        // Applying 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                @include layout_600;
            }
        }
    }
}

https://i.stack.imgur.com/vmTWf.png

In the scenario where window width actually reaches 1000px, the styling for page_b mirrors that of 600px width (smaller font and blue color).

Customizing a @mixin

You can also customize a @mixin if necessary. For example, I utilized the 600px layout (@mixin layout_600) but altered the color from red to green as illustrated below:

.page_b {
    .hero {
        // Applying 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                @include layout_600;
                color: green; // Customizing the mixin
            }
        }
    }
}

https://i.stack.imgur.com/NkYdf.png

As evident, the color should've been blue (as dictated by @mixin layout_600), but it appears green instead.

Answer 2

Consider using SASS or SCSS along with a @mixin to solve your issue. I personally prefer SCSS, but you can also use SASS.

Understanding the @mixin

According to the official SASS documentation:

Mixins enable you to define styles that are reusable throughout your stylesheet.

To utilize a @mixin, first define it and then call it in your code using an @include. Each @mixin should have a distinct name. For instance, create a @mixin layout_600 and employ it with an @include layout_600.

There are two key considerations when working with @mixin:

Define a @mixin before utilizing it with an @include. Otherwise, SCSS will attempt to call something undefined as it's declared later in your stylesheet.
Declare a @mixin outside of your nested code (preferably at the top of your stylesheet). If you define a @mixin within nested code, you won't be able to reference it later for modifying default styles. To understand this concept better, let me show you the right way versus the wrong way.

Correct Approach:

@mixin layout_600 {
    font-size: 3rem;
    color: blue;
    font-weight: 700;
}

.hero {
    &__header {
        @media (min-width: 600px) {
            @include layout_600;
        }
    }
}

.page_b {
    .hero {
        // Using the 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                // This works successfully
                @include layout_600;
            }
        }
    }
}

Incorrect Approach:

.hero {
    &__header {
        @media (min-width: 600px) {
            @mixin layout_600 {
                font-size: 3rem;
                color: blue;
                font-weight: 700;
            }
        }
    }
}

.page_b {
    .hero {
        // Using the 600px layout for the 1000px as well
        &__header {
            @media (min-width: 1000px) {
                // This won't work
                @include layout_600;
            }
        }
    }
}

For each desired layout (e.g., 600px), create a @mixin. You only need to define it once per layout, but you can invoke a particular @mixin multiple times. This has several advantages:

No need to rewrite your code, simply call the specific @mixin with @include whenever needed.
If style modifications are required, update the @mixin once. The changes will reflect across all references to that @mixin.

Demonstration Example

Prior to Default Style Alteration

I defined three @mixins like so:

for window width < 600px,
for 600px < window width < 1000px and
for window width > 1000px.

https://i.stack.imgur.com/dC7Qw.png

The font-size and color vary based on different window widths. Font size increases and color transitions from black to blue to red as window width expands. Additionally, there's a div in the top right corner displaying current window width.

Post Default Style Modification

I opted to utilize the 600px layout (@mixin layout_600) for page_b even at 1000px. Achieving this is simple by calling @mixin layout_600 via @include layout_600 as shown below:

.page_b {
    .hero {
        // Applying 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                @include layout_600;
            }
        }
    }
}

https://i.stack.imgur.com/vmTWf.png

In the scenario where window width actually reaches 1000px, the styling for page_b mirrors that of 600px width (smaller font and blue color).

Customizing a @mixin

You can also customize a @mixin if necessary. For example, I utilized the 600px layout (@mixin layout_600) but altered the color from red to green as illustrated below:

.page_b {
    .hero {
        // Applying 600px layout for 1000px width as well
        &__header {
            @media (min-width: 1000px) {
                @include layout_600;
                color: green; // Customizing the mixin
            }
        }
    }
}

https://i.stack.imgur.com/NkYdf.png

As evident, the color should've been blue (as dictated by @mixin layout_600), but it appears green instead.

Implementing a consistent CSS structure for various media sizes

Answer №1

Understanding the @mixin

Demonstration Example

Prior to Default Style Alteration

Post Default Style Modification

Customizing a @mixin

Similar questions

Assigning a new classification to the primary object in the evolving array of objects

Moving a popup div along with a marker in Leaflet can be achieved by using the set

Creating a Dynamic Login Panel Using HTML, CSS, and Jquery

Vanished were the empty voids within our

Hovering over the Instagram icon will reveal a stunning visual effect

Is there a way to trigger the opening of a new file or page when a CSS animation comes to an end?

Using scale transformations to animate SVG group elements

Adjust the color of the navbar only after a user scrolls, with a slight delay rather than

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

Stop the button from spanning the entire width of its container

Is there a way to extract the text from the inner div of an element using nightwatch.js?

Drupal 7 FlexSlider - alignment issue with image placement

Modify radio button colors upon selection with a variety of colors

Transforming the hue of a radio-button

Tips on adjusting the text color of the material radio button

Adding an input field and icon at the center using ::after

Text-color in the v-tooltip

Tips on adjusting a position that shifts with changes in window size

Unable to implement the `omega/theme.css` file within the angular.json configuration

How to create a slideToggle effect for nested ul and li elements