Sessile: Lite;

Layouts that wrap

Give an element a class="wrap" to wrap its children elements across rows. To do this, the children elements will have to be given a base width by using the flex-basis property (make sure you duplicate this with a -webkit- prefix for poor Safari) – or you can simply use left and right padding or margin. If you do this, the .wrap items will render a fluid flow of content across multiple rows, without following any particular grid structure.

The last row, even if containing fewer elements than other rows, will fill the available width of the parent.

Hey, pretty easy, huh?

Top of the page, ma!

Layouts that wrap

These are columnar layouts that repeat across rows. They do not require the use of the wrap class (although they can be used together – see the last example on this page), but rather one or more classes defining the column structure. The classes will include a basic division of the parent width, sometimes a multiple of those divisions, and sometimes also a direction. Examples:

<article class="fourths"></article>
<article class="two fourths"></article>
<section class="two thirds right"></article>
<section class="six sevenths left"></article>

Browse through this section for more examples.

… et cetera, all the way up to:

… et cetera, all the way up to:

… et cetera, all the way up to:

… et cetera, all the way up to:

You may have noticed a lot of these have an additional class of header or footer. These classes ensure that the first and/or last elements within a layout have a width of 100%. These layouts work just fine without headers or footers too:

… et cetera.

To give elements a layout in both narrow and wide view, try using a combination of wrap and one of the defined wrapping layouts.

(Because of a conflict of class names, this may not work with row – or, at least, can cause some unexpected results.)

Top of the page, ma!

Layouts that wrap

One column layouts

Sometimes you want a single element to align itself left or right, with all elements after (or sometimes before) to align themselves on the opposite side. These are the only layouts that use float instead of flex, and are simple to accomplish in Sessile. Just give the parent element a class of .one, plus whatever division you would like. Examples:

<section class="one third left"></section>
<article class="one fifth right"></article>

Warning: the one class does not play nicely with the header class. Bad ducky!

.one.third.left,

• You’re the one.
• You make bathtime.
• Lots of fun.

More great classics and newer hits!

.one.third.right,

• You’re the one.
• You make bathtime.
• Lots of fun.

More great classics and newer hits!

.one.fourth.right,

• You’re the one.
• You make bathtime.
• Lots of fun.

More great classics and newer hits!

.one.ninth.right,

• You’re the one.
• You make bathtime.
• Lots of fun.

More great classics and newer hits!

Check these out in medium and wide views!

Check out this page in wide views!

This HTML document has a class group of one fourth left applied to the main element. Pull the window out to a wide view and take a look!

The wide layout code on this page:

<main class="one fourth left">
    <aside></aside>
    <div></div>
    ... <!-- multiple divs -->
    <footer></footer>
</main>

Warning: The one-column layouts will not work in the narrow view only in Internet Explorer (as of this writing). Also, images may scale strangely in the narrow view in IE. Sessile regretfully decided against drastically enlarging the code for the sake of just this one browser – so until it (the browser, not Sessile) decides to start playing nicely like the others (or until Sessile finds another solution), its users will receive a slightly reduced user experience. Sorry about that!

Top of the page, ma!

Layouts that don’t wrap

Give an element a class="row" to render its child elements horizontally within a single row.

With that single class, child elements will each take up the same width, no matter how many they are. That’s right – as many as you want! (But try not to break the browser, okay?)

Give the parent element padding-left and/or padding-right to add space on either side, or both.

If you have a limited number of layout items that you want to on the left or right side of a parent element, give it a class of start or end, respectively. You will have to give the items a width in your theme.

Top of the page, ma!

Layouts that don’t wrap

Defined row layouts

Certain defined layouts are possible used in conjunction with the row class. Because all items are within a single row, things are quite flexible: there’s no need to specify particular widths or divisions. Examples:

<ul class="row two left"></ul>

In this layout, no matter how many lis are contained, the first will have twice the width of the others: so, if there are three lis, the first will be 50% width (the other two being 25% each); if four lis, it will be 40% width (the other three being 20% each); and so on.

It is also possible to combine two numbers, e.g.:

<ul class="row one-three right"></ul>

In this layout, it is the second li from the right side that will be three times the width of the other items – again, no matter how many there are.

Limitations: The number combinations are limited to a maximum nine-column grid: the highest single number available is eight, while the largest two-number combination is four-five. Note that larger layouts are possible, however, either by simply adding more items, or through the interesting possibility of using both left and right directions at the same time:

<header class="row four-five left right"></header>

When using two-number combinations, the second number must be equal or greater than the first.

Top of the page, ma!

Navigation

In addition to the columnar and wrapped layouts described above, Sessile Lite offers a few navigation solutions – since navigation layout is also, well, layout.

Examples used in this page: top fixed nav, bottom fixed nav, universal nav, global nav.

<body class="fixed nav top bottom">
    <nav></nav><!-- this navigation stretches at top, position fixed in medium and large views -->
    <div class="universal global nav">
        ... <!-- header and main -->
        <nav></nav><!-- this navigation positioned above the page header -->
        <nav></nav><!-- this navigation positioned below the page header -->
    </div>
    <nav></nav><!-- this navigation stretches at bottom, position fixed all views -->
</body>

Text columns

Sessile Lite provides a simple way to divide text into columns (up to five). The classes are given below, including a way to exclude the first text element, usually a heading, from the columns.

Note: Sessile has removed the top margin from the first text element in each of these, so that the columns align properly at top.