Permalink
Browse files

feat(layouts): multi column layouts

  • Loading branch information...
katrin-freihofner committed Jul 26, 2017
1 parent 2079dde commit 9fe43cc8b248210444489330a3fe9d0d181b0582
@@ -0,0 +1,63 @@
---
title: "Colums in islands"
layout: islands.hbs
theme: theme--purple
type: layout
---
<div class="layout is-flex has-islands">
<div class="island">
<div class="layout is-flex has-columns">
<div class="column--half">
<h2>50%</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--half">
<h2>50%</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
</div>
<div class="island">
<div class="layout is-flex has-columns">
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--2-of-3">
<h2>2-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
</div>
<div class="island">
<div class="layout is-flex has-columns">
<div class="column--2-of-3">
<h2>2-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
</div>
<div class="island">
<div class="layout is-flex has-columns">
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
</div>
</div>
@@ -0,0 +1,55 @@
---
title: "Colums"
layout: islands.hbs
theme: theme--purple
type: layout
---
<div class="layout is-flex has-islands">
<div class="layout is-flex has-columns">
<div class="column--half">
<h2>50%</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--half">
<h2>50%</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
<div class="layout is-flex has-columns">
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--2-of-3">
<h2>2-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
<div class="layout is-flex has-columns">
<div class="column--2-of-3">
<h2>2-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
<div class="layout is-flex has-columns">
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
<div class="column--1-of-3">
<h2>1-of-3</h2>
<p>Ipsum commodo esse aliqua exercitation anim cupidatat. Consectetur exercitation enim commodo deserunt sint enim do magna aute. Consequat id anim veniam est. Reprehenderit laborum aliquip in est aute eiusmod deserunt Lorem. Velit nostrud deserunt laboris ex dolore commodo est reprehenderit eiusmod excepteur nisi pariatur culpa nostrud. Eu et est ullamco deserunt commodo ipsum cillum est occaecat in deserunt ut in fugiat. Commodo elit proident fugiat minim duis ipsum officia deserunt minim nisi sunt consectetur incididunt eiusmod.</p>
</div>
</div>
</div>
@@ -0,0 +1,54 @@
---
title: "Sidebar and Content"
layout: islands.hbs
theme: theme--purple
type: layout
---
<div class="layout is-flex">
<nav class="sidebar hide-sm">
<a href="#" class="sidebar__item is-active">
<span class="sidebar__headline">General</span>
<span class="sidebar__info">See your Application setup</span>
</a>
<a href="#" class="sidebar__item">
<span class="sidebar__headline">User actions</span>
<span class="sidebar__info">See your application setup</span>
</a>
</nav>
<div class="island island--connected">
<h1>Sidebar and Content</h1>
<div class="island--connected has--nav">
<div class="main">
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
<p>Here comes more text</p>
</div>
<div class="nav--context">
<h2>Related links</h2>
<ul>
<li><a href="#noop"nav>Link</a></li>
<li><a href="#noop"nav>Link</a></li>
<li><a href="#noop"nav>Link</a></li>
<li><a href="#noop"nav>Link</a></li>
</ul>
</div>
</div>
</div>
</div>
View
@@ -0,0 +1,19 @@
@import "../common/variables";
.has-columns {
justify-content: space-between;
.column--half {
flex: 0 0 50%;
max-width: calc(50% - 24px);
}
.column--1-of-3 {
flex: 0 0 33.3%;
max-width: calc(33.3% - 24px);
}
.column--2-of-3 {
flex-basis: 66.6%;
max-width: calc(66.6% - 24px);
}
}
View
@@ -28,5 +28,29 @@
.layout.has-islands {
padding: 12px;
//background-color: $gray160; TODO: Review
}
.island--connected.has--nav {
display: flex;
flex-direction: column-reverse;
width: 100%;
max-width: 80pc;
}
@media(min-width: 768px) {
.island--connected.has--nav {
flex-direction: row;
}
}
.island--connected.has--nav .main {
width: 70%;
flex: 0 0 70%;
}
.island--connected.has--nav .nav--context {
width: 30%;
flex: 0 0 30%;
margin: 0;
}
View
@@ -8,6 +8,7 @@
@import "layout/forms";
@import "layout/fieldset";
@import "layout/field";
@import "layout/columns";
/** Components **/
@import "icons/icons";

0 comments on commit 9fe43cc

Please sign in to comment.