Skip to content

Instantly share code, notes, and snippets.

@phil-lgr

phil-lgr/SassMeister-input-HTML.html

Last active February 4, 2016 20:07
Show Gist options
  • Save phil-lgr/969414b914c54df0322b to your computer and use it in GitHub Desktop.
Save phil-lgr/969414b914c54df0322b to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<head>
<link
href='https://fonts.googleapis.com/css?family=Ubuntu:400,500&subset=latin,latin-ext' rel='stylesheet'
type='text/css'>
</head>
<body>
<header>
<h1>Main Header ☯</h1>
</header>
<article>
<header>
<h2>Article Header ¥</h2>
</header>
<section>
<h2>Section</h2>
<p>Section About a Topic</p>
<article>
<header>
<h3>
Nested Article Header ✎
</h3>
</header>
<h3>Nested Article</h3>
<p>Nested article content</p>
<section>Another section</section>
<footer>
<p>
Nested Article Footer
<time>Time</time>
</p>
</footer>
</article>
</section>
<footer>
<p>
Article Footer
</p>
</footer>
</article>
<address>
Address for the article
<a href="mailto:[email protected]">contact us</a>.
<br>
</address>
<hr>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<hr>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
</dd>
<dt>Hello</dt>
<dd>Description of Hello</dd>
</dl>
<hr>
<!-- Figure with figcaption -->
<figure draggable>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption contenteditable>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<hr>
<pre contenteditable>
function sasktelDatePicker() {
var directive = {
restrict: 'E',
replace: false,
scope: {},
templateUrl: 'ng-date-picker.shtml',
controller: dirCtrl,
bindToController: {
addon: '='
},
controllerAs: 'dirCtrl',
link: {
post: linkFct
}
};
return directive;
}
</pre>
<p>I do <abbr title="Hypertext Markup Language"><b>HTML</b></abbr></p>
<p><cite>Philippe</cite></p>
<hr>
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
<hr>
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
<p>Save the document by <mark>pressing</mark> <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<hr>
<p>and this is a <q>short <small>a very small note</small> quote</q> and <s>STRIKETHROUGH</s> this is a <blockquote>long quote long long long</blockquote></p>
<hr>
$99<sup>99</sup> at <time datetime="2001-05-15T19:00">May 15</time>
<hr>
<img usemap="#example-map-1" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<map name="example-map-1">
<area shape="circle" coords="0,0,10" href="google.com" />
<area shape="default" />
</map>
<hr>
<fieldset class="elist">
<legend>Address&hellip;</legend>
<ul>
<li><input type="radio" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li>
<li><input type="radio" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li>
<li><input type="radio" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li>
<li><input type="radio" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li>
</ul>
</fieldset>
<select name="select">
<option selected value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</body>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
// Colors
$color-orange: #EC8910;
$color-blue: #0088B8;
$color-white: #FFFFFF;
$color-black: #424347;
$color-grey-light: #F8F8F8;
$color-grey-medium: #e1e2e3;
$color-grey-dark: #565A5C;
// Fonts size
$font-size: 15px;
$font-line-height: 1.47;
// Borders
$border-width-thin: 0.12rem;
// Mixins
@mixin fonts {
font-family: 'Ubuntu', sans-serif;
font-size: $font-size;
line-height: $font-line-height;
}
// Content sectioning
body {
@include fonts;
touch-action: pan-y;
}
address {
}
article {
padding: 0 0.5rem 0 0.5rem;
background: $color-grey-medium;
}
footer {
}
header {
}
h1 h2 h3 h4 h5 h6 {
}
section {
padding: 0 0.5rem 0 0.5rem;
background: $color-grey-light;
border: $border-width-thin $color-grey-dark solid;
}
nav {
padding: 1rem;
}
// Text content
dd {
}
dt {
}
dt:after {
content: ": ";
}
dl {
}
figure {
}
figcaption {
}
hr {
border-color: red;
}
ol {
}
li {
}
ul {
}
main {
}
p {
}
// Inline text semantics
abbr {
}
b {
}
cite {
}
code {
}
em {
}
i {
}
// For keyboard inputs
kbd {
}
// Highlight
mark {
}
q {
}
blockquote {
}
s {
}
small {
}
strong {
}
sub {
}
sup {
}
// Underline
u {
}
var {
font-style: italic;
}
time {
color: $color-blue;
}
// Forms
button {
}
form {
}
select {
}
group {
}
Raw
SassMeister-output.css
body {
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
line-height: 1.47;
touch-action: pan-y;
}
article {
padding: 0 0.5rem 0 0.5rem;
background: #e1e2e3;
}
section {
padding: 0 0.5rem 0 0.5rem;
background: #F8F8F8;
border: 0.12rem #565A5C solid;
}
nav {
padding: 1rem;
}
dt:after {
content: ": ";
}
hr {
border-color: red;
}
var {
font-style: italic;
}
time {
color: #0088B8;
}
Raw
SassMeister-rendered.html
<head>
<link
href='https://fonts.googleapis.com/css?family=Ubuntu:400,500&subset=latin,latin-ext' rel='stylesheet'
type='text/css'>
</head>
<body>
<header>
<h1>Main Header ☯</h1>
</header>
<article>
<header>
<h2>Article Header ¥</h2>
</header>
<section>
<h2>Section</h2>
<p>Section About a Topic</p>
<article>
<header>
<h3>
Nested Article Header ✎
</h3>
</header>
<h3>Nested Article</h3>
<p>Nested article content</p>
<section>Another section</section>
<footer>
<p>
Nested Article Footer
<time>Time</time>
</p>
</footer>
</article>
</section>
<footer>
<p>
Article Footer
</p>
</footer>
</article>
<address>
Address for the article
<a href="mailto:[email protected]">contact us</a>.
<br>
</address>
<hr>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<hr>
<dl>
<dt>Firefox</dt>
<dd>A free, open source, cross-platform, graphical web browser
developed by the Mozilla Corporation and hundreds of volunteers.
</dd>
<dt>Hello</dt>
<dd>Description of Hello</dd>
</dl>
<hr>
<!-- Figure with figcaption -->
<figure draggable>
<img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<figcaption contenteditable>Fig1. MDN Logo</figcaption>
</figure>
<p></p>
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
<hr>
<pre contenteditable>
function sasktelDatePicker() {
var directive = {
restrict: 'E',
replace: false,
scope: {},
templateUrl: 'ng-date-picker.shtml',
controller: dirCtrl,
bindToController: {
addon: '='
},
controllerAs: 'dirCtrl',
link: {
post: linkFct
}
};
return directive;
}
</pre>
<p>I do <abbr title="Hypertext Markup Language"><b>HTML</b></abbr></p>
<p><cite>Philippe</cite></p>
<hr>
<p>
In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.
</p>
<hr>
<p>Type the following in the Run dialog: <kbd>cmd</kbd><br />Then click the OK button.</p>
<p>Save the document by <mark>pressing</mark> <kbd>Ctrl</kbd> + <kbd>S</kbd></p>
<hr>
<p>and this is a <q>short <small>a very small note</small> quote</q> and <s>STRIKETHROUGH</s> this is a <blockquote>long quote long long long</blockquote></p>
<hr>
$99<sup>99</sup> at <time datetime="2001-05-15T19:00">May 15</time>
<hr>
<img usemap="#example-map-1" src="https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png" alt="An awesome picture">
<map name="example-map-1">
<area shape="circle" coords="0,0,10" href="google.com" />
<area shape="default" />
</map>
<hr>
<fieldset class="elist">
<legend>Address&hellip;</legend>
<ul>
<li><input type="radio" value="1" id="address-switch_1" checked /><label for="address-switch_1"><input type="text" value="19 Quaker Ridge Rd. Bethel CT 06801" /></label></li>
<li><input type="radio" value="2" id="address-switch_2" /><label for="address-switch_2"><input type="text" value="1000 Coney Island Ave. Brooklyn NY 11230" /></label></li>
<li><input type="radio" value="3" id="address-switch_3" /><label for="address-switch_3"><input type="text" value="2962 Dunedin Cv. Germantown TN 38138" /></label></li>
<li><input type="radio" value="4" id="address-switch_4" /><label for="address-switch_4"><input type="text" value="915 E 7th St. Apt 6L. Brooklyn NY 11230" /></label></li>
</ul>
</fieldset>
<select name="select">
<option selected value="value1">Value 1</option>
<option value="value2" selected>Value 2</option>
<option value="value3">Value 3</option>
</select>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment