| .container | |
| .left | |
| left | |
| .cf | |
| .middle | |
| middle | |
| .right | |
| right |
| body { | |
| &:after { | |
| content: 'mobile'; | |
| display: none; | |
| @include breakpoint($break) { | |
| content: 'tablet'; | |
| } |
| // scrollto | |
| // | |
| // $fix 84 is equal to height of header | |
| $.fn.scrollView = function () { | |
| return this.each(function () { | |
| $('html, body').animate({ | |
| scrollTop: $(this).offset().top - 84 | |
| }, 1000); | |
| }); | |
| } |
| .container | |
| .wrap | |
| .box-1 | |
| .box-2 | |
| .cf |
| .container | |
| .wrap | |
| .box-1 | |
| .box-2 | |
| .cf |
| %ul | |
| %li | |
| this is my base li | |
| %ul.unique | |
| %li.unique-li | |
| this is my unique li |
| // ---- | |
| // Sass (v3.4.7) | |
| // Compass (v1.0.1) | |
| // ---- | |
| %flush { | |
| color: red; | |
| } | |
| @mixin flush { |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="edit" contenteditable="true">test</div> | |
| <button onclick="toogleSelectionText()">select/deselect</button> | |
| <script id="jsbin-javascript"> |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="edit" contenteditable="true">test</div> | |
| <button onclick="toogleSelectionText()">select/deselect</button> | |
| <script id="jsbin-javascript"> |
Between the <body> tags, before <div data-montage-id="montageVersion"></div>, add the following markup:
<h1>Temperature Converter</h1>
<div data-montage-id="tempConverter"></div>The data-montage-id custom data attribute is used to identify elements in the markup whose behavior you want to control. The objects that control these elements are located within the script block in the head area of the HTML document.