Implementing Responsive Design into Clarity's Pages

Responsive design is crucial for delivering seamless user experiences across devices. Clarity needs to implement these principles into their marketing site to ensure a consistent user experience across all digital viewports and improve engagement. In these exercises, you'll update Clarity's master pages to make them responsive. Additionally, you'll add responsive styling to Clarity's theme CSS client extension to center the navigation menu items.

Exercise: Making Clarity's Master Pages Responsive

Here, you'll leverage Liferay's page builder features to make Clarity's master page templates responsive.

  1. Open the Site Menu (Site Menu), expand Design, and select Page Templates.

  2. Within the Masters tab, click the Primary Master Page template to begin editing it.

  3. In the editing toolbar, select the Landscape Phone viewport.

    Select the Landscape Phone viewport in the editing toolbar.

  4. Select the Image fragment in the Header Branding container and configure this setting:

    Tab Setting Value
    Styles Spacing > Margin (left and right) auto (Custom unit)
     

    Select the Image fragment in the Header Branding container and configure this setting.

    NOTE
    To use the Custom unit type, select the margin setting, click the Select Units button next to the value field, and choose Custom.

  5. Select these fragments and configure their settings:

    Fragment Tab Setting Value
    Grid (in “Footer Navigation”) General Layout 2 Modules per Row
    Grid (in “Footer Legal”) General Layout 2 Modules per Row
  6. In the editing toolbar, select the Portrait Phone viewport.

  7. Select these fragments and configure the following settings:

    Fragment Tab Setting Value
    Announcement container (in “Header Announcement Bar”) Styles Spacing > Margin (left and right) Spacer 2
    Paragraph (in “Announcement”) Styles Text > Text Alignment Align Center
    Page Footer container Styles Spacing > Padding (left and right) Spacer 0
    Grid (in “Footer Navigation”) General Layout 1 Module per Row
    Products Navigation container (in “Footer Navigation > Grid”) Styles Spacing > Margin (left) Spacer 2
    Get In Touch Navigation container (in “Footer Navigation > Grid”) Styles Spacing > Margin (right) Spacer 2

  8. Click Publish Master.
    Now that you've included a responsive design to Clarity's Primary Master Page, you'll update the Distributor Master Page.

  9. Click the Distributor Master Page template to start editing it.

  10. In the editing toolbar, select the Tablet viewport.

  11. Select the Grid fragment in the Distributor Footer container and configure this setting:

    Tab Setting Value
    General Layout 1 Module per Row

  12. Repeat steps 3-8 to make the Distributor Master Page responsive.

    NOTE
    Because the Distributor Master Page doesn't include the Footer Navigation and Header Announcement Bar containers, you can safely skip the steps mentioning them.

  13. Once published, go to Clarity's Home or Tickets page and resize your browser window to verify your changes.

Great! You've added responsive design to Clarity's master pages. Next, you'll make navigation menus responsive using client extensions.

Exercise: Adding Responsive Styling to Clarity's Navigation Menus

Here, you'll add responsive styling to Clarity's theme CSS client extension and redeploy it.

  1. In your course workspace, navigate to client-extensions/clarity-theme/src/css/ folder.

  2. Open the _custom.scss file in a text editor or IDE.

  3. Add this code snippet to the bottom of the file:

    @media(max-width: 480px) {
    .navbar-blank.navbar-nav.navbar-site {
        justify-content: center;
        font-size: 0.875rem;
    }
}
@media(max-width: 768px) {
    .navbar-blank.navbar-nav.navbar-site {
        justify-content: center;
    }
}

    This dynamically centers the navigation menu's items and reduces their font size based on screen size.

  4. Save the file.

  5. Open a terminal and navigate to the client-extensions/clarity-theme/ project folder in your course workspace.

  6. Run this command to build and deploy the client extension:

    blade gw clean deploy

  7. Verify it deploys successfully.

    2025-01-24 14:08:34.676 INFO [fileinstall-directory-watcher][BundleStartStopLogger:68] STARTED claritytheme_7.4.13 [1463]

  8. Go to Clarity's Home or Tickets page and resize your browser window to verify the navigation menu's responsive design.

    Verify the navigation menu's responsive design by resizing your browser window.

Great! Now Clarity's navigation menus are responsive.

Conclusion

Throughout these exercises, you've successfully applied responsive design principles to Clarity's master pages and navigation menus. By leveraging Liferay's page builder features and frontend client extensions, you've ensured a consistent and optimized user experience across multiple screen sizes.

Next, you'll review what you've learned before moving on to the next module.

Loading Knowledge