Custom Styling in Mendix: A Starter Guide for Advanced Styling Customizations and Responsive Design System

Introduction

This week, I ran a poll asking what aspect of UI/UX implementation Mendix developers find most challenging. The results from 39 respondents revealed interesting insights:

Poll Result: UI/UX Implementation

While responsive design ranked third in challenges, it’s often the foundation that makes or breaks user experience across devices. In my recent demo showcasing a responsive calendar application (built by one of our junior developers at Golden Earth), I demonstrated how proper responsive design can create seamless experiences from mobile to desktop.

Today, I’ll provide a comprehensive guide to implementing creative responsive design in Mendix web applications, covering breakpoints, layout strategies, and custom styling techniques that will elevate your applications’ user experience.

Understanding Atlas UI Breakpoints

Before diving into implementation techniques, it’s crucial to understand how Atlas UI defines responsive breakpoints. These breakpoints form the foundation of all responsive behavior in Mendix applications.

Atlas UI Breakpoint Structure

Atlas UI uses a comprehensive breakpoint system designed to cover the full spectrum of device sizes:

//== Media queries breakpoints
//## Define the breakpoints at which your layout will change, adapting to different screen sizes.

$screen-xs: 480px !default;
$screen-sm: 576px !default;
$screen-md: 768px !default;
$screen-lg: 992px !default;
$screen-xl: 1200px !default;

// So media queries don't overlap when required, provide a maximum (used for max-width)
$screen-xs-max: calc(#{$screen-sm} - 1px) !default;
$screen-sm-max: calc(#{$screen-md} - 1px) !default;
$screen-md-max: calc(#{$screen-lg} - 1px) !default;
$screen-lg-max: calc(#{$screen-xl} - 1px) !default;

Breakpoint Categories

These breakpoints translate to practical device categories:

• Extra Small (xs): 0px to 575px – Small phones
• Small (sm): 576px to 767px – Large phones, small tablets
• Medium (md): 768px to 991px – Tablets in portrait mode
• Large (lg): 992px to 1199px – Tablets in landscape, small laptops
• Extra Large (xl): 1200px and above – Desktops, large laptops

Understanding these breakpoints is essential because they determine when your layout adaptations will trigger, ensuring your application provides optimal experiences across all device categories. These breakpoints can also be customized in _variables.scss file to suit the application’s custom requirements.

Mendix Device-Specific Classes

One of Mendix’s most powerful responsive design features is its built-in device-specific visibility classes. These classes allow you to show or hide elements based on the user’s device type without writing custom CSS.

Built-in Visibility Classes

Mendix provides several visibility classes out of the box:

<!-- Hide elements on specific devices -->
<div class="hide-phone">This content is hidden on phones</div>
<div class="hide-tablet">This content is hidden on tablets</div>
<div class="hide-desktop">This content is hidden on desktop</div>

Layout Template Strategies

Creating responsive layouts in Mendix requires strategic thinking about how content should adapt across different screen sizes. The key is designing a single layout template that handles multiple devices gracefully.

CSS-Based Responsive Techniques

While Mendix’s built-in classes provide excellent basic responsive functionality, custom CSS media queries allow for more sophisticated responsive design implementations.

Custom Media Query Implementation

Create custom responsive behaviors using Atlas UI’s breakpoint variables:

// Example: Mobile-first approach for containers
.responsive-container {
  width: 100%;      // Mobile
  @media (max-width: $screen-sm-max) {
    .container {
      .container-header {
        //Your style goes here
      }

      .container-body {
        //Your style goes here
      }
    }
  }

  // Tablet
  @media (min-width: $screen-md) and (max-width: $screen-lg-max) {
    .container {
      .container-header {
        //Your style goes here
      }

      .container-body {
        //Your style goes here
      }
    }
  }

  // Desktop: Full table display
  @media (min-width: $screen-xl) {
    .container {
      .container-header {
        //Your style goes here
      }

      .container-body {
        //Your style goes here
      }
    }
  }
}

Custom Styling Implementation

The foundation of creative responsive design lies in effective custom styling. Mendix provides several approaches to implement custom styles while maintaining compatibility with Atlas UI.

SCSS Customization Architecture

Organize your custom styles using a structured approach:

// Example: Your custom variables stylesheet
@import 'custom-variables';

// Override Atlas UI variables
$brand-primary: #007acc;
$brand-secondary: #6c757d;

// Override responsive breakpoints if needed
$screen-md: 800px; // Custom tablet breakpoint

// Typography customization
$font-family-base: 'Open Sans', sans-serif;
$font-size-base: 0.9rem;

Design Properties Integration

Widgets can be customized by changing their design properties. Colors, text, and many other variables can be altered to customize widgets on a case-by-case basis if the styling or placement are not quite right or even new properties can be added.

Devs can implement their own (company) design properties so that other users can easily change the look and feel of widgets to match the company’s brand.

Example: Adding rounded corners design property to the Buttons

Step 1: File -> design-properties.json

{
  "Button": [
    {
      "name": "Rounded Corners",
      "type": "Dropdown",
      "description": "Add rounded corners.",
      "options": [
        {
          "name": "12px",
          "class": "rounded-corners-12"
        },
        {
          "name": "20px",
          "class": "rounded-corners-20"
        }
      ]
    }
  ]
}

Step 2: File -> borders.scss

.rounded-corners-12 {
  border-radius: 12px !important;
}

.rounded-corners-20 {
  border-radius: 20px !important;
}

Step 3: Result -> Styling Properties of Button Widget

Best Practices and Performance Considerations

Implementing responsive design effectively requires attention to performance and maintainability. Here are key practices that ensure your responsive Mendix applications remain fast and maintainable.

Performance Optimization Strategies

1. Minimize CSS Specificity

// Avoid overly specific selectors
// Bad:
.page-content .mx-layoutcontainer .mx-layoutcontainer .card .title {
  font-size: 1.2rem;
}

// Good:
.card-title-large {
  font-size: 1.2rem;
}

2. Use Efficient Media Query Organization

// Organize media queries by component, not by breakpoint
.container {
  // Base styles
  display: flex;

  // Mobile modifications
  @media (max-width: $screen-sm-max) {
    flex-direction: column;
  }

  // Desktop enhancements
  @media (min-width: $screen-lg) {
    justify-content: space-between;
  }
}

Maintainability Best Practices

1. Documentation Strategy

// Document your responsive patterns
/**
 * Responsive Card Component
 *
 * Mobile: Single column layout with stacked actions
 * Tablet: Two column layout with inline actions
 * Desktop: Three column layout with hover effects
 *
 * Usage: Add 'card-responsive' class to any card container
 */
.card-responsive {
  @include card-responsive;
}

2. Testing Approach

• Test on actual devices
• Use Browser Stack for cross-platform testing
• Implement automated screenshot testing
• Audit performance regularly on mobile

Conclusion

Creating exceptional responsive experiences in Mendix requires a strategic combination of understanding Atlas UI’s breakpoint system, leveraging built-in device-specific classes, and implementing thoughtful custom styling.

Key principles for success:

• Start with Atlas UI’s foundation – Understand and leverage the existing breakpoint system
• Use device-specific classes strategically – Hide, show, and adapt content based on device capabilities
• Implement consistent custom styling – Create reusable patterns that scale across your application
• Optimize for performance – Ensure your responsive designs enhance rather than hinder user experience

At Golden Earth, we continue to help many clients transform their Mendix applications from functional to exceptional through strategic design implementations. Our approach combines deep technical expertise with user experience best practices to create applications that work beautifully across all devices.

If you’re interested in seeing these techniques in action, check out our responsive calendar demo built by one of our junior developers at this link.