Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I define grid template area for portrait mode? [Help Required]

See original GitHub issue

I want to define a template-area for a component for portrait mode. Creating an issue as I dont know where to ask for help. I can’t understand how to define the template area for this kind of breakpoint from the documentation. I tried both areasPortrait and areasOrientationPortrait Is it possible this way of do I have to manage it programmatically? eg:

const areas = `
media text

const areasPortrait=`

<Composition areas={areas} areasPortrait={areasPortrait} areasOrientationPortrait={areasPortrait}>
  {({ Media, Text }) => (
      <Media />
      <Text />

Issue Analytics

  • State:open
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

kettanaitocommented, Oct 29, 2019

Having though about this problem, I’m yet not sure what would be the expected behavior.

To illustrate, let’s replace areas with areasLg.

<Composition areasLg="left" />

In isolation that means “render the left area only on large devices and up”. So it won’t get rendered on xs, sm, and md screen sizes. Now let’s add areasPortrait to the mix:

<Composition areasLg="left" areasPortrait="left right" />

areasPortrait imply that left and right areas will get rendered only on portrait orientation of the device. Which, in most cases, would be a smaller screen size than lg breakpoint describes. This makes two responsive props declaring contradictory behavior toward the same area.

Current solution

@noushad-pp since this behavior needs to be carefully designed, and I don’t wish to block your development, I can suggest another way to tackle portrait orientation. Instead of declaring the areasPortrait prop, use the useResponsiveValue hook:

import { useResponsiveValue, Composition } from 'atomic-layout'

const MyComponent = () => {
  const shouldRenderWidget = useResponsiveValue({
    portrait: true // whenever your custom "portrait" breakpoint is met, return the value (true)
  }, false)

  return (
    <Composition areas="left right">
      {Areas => (
          <Areas.Left>I should render always</Areas.Left>
          <Areas.Right>I should render always</Areas.Right>
          {shouldRenderWidget && <div>Visible on portrait orientation</div>}

That means to leave out the portrait from the areas declaration and treat it as an extra scenario during rendering. I understand this is not ideal, as you may not be able to target the conditional widget with CSS Grid properties in its fullest extent.

Also, please, feel free to voice what your expectations would be, so we could shape the behavior together. Thanks!

kettanaitocommented, Oct 26, 2019

Hi, @noushad-pp. That’s the right place to ask.

By default, responsive props in Atomic Layout use Bootstrap 4 breakpoints (xs, sm, md, lg, xl). As you may already know, those are described using media queries targeting a device’s width. This means that by default there is no behavior to target a device’s orientation.

Basically, out of the box the library can handle abc, abcSm, abcMd, abcLg and abcXl responsive props suffixes in accordance to Bootstrap breakpoints. What happens when you write abcPortrait is that the library doesn’t know what is Portrait and what breakpoint it represents. You need to explicitly describe the Portrait breakpoint.

In order to assign responsive props based on device’s orientation, you would have to create such breakpoint manually using Layout.configure() and its breakpoints property:

// src/index.js
import Layout, { defaultOptions } from 'atomic-layout'

// Make sure to call this once, ideally on the root level of your app.
// This can be called before "ReactDOM.render()", for example.
  breakpoints: {
    // Include the default breakpoints to still apply

    // A custom breakpoint name.
    // Naming it "portrait" to be intuitive, but can be about any string.
    portrait: {
      // Media query definition. In our case just device's orientation.
      orientation: 'portrait'

See the running Codesandbox example.

By doing so, you create your custom responsive props suffix called portrait. Calling Layout.configure() makes all Atomic Layout’s components aware of your suffix automatically.

Whenever you suffix a prop name with that suffix a prop value will be applied only when the media query is met (in our case when orientation is portrait):

// src/MyComponent.jsx
import React from 'react'
import { Composition } from 'atomic-layout'

const MyComponent = () => (
  <Composition areas="left right" areasPortrait="left center right">
    {(Areas) => (
        <Areas.Left>I am rendered always.</Areas.Left>
        <Areas.Center>I should be rendered only on portrait orientation.</Areas.Center>
        <Areas.Right>I am rendered always as well.</Areas.Right>

I hope this explanation helps. Let me know if you still have any questions.

Please update to atomic-layout@0.9.9 to be able to import defaultOptions from the package. This would dramatically simplify the declaration of custom breakpoints. Thanks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Grid template areas - CSS: Cascading Style Sheets | MDN
We can also define an area by giving it a name and then specify the location of that area in the value of...
Read more >
How To Use a CSS Grid Template Area & Why It Can Save ...
With a CSS grid template area, you set the width in a single command and then the placements of the grid cells —...
Read more >
Take Portrait mode photos with your iPhone camera
Open Camera, then select Portrait mode. Follow the tips onscreen to frame your subject in the yellow portrait box. Drag the Portrait Lighting...
Read more >
CSS Grid Layout Module Level 2 - W3C
This CSS module defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children ...
Read more >
How to build CSS grid layouts in 2021 — Web design tutorial
CSS grid is quickly becoming a web design standard, and has been adopted by Apple for grid -based layouts and galleries, by Slack...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found