README.md

Scally Layout

Contents

• What are they?
• Demos
• Why have them?
• How to use
  • Container
  • Grid
    • Responsive grid
  • Side-by-side
  • Combined
  • Do not mix other styles
• Namespacing
• Further reading

What are they?

Think of layout as Lego®; the bits and pieces you need to construct a UI.

Scally features four powerful layout modules:

1. Container: is designed to wrap all major UI layout pieces and ensure the UI maintains a consistent width. Container is responsive in that it's a fluid width controlled by percentages until it reaches a maximum width, at which point it becomes center aligned.
2. Grid: is a powerful, fluid, nestable, mobile first grid system that allows you to set custom column widths at different viewports, making responsive layouts a cinch.
3. Side-by-side: is a simple yet very powerful layout module that places any two elements side-by-side, typically for an image—and text-like content. There is also an alternative version that allows control over vertical alignment.
4. Columns: lets you create columns out of one element using CSS3 Columns.

From global page templates to component level layouts, the above layout modules should take care of most—if not all—the main layout patterns you'll find in a UI.

Layout modules follow the single responsibility principle and the open/closed principle.

Demos

http://codepen.io/chris-pearce/full/jEXNWX/ (work in progress)

Why have them?

See the Why have them? section in the Objects README.

Layout modules are extremely powerful and are the real work horses of any sort of UI build especially large-scale UI builds.

How to use

When you identify any type of layout in a UI then a layout module is what you need.

If we look at the home page of this website at both mobile and desktop views:

We can identify many instances where layout modules can and should be used. Let's take the top portion of the home page at its desktop view:

Container

You would use the container here:

The black boxes represent the default container. The red boxes represent modifiers of the default container which will allow the container to be full bleed, in this case it means the container will expand to the edges of the main viewport.

The HTML

<div class="l-container l-container--full-bleed">
  <div class="l-container">
    [...]
  </div>
</div>

The CSS

Grid

And here is an example of where you would use the grid:

The light and dark grey boxes represent individual grid cells (l-grid__item) which sit inside an inner container (the black box).

The HTML incl. the containers

<!-- Header -->
<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <div class="l-grid">
      <div class="l-grid__item  u-one-half-from-lap">
        [...]
      </div>
      <div class="l-grid__item  u-one-half-from-lap">
        [...]
      </div>
    </div>
  </div>
</div>
<!-- //Header -->

<!-- Nav main -->
<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <div class="l-grid">
      <div class="l-grid__item  u-one-quarter">
        [...]
      </div>
      <div class="l-grid__item  u-one-quarter">
        [...]
      </div>
      <div class="l-grid__item  u-one-quarter">
        [...]
      </div>
      <div class="l-grid__item  u-one-quarter">
        [...]
      </div>
    </div>
  </div>
</div>
<!-- //Nav main -->

<!-- Services -->
<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <ul class="l-grid">
      <li class="l-grid__item  u-one-third u-one-fifth-from-lap">
        [...]
      </li>
      <li class="l-grid__item  u-one-third u-one-fifth-from-lap">
        [...]
      </li>
      <li class="l-grid__item  u-one-third u-one-fifth-from-lap">
        [...]
      </li>
      <li class="l-grid__item  u-one-third u-one-fifth-from-lap">
        [...]
      </li>
      <li class="l-grid__item  u-one-third u-one-fifth-from-lap">
        [...]
      </li>
      [...]
    </ul>
  </div>
</div>
<!-- //Services -->

The CSS

Responsive grid

The grid comes with the ability to apply widths to the grid cells at different viewports making it easy to construct responsive UI's. This ability isn't tied into the grid itself but uses the Percentage widths utilities.

By default grid cells will stack on top of each other unless told otherwise i.e. they're completely linear. At small viewport widths e.g. handheld devices typically this is what you want, however as the viewport increases in width you can then apply widths to the grid cells turning them to columns.

So if we had a grid cell like this:

<div class="l-grid__item  u-one-half-from-lap u-one-third-from-desk">

This would give you a grid item which is 100% wide unless it is on a lap device, at which point it becomes 50% wide, or it is on a desktop device, at which point it becomes 33.333% wide.

Side-by-side

And here is an example of where you would use the side-by-side layout module:

The grey boxes represent each side-by-side layout module.

The HTML

<div class="l-side-by-side">
  <div class="l-side-by-side__left">
    [...]
  </div>
  <div class="l-side-by-side__right">
    [...]
  </div>
</div>

<div class="l-side-by-side">
  <div class="l-side-by-side__left">
    [...]
  </div>
  <div class="l-side-by-side__right">
    [...]
  </div>
</div>

<div class="l-side-by-side">
  <div class="l-side-by-side__left">
    [...]
  </div>
  <div class="l-side-by-side__right">
    [...]
  </div>
</div>

The CSS

• Default
• Alternative

You might be wondering why don't we just use the grid for this? You certainly can use the grid however you will need to specify widths for each grid cell and those widths might need changing based on the viewport size, see here. The side-by-side layout module cells do not require widths, instead the left and right cells will shrink wrap its content making it more easier to implement this type of layout than the grid.

The side-by-side layout module is responsive friendly just like the grid. The left and right parts will stack on top of each other up until a certain breakpoint where they'll then become–well side-by-side. This behavior is configurable by these two settings:

$l-side-by-side-apply-linear:       [true/false];
$l-side-by-side-apply-linear-when:  [a breakpoint];

The default values for these settings are:

$l-side-by-side-apply-linear:       true !default;
$l-side-by-side-apply-linear-when:  palm !default;

Combined

Layout modules work perfectly well with each other meaning they can be nested within each other e.g. the side-by-side layout module can be nested within the grid layout module which itself can be nested within the container layout module. When layout modules are combined like this they're extremely powerful taking care of most—if not all—of your UI layout needs.

So if we take this piece of UI again:

We can combine three of our layout modules and their modifiers to achieve this layout:

In order of stacking (bottom to top):

• Red = Container (modifier: full-bleed)
• Yellow = Container
• Black = Grid
• Blue = Side-by-side

The HTML

<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <div class="l-grid">
      <div class="l-grid__item  u-one-quarter">
        [...]
      </div>
      <div class="l-grid__item  u-one-quarter">
        <div class="l-side-by-side l-side-by-side--flush">
          <div class="l-side-by-side__left">
            [...]
          </div>
          <div class="l-side-by-side__right">
            [...]
          </div>
        </div>
      </div>
      <div class="l-grid__item  u-one-quarter">
        <div class="l-side-by-side l-side-by-side--flush">
          <div class="l-side-by-side__left">
            [...]
          </div>
          <div class="l-side-by-side__right">
            [...]
          </div>
        </div>
      </div>
      <div class="l-grid__item  u-one-quarter">
        <div class="l-side-by-side l-side-by-side--flush">
          <div class="l-side-by-side__left">
            [...]
          </div>
          <div class="l-side-by-side__right">
            [...]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Do not mix other styles

You should never mix in any other styles with any of the layout modules. This ties in with the single responsibility principle and the open/close principle which is used for utilities and objects.

So if we look at the HTML for the header demo'd above for this piece of UI:

<!-- Header -->
<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <div class="l-grid">
      <div class="l-grid__item  u-one-half-from-lap">
        [...]
      </div>
      <div class="l-grid__item  u-one-half-from-lap">
        [...]
      </div>
    </div>
  </div>
</div>
<!-- //Header -->

And we need to add padding to all sides of the left grid cell and add the sub nav component to the right grid cell we would mark it up like this:

<!-- Header -->
<div class="l-container l-container--full-bleed">
  <div class="l-container">
    <div class="l-grid">
      <div class="l-grid__item  u-one-half-from-lap">
        <div class="u-s-p-base">
          [...]
        </div>
      </div>
      <div class="l-grid__item  u-one-half-from-lap">
        <ul class="o-list-inline o-list-inline--spacing-base">
          [...]
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- //Header -->

Namespacing

All layout classes, settings, and filenames are prefixed with l- so that they're easily identifiable e.g.

• .l-grid
• $l-grid-apply-at-breakpoints
• _l-grid.scss

Further reading

Make sure to read the documentation within each layout Sass partial file as it will contain information about the specific layout module and it's implementations.

• More Transparent UI Code with Namespaces -> Object Namespaces
• CSS guidelines - The separation of concerns
• The single responsibility principle applied to CSS
• The open/closed principle applied to CSS