Skip to content

Instantly share code, notes, and snippets.

@jxpx777

jxpx777/SassMeister-input-HTML.html

Created April 6, 2014 17:04
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 jxpx777/10008768 to your computer and use it in GitHub Desktop.
Save jxpx777/10008768 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<!DOCTYPE html>
<html>
<head>
<title>FWUPA</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NIhzA2wh/3UWZa5iS7ts9qmX69QwoaXxXG6UseNuLpE=" name="csrf-token" />
</head>
<body>
<section id="wrap">
<nav class="global primary">
<ul class="navigation">
<li>Home</li>
<li><a href="/about">About</a></li>
</ul>
<ul class="user">
<li><a href="/users/edit">Edit Account</a></li>
<li><a data-method="delete" href="/users/sign_out" rel="nofollow">Sign Out</a></li>
</ul>
</nav>
<div class="row">
<section id="primaryContent">
<h1>Welcome</h1>
<p>Welcome to the home of the Fort Worth Ultimate Players Association, Inc. If you're looking for information about Ultimate in Fort Worth, you've come to the right place. Read information about pick-up games, leagues, and general frisbee info.</p>
<h2>Pick-Up Games</h2>
<p>We nearly always have enough for 7 on 7 plus subs. Bring a white shirt, a dark shirt, and your heckling skills. All skill levels welcome, especially new players. Post-game with good friends, good food, and good people watching.</p>
</section>
<aside class="secondaryContent">
<h3>Recent Posts</h3>
<article class="post">
<h3>Hello, world</h3>
<p><p>This is a test post, sir!</p></p>
<p><small>(0 Comments) &bull; <a href="/posts/1">Read More</a></small></p>
</article><article class="post">
<h3>Pickup tomorrow at 10:00 AM</h3>
<p><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p></p>
<p><small>(0 Comments) &bull; <a href="/posts/2">Read More</a></small></p>
</article>
<p><a href="/posts">All Posts</a></p>
<p><a href="/posts/new">New Post</a></p>
</aside>
</div>
<footer>
&copy;&nbsp;Copyright Fort Worth Ultimate Players Association, Inc., 2013&ndash;2014
</footer>
</section>
</body>
</html>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.18)
// Compass (v0.12.4)
// Bourbon (v3.1.8)
// Neat (v1.5.0)
// ----
@import "bourbon/bourbon";
@import "bourbon/bourbon";
@import "neat/neat";
$visual-grid: true;
$visual-grid-color: yellow;
$visual-grid-index: front;
$visual-grid-opacity: 0.2;
body {
font-family: Helvetica Neue, sans-serif;
font-weight: 200;
font-size: 14px;
line-height: 1.6;
}
section#wrap {
@include outer-container;
}
nav {
@include row( block );
&.global.primary {
@include outer-container;
height: 5rem;
line-height: 2rem;
padding: 1em 1.5em;
@include linear-gradient( #1e5799, #2989d8 );
color: white;
font-weight: bold;
ul {
&.navigation {
@include span-columns( 8 );
}
&.user {
@include span-columns( 4 );
@include clearfix;
}
list-style-type: none;
li {
line-height: 2;
display: inline-block;
//IE hack for inline block support
zoom:1;
*display:inline;
//End of IE hack
margin-right: 1rem;
margin-left: 1rem;
a {
color: white;
text-decoration: none;
font-weight: normal;
text-shadow: 1px 2px rgba(100, 100, 100, 0.6);
}
}
}
}
}
div.row {
@include row( block );
}
section#primaryContent {
@include span-columns( 8, block );
}
aside#secondaryContent {
@include span-columns( 4, block );
}
footer {
text-align: center;
@include row();
}
Raw
SassMeister-output.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Helvetica Neue, sans-serif;
font-weight: 200;
font-size: 14px;
line-height: 1.6;
}
section#wrap {
*zoom: 1;
max-width: 68em;
margin-left: auto;
margin-right: auto;
}
section#wrap:before, section#wrap:after {
content: " ";
display: table;
}
section#wrap:after {
clear: both;
}
nav {
*zoom: 1;
display: block;
}
nav:before, nav:after {
content: " ";
display: table;
}
nav:after {
clear: both;
}
nav.global.primary {
*zoom: 1;
max-width: 68em;
margin-left: auto;
margin-right: auto;
height: 5rem;
line-height: 2rem;
padding: 1em 1.5em;
background-color: #1e5799;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e5799), color-stop(100%, #2989d8));
background-image: -webkit-linear-gradient(#1e5799, #2989d8);
background-image: linear-gradient(#1e5799, #2989d8);
color: white;
font-weight: bold;
}
nav.global.primary:before, nav.global.primary:after {
content: " ";
display: table;
}
nav.global.primary:after {
clear: both;
}
nav.global.primary ul {
list-style-type: none;
}
nav.global.primary ul.navigation {
float: left;
display: block;
margin-right: 2.35765%;
width: 65.88078%;
}
nav.global.primary ul.navigation:last-child {
margin-right: 0;
}
nav.global.primary ul.user {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
*zoom: 1;
}
nav.global.primary ul.user:last-child {
margin-right: 0;
}
nav.global.primary ul.user:before, nav.global.primary ul.user:after {
content: " ";
display: table;
}
nav.global.primary ul.user:after {
clear: both;
}
nav.global.primary ul li {
line-height: 2;
display: inline-block;
zoom: 1;
*display: inline;
margin-right: 1rem;
margin-left: 1rem;
}
nav.global.primary ul li a {
color: white;
text-decoration: none;
font-weight: normal;
text-shadow: 1px 2px rgba(100, 100, 100, 0.6);
}
div.row {
*zoom: 1;
display: block;
}
div.row:before, div.row:after {
content: " ";
display: table;
}
div.row:after {
clear: both;
}
section#primaryContent {
float: left;
display: block;
margin-right: 2.35765%;
width: 65.88078%;
}
section#primaryContent:last-child {
margin-right: 0;
}
aside#secondaryContent {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
}
aside#secondaryContent:last-child {
margin-right: 0;
}
footer {
text-align: center;
*zoom: 1;
display: block;
}
footer:before, footer:after {
content: " ";
display: table;
}
footer:after {
clear: both;
}
Raw
SassMeister-rendered.html
<!DOCTYPE html>
<html>
<head>
<title>FWUPA</title>
<meta content="authenticity_token" name="csrf-param" />
<meta content="NIhzA2wh/3UWZa5iS7ts9qmX69QwoaXxXG6UseNuLpE=" name="csrf-token" />
</head>
<body>
<section id="wrap">
<nav class="global primary">
<ul class="navigation">
<li>Home</li>
<li><a href="/about">About</a></li>
</ul>
<ul class="user">
<li><a href="/users/edit">Edit Account</a></li>
<li><a data-method="delete" href="/users/sign_out" rel="nofollow">Sign Out</a></li>
</ul>
</nav>
<div class="row">
<section id="primaryContent">
<h1>Welcome</h1>
<p>Welcome to the home of the Fort Worth Ultimate Players Association, Inc. If you're looking for information about Ultimate in Fort Worth, you've come to the right place. Read information about pick-up games, leagues, and general frisbee info.</p>
<h2>Pick-Up Games</h2>
<p>We nearly always have enough for 7 on 7 plus subs. Bring a white shirt, a dark shirt, and your heckling skills. All skill levels welcome, especially new players. Post-game with good friends, good food, and good people watching.</p>
</section>
<aside class="secondaryContent">
<h3>Recent Posts</h3>
<article class="post">
<h3>Hello, world</h3>
<p><p>This is a test post, sir!</p></p>
<p><small>(0 Comments) &bull; <a href="/posts/1">Read More</a></small></p>
</article><article class="post">
<h3>Pickup tomorrow at 10:00 AM</h3>
<p><p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p></p>
<p><small>(0 Comments) &bull; <a href="/posts/2">Read More</a></small></p>
</article>
<p><a href="/posts">All Posts</a></p>
<p><a href="/posts/new">New Post</a></p>
</aside>
</div>
<footer>
&copy;&nbsp;Copyright Fort Worth Ultimate Players Association, Inc., 2013&ndash;2014
</footer>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment