Skip to content

Instantly share code, notes, and snippets.

@vastus

vastus/SassMeister-input-HTML.html

Created January 30, 2015 23:15
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vastus/98605ec7f8606d29836e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vastus/98605ec7f8606d29836e to your computer and use it in GitHub Desktop.
Download ZIP
CSS Flex box
Raw
SassMeister-input-HTML.html
<div class="wrap">
<section class="col content">
<h2>Main section</h2>
</section>
<nav class="col nav">
<h2>Navigation</h2>
</nav>
<aside class="col sidebar">
<h2>Sidebar</h2>
</aside>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----
body {
font-family: helvetica;
}
.wrap {
display: flex;
// flex-direction: column;
}
.col {
padding: 5px 10px;
}
.content {
order: 2;
color: #ccc;
width: 60%;
background: #333;
}
.nav,
.sidebar {
flex: 1;
}
.nav {
order: 1;
background: #666;
}
.sidebar {
order: 3;
background: #999;
}
Raw
SassMeister-output.css
body {
font-family: helvetica;
}
.wrap {
display: flex;
}
.col {
padding: 5px 10px;
}
.content {
order: 2;
color: #ccc;
width: 60%;
background: #333;
}
.nav,
.sidebar {
flex: 1;
}
.nav {
order: 1;
background: #666;
}
.sidebar {
order: 3;
background: #999;
}
Raw
SassMeister-rendered.html
<div class="wrap">
<section class="col content">
<h2>Main section</h2>
</section>
<nav class="col nav">
<h2>Navigation</h2>
</nav>
<aside class="col sidebar">
<h2>Sidebar</h2>
</aside>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment