Skip to content

Instantly share code, notes, and snippets.

@andysolomon

andysolomon/SassMeister-input-HTML.html

Created March 2, 2015 01:08
Show Gist options
  • Save andysolomon/30f9cf9c0a96c075b603 to your computer and use it in GitHub Desktop.
Save andysolomon/30f9cf9c0a96c075b603 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://basehold.it/24">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"></script>')</script>
<![endif]-->
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">h1.title</h1>
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<header>
<h1>article header h1</h1>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>
abcdefghijklmnopqrstuvwxyzabcdefghijklmn
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
</header>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<footer>
<h3>article footer h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
</footer>
</article>
<aside>
<h3>aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3>footer</h3>
</footer>
</div>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Typecsset (v0.3.0)
// ----
$typecsset-base-font-size: 14px;
$typecsset-base-line-height: 24px;
@import "typecsset";
body {
font: Baskerville, sans;
}
article, aside {
margin: 0rem 2rem;
}
p {
//margin-top: 0;
//margin-bottom: 1.5rem;
background-color: pink;
}
Raw
SassMeister-output.css
@charset "UTF-8";
/**
* Typecsset
*
* Typecsset is a small, unopinionated library for creating beautifully set type
* on the web. Typecsset gives perfect vertical rhythm at any configurable font
* size, as well as many other typographical niceties.
*/
/*------------------------------------*\
#SHARED
\*------------------------------------*/
/**
* A lot of elements in Typecsset need to share some declarations (mainly for
* vertical rhythm), so we `@extend` some silent classes.
*/
h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, ul, ol, dd, p, address, pre, blockquote, table {
margin-bottom: 24px;
margin-bottom: 1.71429rem;
}
/*------------------------------------*\
#BASE
\*------------------------------------*/
/**
* 1. Set the base element’s `font-size` to the value of your choosing. Set in
* ems, assuming a browser default of 16px.
* 2. Work out the unitless `line-height` for your project based around your
* desired `line-height` (defined previously in pixels), and your project’s
* base font size.
*/
html {
font-size: 0.875em;
/* [1] */
line-height: 1.71429;
/* [2] */
}
body {
margin: 0;
}
/*------------------------------------*\
#HEADINGS
\*------------------------------------*/
h1 {
font-size: 48px;
font-size: 3.42857rem;
line-height: 1;
}
h2 {
font-size: 36px;
font-size: 2.57143rem;
line-height: 1.33333;
}
h3 {
font-size: 30px;
font-size: 2.14286rem;
line-height: 1.6;
}
h4 {
font-size: 24px;
font-size: 1.71429rem;
line-height: 1;
}
h5 {
font-size: 20px;
font-size: 1.42857rem;
line-height: 1.2;
}
h6 {
font-size: 18px;
font-size: 1.28571rem;
line-height: 1.33333;
}
/*------------------------------------*\
#LISTS
\*------------------------------------*/
ul, ol, dd {
margin-left: 48px;
margin-left: 3.42857rem;
}
li > ul,
li > ol {
margin-bottom: 0;
}
/*------------------------------------*\
#PARAGRAPHS
\*------------------------------------*/
/**
* Not strictly a paragraph, but probably doesn’t need its own section.
*/
/*------------------------------------*\
#CODE
\*------------------------------------*/
/**
* 1. Fix an odd quirk whereby, without this, code blocks are rendered at a
* font-size smaller than 1em.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
/* [1] */
}
/*------------------------------------*\
#QUOTES
\*------------------------------------*/
/**
* 1. Hang the opening quote of the blockquote.
*/
blockquote {
text-indent: -0.41em;
/* [1] */
}
/**
* Set up quote marks on quoting elements. This is very English-based, so we are
* using “, ”, ‘, and ’ quotes.
*/
blockquote {
quotes: "“" "”";
margin-left: 48px;
margin-left: 3.42857rem;
}
blockquote p:before {
content: "“";
content: open-quote;
}
blockquote p:after {
content: "";
content: no-close-quote;
}
blockquote p:last-of-type:after {
content: "”";
content: close-quote;
}
q {
quotes: "‘" "’" "“" "”";
/**
* If an element opens with an inline quote, let’s hang that.
*/
}
q:before {
content: "‘";
content: open-quote;
}
q:after {
content: "’";
content: close-quote;
}
q q:before {
content: "“";
content: open-quote;
}
q q:after {
content: "”";
content: close-quote;
}
q:first-child {
display: inline-block;
text-indent: -0.22em;
}
/*------------------------------------*\
#TABLES
\*------------------------------------*/
/**
* Crude table styles; tables are very difficult to keep on the baseline.
*/
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
th,
td {
padding: 12px;
}
body {
font: Baskerville, sans;
}
article, aside {
margin: 0rem 2rem;
}
p {
background-color: pink;
}
Raw
SassMeister-rendered.html
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="http://basehold.it/24">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"></script>')</script>
<![endif]-->
</head>
<body>
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">h1.title</h1>
<nav>
<ul>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
<li><a href="#">nav ul li a</a></li>
</ul>
</nav>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<header>
<h1>article header h1</h1>
<p>abcdefghijklmnopqrstuvwxyz</p>
<p>
abcdefghijklmnopqrstuvwxyzabcdefghijklmn
abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec.</p>
</header>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<section>
<h2>article section h2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices. Proin in est sed erat facilisis pharetra.</p>
</section>
<footer>
<h3>article footer h3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor.</p>
</footer>
</article>
<aside>
<h3>aside</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sodales urna non odio egestas tempor. Nunc vel vehicula ante. Etiam bibendum iaculis libero, eget molestie nisl pharetra in. In semper consequat est, eu porta velit mollis nec. Curabitur posuere enim eget turpis feugiat tempor. Etiam ullamcorper lorem dapibus velit suscipit ultrices.</p>
</aside>
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3>footer</h3>
</footer>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment