Grid Layout system. v0

⚠️ This is a creation playground. Still in building process.

Objetives:

Take advantage of new grid layout features to apply it in our products.
Build an stable layout system, with nice fallback for unsupported browsers, to create the column layout and some reusable patterns.
Replace the Bootstrap cols system, instead of using both.
Document the process of learnings.

Pros

Simple to use
Custom system to our needs. Flexible
Easy reverse and ordering
Less code. Simple DOM and lighter CSS
Use of standard and modern code
Can be used with other layout systems. It's not exclusive.

Cons

Not supported in IE11. Need fallback
Have to learn something new
It's something we don´t need in fact. It's an improvement

Want to know more about grid layout? Here a complete guide

General usage

The columns are defined in the parent component.
The grid classes can be applied to the .container element.
Firefox dev tools work amazing for grid creation.

<div class="container grid-2">
    <div>...</div>
    <div>...</div>
</div>

Ordering is applied to the child item.

Container

.container

This is the same container we use currently in Neptune.

<div class="container">
...
</div>

...

.container-10

This gets the same result as tipical .col-md-10 .col-md-offset-1 from Bootstrap

Need a semantic name for this?

<div class="container-10">
...
</div>

This is some content

.container-10--md

If you need this layout only for desktop. Use this case.

This is some content

Example with Bootstrap grid: .col-md-10 .col-md-offset-1

The boostrap system has a horizontal margin: -12px in the row, that's why it is a bit wider.

This is some content

.container-8

This is some content

.container-8--md

This is some content

Example with Bootstrap grid: .col-md-8 .col-md-offset-2

This is some content

Responsive columns

Basic simple system

IE11 friendly

.grid-2

    <div class="grid-2">
        <div>...</div>
        <div>...</div>
    </div>

Item

.grid-2--sm

Item

.grid-2--md

Item

.grid-2--lg

Item

.grid-3

Item

.grid-3--sm

Item

.grid-3--md

Item

.grid-3--lg

Item

.grid-4

Item

.grid-4--sm

Item

.grid-4--md

Item

.grid-4--lg

Item

Combined: .grid-2 .grid-3--md .grid-4--lg

Item

Nesting grids

It's totally fine to nest grids

    <div class="grid-2 gap">
        <div>...
            <div class="grid-2">
                <div>...</div>
                <div>...</div>
            </div>
        </div>
        <div>...</div>
    </div>

Item

<div class="container-8 grid-2">
    <div>...
        <div class="grid-2--md gap">
            <div>...</div>
            <div>...</div>
        </div>
    </div>
    <div>...</div>
</div>

Item

Rows

The rows are autoplaced. You don´t have to do anything.

<div class="grid-3">
    <div>...</div>
    <div>...</div>
    <div>...</div>
    <div>...</div>
</div>

.grid-3

Item

Gap

The default --gap is --space-16 for mobile, --space-24 for desktop
The column --gap is 1/12. More or less as a Bootstrap col size.

<div class="grid-2 gap">
    <div>...</div>
    <div>...</div>
</div>

.gap

The default gap is for both columns and rows.

Item

.gap--32

Item

.gap--column

Gap only for columns. The space is 1/12

    :root {
        --gap: calc(100% / 12);
    }

Item

Reverse

The reverse mode is only horizontal (by now).

.reverse

<div class="grid-n reverse">
    <div>...</div>
    <div>...</div>
</div>

1 item 2 item

1 item 2 item 3 item

1 item 2 item 3 item 4 item

Ordering

The class must be added to the child item

.order-1--mobile

<div class="grid-4--md">
    <div>...</div>
    <div>...</div>
    <div class="order-1--mobile">...</div>
    <div>...</div>
</div>

1 item 2 item 3 item. I want to be first on mobile 4 item

Alignment

.align-items--start

This is some content

This is some content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor, lacus vel consequat viverra, tellus orci aliquet ante, sed lacinia orci orci in dui. Pellentesque pellentesque ultricies ex, ut faucibus orci finibus non. Phasellus blandit laoreet eros, eget mattis sem lacinia vitae. Nam dignissim viverra metus et tincidunt. Vestibulum eu nibh molestie, mattis nisl ut, scelerisque erat. Sed vitae est at quam vulputate congue sit amet a sapien. Ut eleifend cursus ex. In in nulla vitae ex viverra eleifend vitae et lectus. In aliquam, eros sit amet scelerisque laoreet, purus risus gravida ante, sit amet porttitor est nulla et nisi. Duis tempus magna enim, et condimentum ipsum iaculis vel. Cras eget consectetur sem. Pellentesque pretium enim a metus laoreet, sit amet interdum orci vestibulum. Aliquam ut dolor at leo consectetur scelerisque.{" "}

.align-items--center

This is some content

Common patterns

Do we have common layout patterns?

.grid-sidebar

<div class="grid-sidebar">
    <div>...</div>
    <div>...</div>
</div>

Grid Layout in current Neptune CSS

Need to review. Select the useful combinations

.d-grid .grid--1-1

Item

.d-grid .grid--1-1-1

Item

.d-grid .grid--1-1-1-1

Item

.d-grid .grid--1-1-1-1-1

Item

5 fractions

.d-grid .grid--4-1

Item

.d-grid .grid--3-2

Item

.d-grid .grid--2-3

Item

.d-grid .grid--1-4

Item

.d-grid .grid--1-3-1

Item

4 fractions

.d-grid .grid--3-1

Item

.d-grid .grid--1-3

Item

.d-grid .grid--1-2-1

Item

3 fractions

.d-grid .grid--2-1

Item

.d-grid .grid--1-2

Item

Bootstrap col system

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-6

.col-md-7

.col-md-8

.col-md-9

.col-md-10

.col-md-11

.col-md-12

.col-md-1

.col-md-8

.col-md-4

.col-md-6

.col-md-2

.col-md-5

Use of the offset

.col-md-1 .col-md-offset-11

.col-md-2 .col-md-offset-10

.col-md-3 .col-md-offset-9

.col-md-4 .col-md-offset-8

.col-md-5 .col-md-offset-7

.col-md-6 .col-md-offset-6

.col-md-7 .col-md-offset-5

.col-md-8 .col-md-offset-4

.col-md-9 .col-md-offset-3

.col-md-10 .col-md-offset-2

.col-md-11 .col-md-offset-1