CODEWITHSUNDEEP
htmllayoutfluid-layout
xakepp35
xakepp35

Reputation: 3262

How to create fluid layout in modern HTML

I am quite a new to (or way too old for) a modern HTML, and i had to develop simple UI. I need to support 2 types of screen in it:

enter image description here

As may be seen above, my UI should consist of a menu, and content (for instance, a text with a picture aside or above). If displayed on a mobile in simple words it should be "rotated" 90 degrees CCW.

In my times layouts were done via <table><tr><td>.. or <frameset>..-like stuff. But one scheme is <td>item1</td><td>item2</td> and the other is <tr>item1</tr><tr>item2</tr>. In a static .htm text file i can write only one variant. A way known to me is to make heavy use of javascript and generate a document via document.write(), but i dont quite like that idea, i believe something simplier should exist..

What is simpliest variant to do this in HTML manually, without using heavy and hard-to-learn frameworks?

Upvotes: 3

Views: 411

Answers (1)

user3589620
user3589620

Reputation:

A basic structure with flexbox could be

(without any styling and dimension)

figure {
  margin: 0;
}

.list-unstyled {
  list-style: none;
  padding: 0;
  margin: 0;
}

.d-flex {
  display: flex;
}

@media screen and (max-width: 767.99px) {
  .sm-fd-column {
    flex-direction: column;
  }
}

@media screen and (min-width: 768px) {
  .lg-fd-column {
    flex-direction: column;
  }
  /* ... */
  .lg-order-2 {
    order: 2;
  }
  /* ... */
}
<div class="d-flex lg-fd-column">
  <div>
    <ul class="list-unstyled d-flex sm-fd-column">
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
      <li><input type="checkbox"></li>
    </ul>
  </div>
  <div class="d-flex sm-fd-column">
    <figure class="lg-order-2"><img src="http://via.placeholder.com/200x150" alt=""></figure>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus saepe nobis impedit excepturi, perspiciatis! Eaque in quam corporis, modi, eos assumenda error totam autem cumque dolores magni deleniti! Doloribus, unde.
    </p>
  </div>
</div>

It provides two different sizes: small (sm) and large (lg).

More information about flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Upvotes: 1

Related Questions