Skip to content

Instantly share code, notes, and snippets.

@calvinchengx

calvinchengx/SassMeister-input-HTML.html

Created February 16, 2015 06:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save calvinchengx/f57c46ece87212abdb4a to your computer and use it in GitHub Desktop.
Save calvinchengx/f57c46ece87212abdb4a to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Ophto App</title>
</head>
<body>
<section class="hero full-size-background-image">
<div class="section__content">
<h1>Value Proposition</h1>
<h3>This title is positioned off center. It has width of 6 columns and is positioned on the 3rd column. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
</section>
<section class="imagination">
<div class="section__content">
<h2>Benefits</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nobis numquam nemo itaque iste tenetur beatae blanditiis pariatur alias maxime vitae facere, amet officiis quos commodi deleniti? Amet, reiciendis, cumque!</p>
</div>
</section>
<section class="magazine">
<div class="section__content">
<h1>Magazine Section Title Here</h1>
<p>This is the content info for the magazine section. It is displaced one column from the left of the title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorum, veniam accusantium fuga, ratione harum repudiandae a nihil placeat ipsa beatae ducimus non veritatis enim ut ipsam quisquam, sapiente at.</p>
</div>
</section>
<section class="philosophy">
<div class="section__content">
<h2>Philosophy Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit quae voluptate libero odio, id, tempore doloremque officia deleniti debitis aliquam soluta temporibus recusandae quasi, laboriosam et error labore nostrum?</p>
</div>
</section>
<section class="videos">
<div class="section__content">
<h2>Videos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit quae voluptate libero odio, id, tempore doloremque officia deleniti debitis aliquam soluta temporibus recusandae quasi, laboriosam et error labore nostrum?</p>
</div>
</section>
<section class="about">
<div class="section__content">
<h2>About Section Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nobis numquam nemo itaque iste tenetur beatae blanditiis pariatur alias maxime vitae facere, amet officiis quos commodi deleniti? Amet, reiciendis, cumque!</p>
</div>
</section>
<script src="js/vendors.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Susy (v2.2.2)
// ----
@import "susy";
$susy: (
columns: 7,
column-width: 4em,
gutter-width: 1em,
grid-padding: gutter-width,
gutters: 0.25,
container-style: fluid,
global-box-sizing: border-box,
debug: (image: show)
);
section {
@include container;
}
.hero {
background: #84ecaf;
}
Raw
SassMeister-output.css
section {
max-width: 34em;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
background-size: 14.70588%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
section:after {
content: " ";
display: block;
clear: both;
}
.hero {
background: #84ecaf;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<title>Ophto App</title>
</head>
<body>
<section class="hero full-size-background-image">
<div class="section__content">
<h1>Value Proposition</h1>
<h3>This title is positioned off center. It has width of 6 columns and is positioned on the 3rd column. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h3>
</div>
</section>
<section class="imagination">
<div class="section__content">
<h2>Benefits</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nobis numquam nemo itaque iste tenetur beatae blanditiis pariatur alias maxime vitae facere, amet officiis quos commodi deleniti? Amet, reiciendis, cumque!</p>
</div>
</section>
<section class="magazine">
<div class="section__content">
<h1>Magazine Section Title Here</h1>
<p>This is the content info for the magazine section. It is displaced one column from the left of the title Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum dolorum, veniam accusantium fuga, ratione harum repudiandae a nihil placeat ipsa beatae ducimus non veritatis enim ut ipsam quisquam, sapiente at.</p>
</div>
</section>
<section class="philosophy">
<div class="section__content">
<h2>Philosophy Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit quae voluptate libero odio, id, tempore doloremque officia deleniti debitis aliquam soluta temporibus recusandae quasi, laboriosam et error labore nostrum?</p>
</div>
</section>
<section class="videos">
<div class="section__content">
<h2>Videos</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis impedit quae voluptate libero odio, id, tempore doloremque officia deleniti debitis aliquam soluta temporibus recusandae quasi, laboriosam et error labore nostrum?</p>
</div>
</section>
<section class="about">
<div class="section__content">
<h2>About Section Title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nobis numquam nemo itaque iste tenetur beatae blanditiis pariatur alias maxime vitae facere, amet officiis quos commodi deleniti? Amet, reiciendis, cumque!</p>
</div>
</section>
<script src="js/vendors.js"></script>
<script src="js/bundle.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment