Skip to content

Instantly share code, notes, and snippets.

@starryeyez024

starryeyez024/SassMeister-input-HTML.html

Created November 18, 2014 20:22
Show Gist options
  • Save starryeyez024/845711259bef8c60e282 to your computer and use it in GitHub Desktop.
Save starryeyez024/845711259bef8c60e282 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="panel-display chevelle clearfix ">
<div class="panel-col-top panel-panel clearfix">
<div class="panel-region-top">
<h2>'top'</h2>
</div>
<div class="panel-region-teasers">
<div class="panel-region-teasers-inner">
<h2>'teasers'</h2>
</div>
</div>
</div>
<div class="content indent">
<div class="panel-panel panel-col-middle">
<div class="inside">
<div class="hero-wrapper clearfix">
<div class="panel-region-hero">
<h2>'hero'</h2>
</div>
</div><!-- hero wrapper-->
<div class="content-wrapper clearfix">
<div class="panel-region-prefix">
<h2>'prefix'</h2>
</div>
<div class="panel-region-title">
<h2>'title'</h2>
</div>
<div class="panel-region-author">
<h2>'author'</h2>
</div>
<div class="panel-region-sidebar">
<h2>'sidebar'</h2>
</div>
<div class="panel-region-content">
<h2>'content'</h2>
</div>
<div class="panel-region-social-media">
<h2>'social'</h2>
</div>
</div><!-- end content wrapper-->
</div><!-- end inside -->
</div><!-- end panel-panel-->
</div><!-- end indent-->
<div class="panel-col-bottom panel-panel clearfix">
<div class="bottom-inner panel-panel-inner">
<h2>'bottom'</h2>
</div>
</div>
</div>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.4.0)
// ----
@import "breakpoint"
@import "singularitygs"
@import "singularity-extras/outputs"
@include add-grid(55px 1 1 1 1 1 1 1 312px)
@include add-gutter(1em)
@include add-gutter-style('split')
@include sgs-change('output', 'calc')
div[class*="panel-region"]
background: #bada55
margin-bottom: 10px
h2
font-size: 14px
html
.hero-wrapper,
.content-wrapper,
.panel-col-bottom
position: relative
width: 100%
+breakpoint(960px)
.panel-panel
.panel-region-top,
.panel-region-content-bottom
+grid-span(9, 1)
clear: left
.panel-region-teasers
+grid-span(9, 1)
clear: both
.panel-region-social-media
+grid-span(1, 1)
.panel-region-prefix
+grid-span(8, 2)
.panel-region-content,
.panel-region-title
+grid-span(7, 2)
.panel-region-title
clear: right
.panel-region-content,
.pane-node-field-tags
clear: left
.panel-region-author,
.panel-region-sidebar
display: block
clear: right
+grid-span(1, 9)
//margin-top: 110px
.panel-pane
padding: 5px
.panel-region-content,
.pane-node-field-tags
clear: left
.panel-region-sidebar
text-align: center
Raw
SassMeister-output.css
div[class*="panel-region"] {
background: #bada55;
margin-bottom: 10px;
}
h2 {
font-size: 14px;
}
html .hero-wrapper,
html .content-wrapper,
html .panel-col-bottom {
position: relative;
width: 100%;
}
@media (min-width: 960px) {
html .panel-panel .panel-region-top,
html .panel-panel .panel-region-content-bottom {
min-width: -webkit-calc((55px + 1em + 312px + 1em));
min-width: calc((55px + 1em + 312px + 1em));
width: -webkit-calc((55px + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
width: calc((55px + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
float: right;
margin-left: 0;
margin-right: 0.5em;
clear: left;
}
html .panel-panel .panel-region-teasers {
min-width: -webkit-calc((55px + 1em + 312px + 1em));
min-width: calc((55px + 1em + 312px + 1em));
width: -webkit-calc((55px + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
width: calc((55px + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
float: right;
margin-left: 0;
margin-right: 0.5em;
clear: both;
}
html .panel-panel .panel-region-social-media {
width: 55px;
float: left;
margin-right: -100%;
margin-left: 0.5em;
}
html .panel-panel .panel-region-prefix {
min-width: -webkit-calc((312px + 1em - 1em));
min-width: calc((312px + 1em - 1em));
width: -webkit-calc((((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
width: calc((((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (312px));
float: right;
margin-left: 0;
margin-right: 0.5em;
}
html .panel-panel .panel-region-content,
html .panel-panel .panel-region-title {
min-width: -webkit-calc());
min-width: calc());
width: -webkit-calc((((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1));
width: calc((((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1 + 1em) + (((100% - (367px + 9em)) / (7)) * 1));
float: left;
margin-right: -100%;
margin-left: -webkit-calc(0.5em + (55px + 1em));
margin-left: calc(0.5em + (55px + 1em));
}
html .panel-panel .panel-region-title {
clear: right;
}
html .panel-panel .panel-region-content,
html .panel-panel .pane-node-field-tags {
clear: left;
}
html .panel-panel .panel-region-author,
html .panel-panel .panel-region-sidebar {
display: block;
clear: right;
width: 312px;
float: right;
margin-left: 0;
margin-right: 0.5em;
}
html .panel-panel .panel-region-author .panel-pane,
html .panel-panel .panel-region-sidebar .panel-pane {
padding: 5px;
}
html .panel-panel .panel-region-content,
html .panel-panel .pane-node-field-tags {
clear: left;
}
html .panel-panel .panel-region-sidebar {
text-align: center;
}
}
Raw
SassMeister-rendered.html
<div class="panel-display chevelle clearfix ">
<div class="panel-col-top panel-panel clearfix">
<div class="panel-region-top">
<h2>'top'</h2>
</div>
<div class="panel-region-teasers">
<div class="panel-region-teasers-inner">
<h2>'teasers'</h2>
</div>
</div>
</div>
<div class="content indent">
<div class="panel-panel panel-col-middle">
<div class="inside">
<div class="hero-wrapper clearfix">
<div class="panel-region-hero">
<h2>'hero'</h2>
</div>
</div><!-- hero wrapper-->
<div class="content-wrapper clearfix">
<div class="panel-region-prefix">
<h2>'prefix'</h2>
</div>
<div class="panel-region-title">
<h2>'title'</h2>
</div>
<div class="panel-region-author">
<h2>'author'</h2>
</div>
<div class="panel-region-sidebar">
<h2>'sidebar'</h2>
</div>
<div class="panel-region-content">
<h2>'content'</h2>
</div>
<div class="panel-region-social-media">
<h2>'social'</h2>
</div>
</div><!-- end content wrapper-->
</div><!-- end inside -->
</div><!-- end panel-panel-->
</div><!-- end indent-->
<div class="panel-col-bottom panel-panel clearfix">
<div class="bottom-inner panel-panel-inner">
<h2>'bottom'</h2>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment