Skip to content

Instantly share code, notes, and snippets.

@gandhiShepard

gandhiShepard/SassMeister-input-HTML.html

Created November 23, 2014 12:14
Show Gist options
  • Save gandhiShepard/64ea3f4548ecee00cc28 to your computer and use it in GitHub Desktop.
Save gandhiShepard/64ea3f4548ecee00cc28 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="contain">
<div id="ponyo">
<h1>@include centerEl;</h1>
<p>With this SCSS mixin you'll be able to horizontally AND vertically center blocks of text dynamically, with ease</p>
</div>
</div>
<div class="contain">
<div id="billmurray">
<p>To use it, just <code>@include centerEl</code></p>
<p>You can set some properties through parameters too, like the <code>left</code> position, <code>width</code> and <code>text-align</code>.</p>
<p><small>Defaults: <code>$left: 50%, $width: 50%, $align: center</code></small></p>
</div>
</div>
<div class="contain">
<div id="jeffgolenski">
<p>But you don't have to horizontally align if you don't want to. Just include the mixin like this...</p>
<code>@include centerEl($left: 95%, $align: left);</code>
</div>
</div>
<div class="contain">
<div id="poppop">
<p>Or you can include the mixin like this...</p>
<code>@include centerEl($left: 5%, $width: auto, $align: left);</code>
</div>
</div>
<div class="contain">
<div id="cred">
<p>Forked and adapted from a <a href="http://jsfiddle.net/jeffgolenski/hchhT/13/" target="_blank">Fiddle</a> by <a href="https://twitter.com/jeffgolenski" target="_blank">@jeffgolenski</a></p>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----
$base: #94c6fd;
@function dynamicColor ($color) {
@if ( lightness($color) < 50% ) {
@return #eee;
} @else {
@return #111;
}
}
@mixin centerEl ( $left: 50%, $width: 50%, $align: center ) {
position: absolute;
top: 50%;
left: $left;
-ms-transform: translate($left * -1,-50%);
-webkit-transform: translate($left * -1,-50%);
transform: translate($left * -1,-50%);
width: $width;
> * {
display: block;
padding: 0 10px;
text-align: $align;
width: 100%;
}
}
body {
background: $base;
padding: 3em;
.contain {
background: white;
box-shadow: 0 2px 2px darken($base, 15%);
color: #111;
font-size: 1.3em;
height: 300px; max-width: 1000px; width: 100%;
margin: 0 auto;
text-shadow: 0 1px 2px rgba(black, 0.4);
position: relative;
+ .contain {
margin-top: 3em;
}
a {
color: dynamicColor($base);
}
}
}
#ponyo, #billmurray {
@include centerEl;
}
#jeffgolenski {
@include centerEl($left: 95%, $align: left);
}
#poppop {
@include centerEl($left: 5%, $width: auto, $align: left);
}
#cred {
@include centerEl($width: 80%)
}
Raw
SassMeister-output.css
body {
background: #94c6fd;
padding: 3em;
}
body .contain {
background: white;
box-shadow: 0 2px 2px #499efc;
color: #111;
font-size: 1.3em;
height: 300px;
max-width: 1000px;
width: 100%;
margin: 0 auto;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
position: relative;
}
body .contain + .contain {
margin-top: 3em;
}
body .contain a {
color: #111111;
}
#ponyo, #billmurray {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 50%;
}
#ponyo > *, #billmurray > * {
display: block;
padding: 0 10px;
text-align: center;
width: 100%;
}
#jeffgolenski {
position: absolute;
top: 50%;
left: 95%;
-ms-transform: translate(-95%, -50%);
-webkit-transform: translate(-95%, -50%);
transform: translate(-95%, -50%);
width: 50%;
}
#jeffgolenski > * {
display: block;
padding: 0 10px;
text-align: left;
width: 100%;
}
#poppop {
position: absolute;
top: 50%;
left: 5%;
-ms-transform: translate(-5%, -50%);
-webkit-transform: translate(-5%, -50%);
transform: translate(-5%, -50%);
width: auto;
}
#poppop > * {
display: block;
padding: 0 10px;
text-align: left;
width: 100%;
}
#cred {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 80%;
}
#cred > * {
display: block;
padding: 0 10px;
text-align: center;
width: 100%;
}
Raw
SassMeister-rendered.html
<div class="contain">
<div id="ponyo">
<h1>@include centerEl;</h1>
<p>With this SCSS mixin you'll be able to horizontally AND vertically center blocks of text dynamically, with ease</p>
</div>
</div>
<div class="contain">
<div id="billmurray">
<p>To use it, just <code>@include centerEl</code></p>
<p>You can set some properties through parameters too, like the <code>left</code> position, <code>width</code> and <code>text-align</code>.</p>
<p><small>Defaults: <code>$left: 50%, $width: 50%, $align: center</code></small></p>
</div>
</div>
<div class="contain">
<div id="jeffgolenski">
<p>But you don't have to horizontally align if you don't want to. Just include the mixin like this...</p>
<code>@include centerEl($left: 95%, $align: left);</code>
</div>
</div>
<div class="contain">
<div id="poppop">
<p>Or you can include the mixin like this...</p>
<code>@include centerEl($left: 5%, $width: auto, $align: left);</code>
</div>
</div>
<div class="contain">
<div id="cred">
<p>Forked and adapted from a <a href="http://jsfiddle.net/jeffgolenski/hchhT/13/" target="_blank">Fiddle</a> by <a href="https://twitter.com/jeffgolenski" target="_blank">@jeffgolenski</a></p>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment