Grids

How our grid system works

Container

Containers are the starting point of using Orangeline layout. There are two options: .container which will max out at a comfortable width with margins on the side, and .container-fluid which will scale to the full width of the browser.

.container
1/2
1/2
.container-fluid
1/2
1/2

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

Basic Grids

The grid cells below do not specify any widths, they just naturally space themselves equally and expand to fit the entire row. They’re also equal height by default.

1/2
1/2
1/3
1/3
1/3
1/4
1/4
1/4
1/4

Full-height, even when my content doesn't fill the space. Use .grid-flex-item

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.


<div class="grid">
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
</div>
				

Grid Sizes

Used when a layout has a variable number of alike items that need to be presented in a grid. To get started using the grid, use a .grid-size-n wrapper.(n goes from 1-12), and add items to the grid with a .grid-cell

.grid-size-2
1/2
1/2
1/2
1/2
.grid-size-3
1/3
1/3
1/3
1/3
1/3
1/3
.grid-size-4
1/4
1/4
1/4
1/4
1/4
1/4
				
<div class="grid-size-2">
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
</div>

<div class="grid-size-3">
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
</div>

<div class="grid-size-4">
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
    <div class="grid-item">…</div>
</div>
				
			

Column Layout

A basic .grid-item will get spaced out equally with other .grid-items in a .grid. If you want different size relationships, you can specify their size based on a 12-column system. .column-n (n goes from 1-12).

2 column
.column-2
10 column
.column-10
3 column
.column-3
3 column
.column-3
6 column
.column-6
				
<div class="grid">
    <div class="column-2">...</div>
    <div class="column-10">...</div>
</div>
				
			

You can mix and match sized .column-ns with normal .grid-items. The normal grid items with occupy the remaining space amoungst themselves.

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

Responsive Column Layout

Don't want your columns to simply stack in smaller devices? Use the *-phone and *-tablet grid classes by adding them to your columns. See the example below for a better idea of how it all works.

6 column
.column-6 column-6-phone
6 column
.column-6 column-6-phone
.column-3 .column-4-tablet .column-6-phone
.column-3 .column-4-tablet .column-6-phone
.column-3 .column-4-tablet .column-6-phone
.column-3 .column-4-tablet .column-6-phone
                
<div class="grid">
    <div class="column-6 column-6-phone">
        <div class="grid-demo">6 column <br/><code>.column-6 column-6-phone</code></div>
    </div>
    <div class="column-6 column-6-phone">
        <div class="grid-demo">6 column <br/><code>.column-6 column-6-phone</code></div>
    </div>
</div>
<div class="grid">
    <div class="column-3 column-4-tablet column-6-phone">
        <div class="grid-demo"><code>.column-3 .column-4-tablet .column-6-phone</code></div>
    </div>
    <div class="column-3 column-4-tablet column-6-phone">
        <div class="grid-demo"><code>.column-3 .column-4-tablet .column-6-phone</code></div>
    </div>
    <div class="column-3 column-4-tablet column-6-phone">
        <div class="grid-demo"><code>.column-3 .column-4-tablet .column-6-phone</code></div>
    </div>
    <div class="column-3 column-4-tablet column-6-phone">
        <div class="grid-demo"><code>.column-3 .column-4-tablet .column-6-phone</code></div>
    </div>
</div>
                
            

You can mix and match sized .column-ns with normal .grid-items. The normal grid items with occupy the remaining space amoungst themselves.

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

Grid Alignment

Align contents of .grid-items.

.grid-top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vulputate est, vestibulum convallis ante. Nulla luctus lectus in placerat blandit. Curabitur a lacus ultricies, suscipit enim eget, maximus sapien. Nunc mollis sem pretium dictum rutrum. In lectus quam, placerat vel dui eget, cursus ultricies odio.

Ut dignissim est vel posuere molestie. Donec dictum, neque a feugiat ultricies, mi urna ullamcorper nulla, et hendrerit arcu nisl sit amet eros.

.grid-center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vulputate est, vestibulum convallis ante. Nulla luctus lectus in placerat blandit. Curabitur a lacus ultricies, suscipit enim eget, maximus sapien. Nunc mollis sem pretium dictum rutrum. In lectus quam, placerat vel dui eget, cursus ultricies odio.

Ut dignissim est vel posuere molestie. Donec dictum, neque a feugiat ultricies, mi urna ullamcorper nulla, et hendrerit arcu nisl sit amet eros.

.grid-bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non vulputate est, vestibulum convallis ante. Nulla luctus lectus in placerat blandit. Curabitur a lacus ultricies, suscipit enim eget, maximus sapien. Nunc mollis sem pretium dictum rutrum. In lectus quam, placerat vel dui eget, cursus ultricies odio.

Ut dignissim est vel posuere molestie. Donec dictum, neque a feugiat ultricies, mi urna ullamcorper nulla, et hendrerit arcu nisl sit amet eros.

				
<div class="grid-size-2 grid-top">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>

<div class="grid-size-2 grid-center">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>

<div class="grid-size-2 grid-bottom">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>
				
			

Gutters

Spacing between .grid-items.

Small Gutters

Use .grid-small-gutters to have half the usual spacing between .grid-items.

1/2
1/2
1/2
1/2
1/2
1/2
				
<div class="grid grid-small-gutters">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>
				
			

No Gutters

Use .grid-no-gutters to have no spacing between .grid-items.

1/2
1/2
1/2
1/2
1/2
1/2
				
<div class="grid grid-no-gutters">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>
				
			

No Row Gutters

Use .grid-no-row-gutters to have no row spacing between .grid-items.

1/2
1/2
1/2
1/2
1/2
1/2
				
<div class="grid grid-no-row-gutters">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>
				
			

No Column Gutters

Use .grid-no-column-gutters to have no column spacing between .grid-items.

1/2
1/2
1/2
1/2
1/2
1/2
				
<div class="grid grid-no-column-gutters">
    <div class="grid-item">...</div>
    <div class="grid-item">...</div>
</div>
				
			

Breakout

Ability for some content to breakout of the grid for emphasis. Add .breakout to make the element break outside the grid.

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

Meekan
Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

Breakout works on blockquotes too! Just add the class to blockquote to make it "breakout"!

Zach Wise

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

Matty Mariansky, co-founder and product designer at Meekan, a Slack bot that schedules meetings across teams, describes the ideal bot as being a search engine that gives you one result.

                
<figure class="breakout">
    <img src="https://knightlab.northwestern.edu/wp-content/uploads/2016/05/Screen-Shot-2016-05-14-at-4.28.12-PM-850x539.png">
    <figcaption class="credit"><a href="https://meekan.com">Meekan</a></figcaption>
    <figcaption>
        Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.
    </figcaption>
</figure>

<blockquote class="breakout">
    <p>
        Breakout works on blockquotes too! Just add the class to blockquote to make it "breakout"!
    </p>
    <cite>Zach Wise</cite>
</blockquote>
                
            

Pull Left and Pull Right

Available in .pull--right for floating right and .pull--left for floating left.

Meekan
Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

Meekan
Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

Matty Mariansky, co-founder and product designer at Meekan, a Slack bot that schedules meetings across teams, describes the ideal bot as being a search engine that gives you one result.

                
<figure class="pull--right">
    <img src="http://i2.wp.com/knightlab.northwestern.edu/wp-content/uploads/2016/05/Screen-Shot-2016-05-14-at-4.28.12-PM.png?resize=768%2C487">
    <figcaption class="credit"><a href="https://meekan.com">Meekan</a></figcaption>
    <figcaption>
        Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.
    </figcaption>
</figure>

<figure class="pull--left">
    <img src="http://i2.wp.com/knightlab.northwestern.edu/wp-content/uploads/2016/05/Screen-Shot-2016-05-14-at-4.28.12-PM.png?resize=768%2C487">
    <figcaption class="credit"><a href="https://meekan.com">Meekan</a></figcaption>
    <figcaption>
        Meekan, a meeting scheduling robot, syncs calendars across teams to find the best meeting times for everyone.
    </figcaption>
</figure>