Skip to content

Instantly share code, notes, and snippets.

@bdaley

bdaley/SassMeister-input-HTML.html

Created November 12, 2015 20:20
Show Gist options
  • Save bdaley/b929156fb648e900d21b to your computer and use it in GitHub Desktop.
Save bdaley/b929156fb648e900d21b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SASS Media Queries</title>
<meta name="description" content="A short exercise to demo media queries in SASS">
</head>
<body>
<main>
<h1>SASS Media Queries</h1>
<img src="http://placehold.it/600x250" alt="Hero Image">
<section>
<header>
<h1>News</h1>
</header>
<article>
<header>
<h1>Article 1</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 2</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 3</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
</section>
<article>
<header>
<h1>Article 4</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 5</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 6</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
</main>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$small-screen: 768px;
$medium-screen: 992px;
$large-screen: 1200px;
main {
> img {
width: 100%;
}
// Small Size MQ: Main is centered w/ left and right margins
}
article {
width: 100%;
// Small Size MQ: 2 columns
// Medium Size: 3 columns
}
Raw
SassMeister-output.css
main > img {
width: 100%;
}
article {
width: 100%;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SASS Media Queries</title>
<meta name="description" content="A short exercise to demo media queries in SASS">
</head>
<body>
<main>
<h1>SASS Media Queries</h1>
<img src="http://placehold.it/600x250" alt="Hero Image">
<section>
<header>
<h1>News</h1>
</header>
<article>
<header>
<h1>Article 1</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 2</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 3</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
</section>
<article>
<header>
<h1>Article 4</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 5</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
<article>
<header>
<h1>Article 6</h1>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam alias voluptatem, dicta tempore optio suscipit est nemo, error iure quasi et aliquid vero reiciendis totam sint accusamus nihil, ipsam rerum.</p>
</article>
</main>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment