Building layout

Approach and resources for building layout in Mybring

An interface built upon content size is more flexible and requires less code than one intended to fill a set of arbitrary screen sizes. Content should be the first factor in defining the size of an element, then readability and then the relation and alignment with related content.

Declarative and intrinsic

Declarative means we use techniques that leverage the browser to figure out the details of a layout. One example is responsiveness, where we usually define some outer limits and let the browser calculate the in-between sizing and wrapping without specifying arbitrary screen sizes.

Intrinsic means we let the content and elements take up the space they need. We only adjust them when that size is too small or too big to be useful or when we need to control a complex layout situation.

The opposite approach is imperative and extrinsic, which is detail controlling using predefined formats, element sizes and screen sizes. Instead of predefined grids, breakpoints and templates, we use flexbox utilities for simple layouts and write custom CSS for more complex ones.

Responsive examples

Resize your viewport to see how these buttons behave differently.

Media queries and screen sizes

The intrinsic approach rarely uses media queries for responsiveness. The extrinsic approach has to decide at what viewport sizes the elements should change, then re-program each element accordingly. The sizes might be a compromise for the entire layout because they are based on external factors such as common devices and screens – which hasn’t existed for many years.

Zero media queries isn’t a goal in itself, but their use is more recommended for making minor adjustments where the content requires it. Breakpoints are set per application based on content.

• Set breakpoints in em – this respects the users’ font-size. Example: 62.5em converts to 1000px for users with default font size 16px.
• min-width means equal to and above value.
• max-width means equal to and below value.

Resources

• For page layouts, start laying out all content in one column. This makes it easier to keep an overview of the logic and flow as we iterate.
• Then, find out if we can make better use of screen real estate by laying certain elements out horizontally without losing context or disrupting the flow.
• Check out widths when you need to limit or set sizes.
• Read about flexbox.
• Read about grid.
• Read about relative length units.

Examples

Fixed max-width, side by side

Placing elements on a row and making them wrap. Wrapping max-width content in a flex container is the simplest way to achieve responsiveness.

<div class="flex flex-wrap maxw48r">
  <label class="form__label maxw8r mrm"
    >Postal code
    <input type="text" class="form__control" />
  </label>
  <label class="form__label maxw16r"
    >Address
    <input type="text" class="form__control" />
  </label>
</div>

Flexing with utility CSS

Applying flex-1 or flex-auto creates some basic flexing.

<div class="flex flex-wrap maxw48r">
  <div class="flex-auto maxw20r bg-gray2 pam maxs rad-a2px">
    <label class="form__label w100p"
      >Name
      <input type="text" class="form__control" />
    </label>
    <label class="form__label w100p"
      >Address
      <input type="text" class="form__control" />
    </label>
  </div>
  <div class="flex-auto maxw20r bg-gray2 pam maxs rad-a2px">
    <label class="form__label w100p"
      >Name
      <input type="text" class="form__control" />
    </label>
    <label class="form__label w100p"
      >Address
      <input type="text" class="form__control" />
    </label>
  </div>
  <div class="flex-1 maxw20r bg-gray2 pam maxs rad-a2px">
    Contentbox with content that wraps over multiple lines and is constrained by
    the box.
  </div>
  <div class="flex-1 maxw20r bg-gray2 pam maxs rad-a2px">Contentbox.</div>
</div>

Flexing with custom CSS

Write custom flex CSS to create powerful responsive layouts.

.address {
  flex: 1 1 20rem;
}

.details {
  flex: 1 1 16rem;
}

.summary {
  flex: 1 1 12rem;
}

<div class="flex flex-wrap maxw48r">
  <div class="address maxw24r mrs mbs bg-gray2 pam rad-a2px">
    <label class="form__label w100p"
      >Name
      <input type="text" class="form__control" />
    </label>
    <label class="form__label w100p"
      >Address
      <input type="text" class="form__control" />
    </label>
  </div>
  <div class="details maxw24r mrs mbs bg-gray2 pam rad-a2px">
    Contentbox with content that wraps over multiple lines and is constrained by
    the box.
  </div>
  <div class="summary bg-gray2 mrs mbs pam rad-a2px">Contentbox.</div>
</div>

Flexing with custom CSS and gaps

This is similar to the previous example, except it flexes using a custom flex declaration.

.address {
  flex: 1 1 20rem;
}

.details {
  flex: 1 1 16rem;
}

.summary {
  flex: 1 1 12rem;
}

<div class="flex flex-wrap maxw48r gas mbs">
  <div class="address maxw24r">
    <div class="bg-gray2 pam rad-a2px">
      <label class="form__label w100p"
        >Name
        <input type="text" class="form__control" />
      </label>
      <label class="form__label w100p"
        >Address
        <input type="text" class="form__control" />
      </label>
    </div>
  </div>
  <div class="address maxw24r">
    <div class="bg-gray2 pam rad-a2px">
      <label class="form__label w100p"
        >Name
        <input type="text" class="form__control" />
      </label>
      <label class="form__label w100p"
        >Address
        <input type="text" class="form__control" />
      </label>
    </div>
  </div>
  <div class="details">
    <div class="bg-gray2 pam rad-a2px">
      Contentbox with content that wraps over multiple lines and is constrained
      by the box.
    </div>
  </div>
  <div class="summary">
    <div class="bg-gray2 pam rad-a2px">Contentbox.</div>
  </div>
</div>