Responsive layout using Flexbox and Tachyons

Question

I would like to create a layout like this:

I would like to use React and Flex.

To do that I'm using Tachyons and it's media queries that are:

ns = not small -> @media screen and (min-width: 30em) = [0, 30em]
m = medium -> @media screen and (min-width: 30em) and (max-width: 60em) = [30em, 60em]
l = large -> @media screen and (min-width: 60em) = [60em, ∞]

The layout must be responsive. Basically, the layout is composed by two columns (on desktop) or by two rows (on mobile/tablet). At the first time there are a single column/row (the grey one), when user click on it, the second column/row appears.

This is what I try.

As you can see, on desktop, it works well, I have two columns. On mobile/tablet it doesn't work:

Then, how can I change the layout onClick event?

function App() {
  return (
    <div
      className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column"
     >
      <div className="flex justify-center items-center bg-purple w-100 w-50-l h-100-l order-1"/>
      <div className="bg-orange flex flex-column justify-center w-100 w-50-l h-100-l order-2 pb4"/>
      </div> 
  )
}

const app = <App />;
const root = document.getElementById("react-root");
ReactDOM.render(app, root);

body, html {
    height: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react-root" className="h-100" style="height:100%"></div>

For mobiles, set your flex children to `height: 50%`. Here's a fork of your [codepen](https://codepen.io/anon/pen/mgaJvj) — Jake, Apr 25 '19 at 14:49

kukkuz · Answer 1 · 2019-04-25T16:33:09.617

Instead of using w-100 and w-50-l you can use flex-grow-1 on both the inner divs. And similar to what you have done with widths, you can do with order to set the order in both mobile and desktop - see simplified demo:

body,html { height: 100%;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100" style="height:100%">
  <div class="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
    <div class="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1"></div>
    <div class="bg-orange flex flex-column justify-center h-100-l order-2-l order-1 flex-grow-1 pb4-l"></div>
  </div>
</div>

Now for the react part - you can toggle between flex-grow-1 and flex-grow-0 of the red section on click of the other section - see demo below:

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {toggle: false};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({toggle: !state.toggle}));
  }
  render() {
    return (
      <div className="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
          <div className="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1" onClick={this.handleClick}></div>
          <div className={`bg-orange flex flex-column justify-center h-100-l order-2-l order-1 pb4-l ${this.state.toggle ? 'flex-grow-1' : 'flex-grow-0'}`}></div>
      </div>
    )
  }
}
ReactDOM.render(<App />, document.getElementById("react-root"));

html,body{height:100%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100"></div>

Responsive layout using Flexbox and Tachyons

1 Answers1