Skip to content

Instantly share code, notes, and snippets.

@cvializ

cvializ/Extending Modular CSS with Susy.html

Last active August 29, 2015 14:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cvializ/f5faf75bceaa8a3efedf to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cvializ/f5faf75bceaa8a3efedf to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
Extending Modular CSS with Susy.html
<main>
<h1>Leaf components inside a container component:</h1>
<section class="containerComponent">
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
<h1>Leaf components outside a container component:</h1>
<section class="not-a-container">
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
</main>
Raw
index.html
<html>
<head>
<link href="./SassMeister-output.css" rel="stylesheet" type="text/css">
</head>
<body>
<main>
<h1>Leaf components inside a container component:</h1>
<section class="containerComponent">
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
<h1>Leaf components outside a container component:</h1>
<section class="not-a-container">
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
</main>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Susy (v2.1.3)
// ----
/* === Begin configuration === */
@import "susy";
@import "breakpoint";
@mixin clearfix {
&:after {
content: "";
display: table;
clear: both;
}
}
@include border-box-sizing;
html { background: white; }
/* === End configuration === */
/* ui-responsive/sass/_layout.scss */
$susy: (
container: 768px,
columns: 24,
math: fluid,
gutters: 1/3,
debug: (image: show, output: overlay)
);
/* your-app/css/_layout.scss */
main {
@include container;
}
/* leaf/css/_layout.scss */
.leaf {
input,
label {
@include full;
}
}
/* container/css/_layout.scss */
.containerComponent {
@include clearfix;
}
.containerComponent-leaf {
&.leaf {
@include pre(6);
@include post(6);
@include nested(12) {
label,
input {
@include span(6);
@include nobreak; // to undo the break set by @include full
&:last-child {
@include last;
}
}
}
}
}
Raw
SassMeister-output.css
/* === Begin configuration === */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
html {
background: white;
}
/* === End configuration === */
/* ui-responsive/sass/_layout.scss */
/* your-app/css/_layout.scss */
main {
max-width: 768px;
margin-left: auto;
margin-right: auto;
}
main:after {
content: " ";
display: block;
clear: both;
}
head {
display: block;
position: fixed;
right: 10px;
top: 10px;
z-index: 999;
color: #333;
background: rgba(255, 255, 255, 0.25);
}
head:before {
content: "|||";
display: block;
padding: 5px 10px;
font-family: sans-serif;
font-size: 16px;
font-weight: bold;
}
head:hover {
background: rgba(255, 255, 255, 0.5);
color: red;
}
head:hover ~ main, head:hover ~ body main {
position: relative;
}
head:hover ~ main:before, head:hover ~ body main:before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
content: " ";
z-index: 998;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 75%, transparent 75%);
background-size: 4.21053%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
/* leaf/css/_layout.scss */
.leaf input,
.leaf label {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
/* container/css/_layout.scss */
.containerComponent:after {
content: "";
display: table;
clear: both;
}
.containerComponent-leaf.leaf {
margin-left: 25.26316%;
margin-right: 25.26316%;
}
.containerComponent-leaf.leaf label,
.containerComponent-leaf.leaf input {
width: 48.93617%;
float: left;
margin-right: 2.12766%;
clear: none;
}
.containerComponent-leaf.leaf label:last-child,
.containerComponent-leaf.leaf input:last-child {
float: right;
margin-right: 0;
}
Raw
SassMeister-rendered.html
<main>
<h1>Leaf components inside a container component:</h1>
<section class="containerComponent">
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf containerComponent-leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
<h1>Leaf components outside a container component:</h1>
<section class="not-a-container">
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
<div class="leaf">
<label>Hello</label>
<input value="world" />
</div>
</section>
</main>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment