Skip to content

Instantly share code, notes, and snippets.

@ryardley
Last active August 29, 2015 14:15
Show Gist options
  • Save ryardley/f1b4e9bb51de4842a3e1 to your computer and use it in GitHub Desktop.
Save ryardley/f1b4e9bb51de4842a3e1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<html>
<body class="Page-outer">
<div class="Page-inner">
<header class="PageHeader">
<h1 class="PageHeader-h1">Foo meets Baz in a Bar...</h1>
</header>
<section class="PageLayout-content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
<section class="PageLayout-sidebar">
<div class="ArticleMedia">
<img class="ArticleMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" />
<div class="ArticleMedia-right">
<h1 class="ArticleMedia-h1">Beer me</h1>
<p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p>
<p class="ArticleMedia-more">More &#187;</p>
</div>
</div>
<div class="ArticleMedia">
<img class="ArticleMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" />
<div class="ArticleMedia-right">
<h1 class="ArticleMedia-h1">Beer me</h1>
<p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p>
<p class="ArticleMedia-more">More &#187;</p>
</div>
</div>
</section>
</div>
</body>
</html>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
//////////////////////////////////
// META
//////////////////////////////////
// metaprogramming/_metaprogramming.scss
// as little metaprogramming as possible
// filename warns of what you find here
// and discourages adding to this file
// (ie. better than functions)
// mainly to clarify some of sass's awful
// map syntax and provide sensible accessors
// for default things. Skip this and pretend
// it doesnt exist then check if the rest
// of the code is readable.
@function extend($obj, $ext-obj) {
@return map-merge($obj, $ext-obj);
}
@function extract($obj, $propname) {
@if not map-has-key($obj, $propname){
@error "property #{$propname} not found in object.";
}
@return map-get($obj, $propname);
}
// Breakpoints/tweakpoints manager
// http://www.sitepoint.com/breakpoints-tweakpoints-sass/
@mixin respond-to($point) {
@if map-has-key($tweakpoints, $point) {
@media (min-width: map-get($tweakpoints, $point)) {
@content;
}
} @else if map-has-key($breakpoints, $point) {
@media (min-width: map-get($breakpoints, $point)) {
@content;
}
} @else {
@warn "Could not find `#{$breakpoint}` in both local ($tweakpoints) and global ($breakpoints) contexts. Media block omitted.";
}
}
@function padding($level){
@return extract($padding, $level);
}
@function color($name, $method: null, $adjust: 0){
@return extract($colors, $name);
}
@function border($name){
@return extract($borders, $name);
}
///////////////////////////////////
// STRUCTURE
///////////////////////////////////
// Anything in the structure folder only
// includes Styles that represent the structure
// of the module and not the presentation
// of the module. For example there should
// be no hardcoded references to font styles
// border styles, colour, padding etc.
// if things like padding and width are
// required they should be injected using
// dependency injection as shown
// This structure stuff can be shared outside
// the theme context.
// structure/base/_tools.scss
@mixin pull-left{
float: left;
}
@mixin pull-right{
float: right;
}
@mixin clearfix{
clear: both;
}
// structure/base/_layout_centrifier.scss
$init:(
'width':1000px
);
@mixin layout-centrifierContainer($opts:()){
text-align:center;
}
@mixin layout-centrifier($opts:()){
$opts: extend($init, $opts);
max-width: extract($opts, 'width');
margin: 0 auto;
text-align:left;
}
// structure/base/_layout_with_sidebar.scss
$init:(
'content': 60%,
'sidebar': 40%,
'margin': 2%
);
@mixin layout-withSideBar-content($opts:()){
$opts: extend($init, $opts);
@include respond-to('medium'){
float:left;
width: extract($opts, 'content') - extract($opts, 'margin')/2;
}
}
@mixin layout-withSideBar-sidebar($opts:()){
$opts: extend($init, $opts);
@include respond-to('medium'){
float:right;
width: extract($opts, 'sidebar') - extract($opts, 'margin')/2;
}
}
// structure/modules/_media.scss
$Media:(
'left': 30%,
'right': 70%,
'margin': 2%
);
@mixin Media($opts:()){
$opts: extend($Media, $opts);
position: relative;
overflow: hidden;
}
@mixin Media-left($opts:()){
$opts: extend($Media, $opts);
float: left;
width: extract($opts, 'left') - extract($opts, 'margin')/2;
}
@mixin Media-right($opts:()){
$opts: extend($Media, $opts);
float: right;
width: extract($opts, 'right') - extract($opts, 'margin')/2;
}
///////////////////////////////
// PRESENTATION
///////////////////////////////
// Presentation code represents pretty
// making type code that can not be shared
// outside the context of the theme
// presentation/config/_padding.scss
$padding:(
'small': 5px,
'medium': 10px,
'large': 20px,
'massif': 100px
);
// presentation/config/_color.scss
$colors:(
'spot-primary': hotpink,
'spot-primary-dark': darken(hotpink, 10%),
'spot-primary-light': lighten(hotpink, 10%),
'spot-secondary': #449966
) !default;
// presentation/config/_borders.scss
$borders:(
'primary': 1px dotted color('spot-primary')
) !default;
// presentation/config/_breakpoints.scss
$breakpoints:(
'teenager': 400px,
'medium': 600px,
'wide': 1000px
) !default;
// merely needs to be defined here
$tweakpoints:();
// presentation/base/typeface.scss
@import url(http://fonts.googleapis.com/css?family=Roboto:100,700);
@mixin typeface-chunky{
@include typeface-reset;
font-family: 'Roboto', sans-serif;
font-weight: 700;
}
@mixin typeface-skinny{
@include typeface-reset;
font-family: 'Roboto', sans-serif;
font-weight: 100;
}
// rese typography
@mixin typeface-reset{
margin:0;
padding:0;
}
// presentation/base/font_main.scss
// Each font set exists in a file of it's own
// name convention: font-{set}-{tag}
// try to do any special font math calcs here
@mixin font-main-copy{
@include typeface-skinny;
font-size: 12px;
line-height: 16px;
}
@mixin font-main-h1{
@include typeface-chunky;
font-size: 16px;
text-transform:uppercase;
}
// presentation/base/font_spread.scss
@mixin font-spread-copy{
@include typeface-skinny;
font-size: 14px;
line-height: 24px;
letter-spacing: 1px;
}
@mixin font-spread-h1{
@include typeface-chunky;
font-size: 16px;
line-height: 24px;
text-transform:uppercase;
}
@mixin font-spread-h2{
@include typeface-chunky;
font-size: 14px;
line-height: 24px;
text-transform:uppercase;
}
@mixin font-spread-h3{
@include typeface-chunky;
font-size: 12px;
line-height: 24px;
text-transform:uppercase;
}
// presentation/base/font_decorative.scss
@mixin font-bigmofo-h1{
@include typeface-chunky;
font-size: 60px;
line-height: 60px;
text-transform:uppercase;
}
// presentation/base/_links.scss
@mixin link-normal{
cursor: pointer;
color: color('spot-primary');
&:hover{
color: color('spot-primary-light');
}
}
// real classes referenced by html
// content_hooks/article_media.scss
$ArticleMedia:(
margin: 6%,
padding: padding('medium')
);
.ArticleMedia{
@include Media($ArticleMedia);
border: border('primary');
border-radius: 4px;
margin-bottom: padding('medium');
padding: padding('medium');
}
.ArticleMedia-h1{
@include font-main-h1;
}
.ArticleMedia-left{
@include Media-left($ArticleMedia);
margin-top:2px;
border:3px solid color('spot-secondary');
}
.ArticleMedia-right{
@include Media-right($ArticleMedia);
@include font-main-copy;
}
.ArticleMedia-more{
@include link-normal;
position:absolute;
bottom: padding('medium');
right: padding('medium');
margin: 0;
text-align: right;
}
// Ideally you would have specific classes
// for all styles but for basic content
// especially user generated content
// you are forced to capitulate to
// using a single level of selectors
// content_hooks/page.scss
$centrification:('width':1000px);
.Page-outer{
@include layout-centrifierContainer($centrification);
}
.Page-inner{
@include layout-centrifier($centrification);
}
// content_hooks/page_layout.scss
$layout:(
'margin':3%
);
.PageLayout-content{
@include layout-withSideBar-content($layout);
@include font-spread-copy;
a{
@include link-normal;
}
h1{
@include font-spread-h1;
}
h2{
@include font-spread-h2;
}
h3{
@include font-spread-h3;
}
}
.PageLayout-sidebar{
@include layout-withSideBar-sidebar($layout);
}
// content_hooks/page_header.scss
.PageHeader-h1{
@include font-bigmofo-h1;
padding-top: padding('massif');
padding-bottom: padding('medium');
}
@import url(http://fonts.googleapis.com/css?family=Roboto:100,700);
.ArticleMedia {
position: relative;
overflow: hidden;
border: 1px dotted hotpink;
border-radius: 4px;
margin-bottom: 10px;
padding: 10px;
}
.ArticleMedia-h1 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 16px;
text-transform: uppercase;
}
.ArticleMedia-left {
float: left;
width: 27%;
margin-top: 2px;
border: 3px solid #449966;
}
.ArticleMedia-right {
float: right;
width: 67%;
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 12px;
line-height: 16px;
}
.ArticleMedia-more {
cursor: pointer;
color: hotpink;
position: absolute;
bottom: 10px;
right: 10px;
margin: 0;
text-align: right;
}
.ArticleMedia-more:hover {
color: #ff9cce;
}
.Page-outer {
text-align: center;
}
.Page-inner {
max-width: 1000px;
margin: 0 auto;
text-align: left;
}
.PageLayout-content {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 100;
font-size: 14px;
line-height: 24px;
letter-spacing: 1px;
}
@media (min-width: 600px) {
.PageLayout-content {
float: left;
width: 58.5%;
}
}
.PageLayout-content a {
cursor: pointer;
color: hotpink;
}
.PageLayout-content a:hover {
color: #ff9cce;
}
.PageLayout-content h1 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
}
.PageLayout-content h2 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 14px;
line-height: 24px;
text-transform: uppercase;
}
.PageLayout-content h3 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 12px;
line-height: 24px;
text-transform: uppercase;
}
@media (min-width: 600px) {
.PageLayout-sidebar {
float: right;
width: 38.5%;
}
}
.PageHeader-h1 {
margin: 0;
padding: 0;
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 60px;
line-height: 60px;
text-transform: uppercase;
padding-top: 100px;
padding-bottom: 10px;
}
<html>
<body class="Page-outer">
<div class="Page-inner">
<header class="PageHeader">
<h1 class="PageHeader-h1">Foo meets Baz in a Bar...</h1>
</header>
<section class="PageLayout-content">
<h1>HTML Ipsum Presents</h1>
<p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
<h2>Header Level 2</h2>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ol>
<blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
<h3>Header Level 3</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
</ul>
</section>
<section class="PageLayout-sidebar">
<div class="ArticleMedia">
<img class="ArticleMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" />
<div class="ArticleMedia-right">
<h1 class="ArticleMedia-h1">Beer me</h1>
<p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p>
<p class="ArticleMedia-more">More &#187;</p>
</div>
</div>
<div class="ArticleMedia">
<img class="ArticleMedia-left" src="https://avatars3.githubusercontent.com/u/1256409?v=3&s=460" />
<div class="ArticleMedia-right">
<h1 class="ArticleMedia-h1">Beer me</h1>
<p>Flexitarian bitters Pitchfork tofu, PBR synth taxidermy sartorial artisan. Banksy letterpress direct trade polaroid fingerstache. Yr organic VHS, fixie gluten-free scenester ethical Williamsburg</p>
<p class="ArticleMedia-more">More &#187;</p>
</div>
</div>
</section>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment