Modules that adjust with SMACSS techniques

In my experience with SMACSS, I have encountered a common issue - determining the correct approach to constructing adaptive content modules.

For instance, let's say I have layout grid classes (.container, .row, .span-1, .span-N) along with media queries for responsive design.

I want to apply the same principles to content modules to control their adaptive behavior, such as dividing a link list into columns:

<ul class="list">
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
</ul>

I can achieve this by adding layout classes to module elements like so:

<ul class="list row">
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
</ul>

However, this approach creates a tight coupling between layout and module, which goes against the core principle of SMACSS that modules should be independent from layout.

Another option is to create a special module (.adapt) and nest the content module within it like this:

<div class="adapt">
    <div class="adapt-span3">
        <ul class="list">
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
        </ul>
    </div>
    <div class="adapt-span3">
      <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
</div>

This method adheres to the rules but results in overly complex HTML markup.

So the question remains - What approach do you take to build adaptive content modules in SMACSS?

Answer №1

Through various discussions and analyzing case studies, I have discovered that the most effective approach for handling such scenarios is to implement a mediator block. This could involve creating a list with items that have percentage widths, allowing for a clear separation between layout and module elements. By utilizing a mediator block, it becomes possible to use it across different layout grids and apply unique adaptive behavior rules tailored to both the mediator block and the overall layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Collection of components displayed in a row - Bootstrap 4

In order to meet the requirement, the label must be positioned above the input element, and the group consisting of each label and input element should be displayed inline with one another. I have managed to achieve this using the following code snippet, ...

The hover effect on sibling elements is not functioning for the <img> tag

When you hover over the image displayed within the <div class="like absolute">, the image within the <div class="balloons absolute"> doesn't appear. <div id="container" class="relative"> <div class="like absolute"> ...

How to conceal hyperlink underline with css

This is some HTML Code I'm working with <a href="test.html"> <div class=" menubox mcolor1"> <h3>go to test page</h3> </div> </a> Here's the corresponding CSS: .menubox { height: 150px; width: 100%; ...

Aligning text in a vertical progress bar using absolute positioning

Currently, I am trying to create a health bar-like element but I am facing difficulties in centering the text within it. Despite exhausting all my options, the text is either off-center when its length changes or extends beyond the borders of the bar. Her ...

Bug in floating elements within a header causing issues with IE6 and IE7

We are currently facing an issue where an anchor tag is floating right inside a header. While it displays correctly on IE8 and Firefox, we are encountering problems with it popping outside the header box. Does anyone have any suggestions on how to prevent ...

iPhone users may encounter a freezing issue with the footer when scrolling

Can someone assist in keeping the footer at the bottom right of the screen on my website? When I view it on my iPhone, the footer remains fixed when scrolling down. Here is how it looks: . Your help would be greatly appreciated. Thank you and have a wonder ...

I'm puzzled as to why my fixed element is gravitating towards the right side of the entire screen instead of aligning with the right side of its parent element

I have inserted a code snippet that highlights my issue. I am attempting to ensure that the .navigation element remains fixed at the top of the colored divs, however, when using 'right: 0;', the .navigation element seems to shift to the right sid ...

Creating a full-height page with collapsible content using Bootstrap 4 and flex

I'm attempting to create a collapsible div with a fixed height within a full-height page using flex and bootstrap 4 (also encountering the same issue with bootstrap 3). The current code snippet functions correctly on Firefox, but encounters a problem ...

Alter the color of textbox text using JavaScript

I have a text input field. When clicked, I want to change the text color style using JavaScript. Previously, I successfully achieved clearing the inner content of the textbox when clicked and reverting to the default version on blur. This code is currently ...

Issues with Ul List Alignment (CSS and HTML)

<div class="companies"> <ul class="logos"> <li><img src="images/image1.png" alt="" height="25px" /></li> <li><img src="images/image2.png" alt="" height="25px" /></li> <li> ...

Ways to align a bootstrap 4 row both vertically and horizontally in the center amidst other rows

Assume there is a main menu followed by three rows. The first row should be at the top and the third at the bottom, while the second row needs to be centered both vertically and horizontally. As you scroll down, the main menu should be able to hide while ...

What's the key ingredient I need to add for a dropdown navigation menu?

What am I overlooking in my HTML and CSS coding to create a standard list dropdown in my navigation menu? When I preview this section of the page in Chrome and IE, the navigation area appears fine until I hover over the Fishing and Guides link. Instead of ...

Is the text alignment off?

I've been immersed in creating a website, but I encountered an issue for which I can't seem to find the solution. Check out my text alignment here (test) - it's not aligned all the way to the left of the content Here is the HTML code: < ...

Adding a CSS link to the header using JavaScript/jQuery

Is there a way to dynamically inject a CSS link located in the middle of an HTML page into the head using JavaScript? <head> ... styles here </head> <body> code <link href='http://fonts.googleapis.com/css?family=Lato:400,300, ...

The tooltip in Bootstrap v2.3.2 is causing words to be cut right in half

The tooltip plugin is set up like this: $("#id").tooltip({ placement: 'top', trigger: 'hover', html: true, container: 'body' }); Is there a way to prevent this from happening? Appreciate any insights. ...

How can you implement a transform transition toggle when a user clicks on an element

Check out this CodePen example for a cool overlay animation: https://codepen.io/pen/MoWLrZ Experience the unique animation of two overlays as you click for the first time. However, on the second click, watch as both overlays seamlessly return to their ori ...

Click to enlarge font size across the entire project

I'm working on a project for elderly users and my client wants a feature where they can easily adjust the font size throughout the application with just one click of a button. What is the best approach for implementing this functionality? My initial ...

Incorporating dynamic HTML content into a Bootstrap 2.3.2 popover

I'm trying to create a dynamic Bootstrap popover with HTML content when hovering over a button. Here's what I have so far: $(".btn.btn-navbar").hover(function() { html = '<ul class="nav"><li><a href="#">hello</li>& ...

The CSS div gradually descends as I increase the width of the browser

I'm in need of assistance with creating a website specifically for mobile devices and tablets. The issue I am facing is that when I expand my browser width to a tablet size, the "loginD" div shifts downwards - view this gif Below is my HTML code: &l ...

Is it possible to create a CSS design where alternating table rows have two different heights?

Looking to design a table where the height of every other row is approximately one-third of the preceding row. I've managed to style this with an inline method, but I'm curious if it's possible to create separate tags for different tr styles ...