Last active
August 29, 2015 14:15
-
-
Save ryardley/f1b4e9bb51de4842a3e1 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 »</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 »</p> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ---- | |
| // 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'); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @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; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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 »</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 »</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