Building layout

Approach and resources for building layout in Mybring

Content should be the first factor in defining the size of an element, followed by readability and the relation and alignment with related content. An interface built upon content size is more flexible and requires less code than one intended to fill different formats. It means the elements retain an important communicative aspect, their size; uniformity might look orderly, but it’s a superficiality that can make it unnecessarily difficult to discern one thing from another.

Declarative and intrinsic

Declarative means writing code that makes the browser 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 explicit micromanagement of details using predefined formats, element sizes and screen sizes.

Instead of using grids, breakpoint sets and templates in Mybring, we use Flexbox utilities for simple layouts and write custom CSS for more complex ones.

Examples

Resize your viewport to see how the example buttons behave differently.

Do: Intrinsic

Don’t: Extrinsic

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 elements 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. This approach to breakpoints means the media queries are often written nested inside the relevant class instead of as a separate set of CSS.

• 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.

Basic 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 gcs maxw48r">
  <label class="form__label maxw8r"
    >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 gas maxw48r">
  <div class="flex-auto maxw20r 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="flex-auto maxw20r 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="flex-1 maxw20r bg-gray2 pam 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 rad-a2px">Contentbox.</div>
</div>

Flexing with custom CSS

Write custom flex CSS to create powerful responsive layouts. Utilities can only take you to a certain level, and they can be harder to read than a single class.

.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">
      Details. Content that wraps over multiple lines and is constrained
      by the box.
    </div>
  </div>
  <div class="summary">
    <div class="bg-gray2 pam rad-a2px">Summary.</div>
  </div>
</div>