site/index.html in uniform-ui-0.6 vs site/index.html in uniform-ui-1.0
- old
+ new
@@ -1,660 +1,251 @@
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Uniform</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/4.2.0/normalize.css" type="text/css" media="screen">
- <link rel="stylesheet" href="site/preview.css" type="text/css" media="screen" charset="utf-8">
- <link rel="stylesheet" href="site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
+ <link rel="stylesheet" href="/site/uniform.css" type="text/css" media="screen" title="no title" charset="utf-8">
+ <link rel="stylesheet" href="/site/preview.css" type="text/css" media="screen" charset="utf-8">
</head>
<body>
-
-
- <div class="side-nav">
- <div style="padding: 20px; padding-right: 30px">
- <img src="site/logo.png" style="width: 100%; height: auto;">
- </div>
- <ul class="uniform-nav">
+<div class="side-nav">
+ <div class="pad">
+ <a href="/">
+ <img src="/site/logo.png" class="block">
+ </a>
+ </div>
+ <div class="uniformNav vertical">
+ <div class="nav">
- <li><a href="#uniform">Uniform</a></li>
- <li><a href="#installation">Installation</a></li>
+
+ <a href="/site/helpers.html">
+ Helpers
+
+ </a>
- <li><a href="#philosophy">Philosophy</a></li>
+
+ <a href="/site/colors.html">
+ Colors
+
+ </a>
- <li><a href="#colors">Colors</a></li>
+
+ <a href="/site/grid.html">
+ Grid
+
+ </a>
- <li><a href="#buttons">Buttons</a></li>
+
+ <a href="/site/buttons.html">
+ Buttons
+
+ </a>
- <li><a href="#grid">Grid</a></li>
+
+ <a href="/site/tables.html">
+ Tables
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- <li><a href="#inputs">Inputs</a></li>
+
+ <a href="/site/cards.html">
+ Cards
+
+ </a>
- <li><a href="#forms">Forms</a></li>
+
+ <a href="/site/rows.html">
+ Rows
+
+ </a>
- <li><a href="#loaders">Loaders</a></li>
+
+ <a href="/site/form.html">
+ Form
+
+ </a>
- <li><a href="#cards">Cards</a></li>
+
+ <a href="/site/loaders.html">
+ Loaders
+
+ </a>
- <li><a href="#tiles">Tiles</a></li>
+
+ <a href="/site/nav.html">
+ Nav
+
+ </a>
- <li><a href="#rows">Rows</a></li>
+
+ <a href="/site/tabs.html">
+ Tabs
+
+ </a>
- <li><a href="#lists">Lists</a></li>
+
+ <a href="/site/tiles.html">
+ Tiles
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- <li><a href="#tables">Tables</a></li>
+
+ <a href="/site/labels.html">
+ Labels
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- <li><a href="#nav">Nav</a></li>
+
+ <a href="/site/alerts.html">
+ Alerts
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- <li><a href="#tabs">Tabs</a></li>
+
+ <a href="/site/dropdown.html">
+ Dropdown
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- <li><a href="#helpers">Helpers</a></li>
+
+ <a href="/site/modal.html">
+ Modal
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
- </ul>
- </div>
- <div class="main-content">
-
- <a name="uniform"></a>
- <div class="section">
+ <a href="/site/select.html">
+ Select
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
+
-<div class="center">
+ <a href="/site/tooltip.html">
+ Tooltip
+
+ <span class="uniformLabel yellow">todo</span>
+
+ </a>
+
+ </div>
+ </div>
+</div>
+<div class="main-content overflow-hidden">
+ <div class="text-center margin-top-more">
<img src="site/logo.png" width="451" height="101">
- <p class="large">Sass components and defaults for building a UI that's on fleak.</p>
+ <p class="large">Sass components and helpers for building a UI.</p>
</div>
-
- </div>
-
- <a name="installation"></a>
- <div class="section">
-
- <h1>Installation</h1>
-
- <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
+<div class="section">
+ <h1>Installation</h1>
+ <p>Add to your gem file<br/><code>gem 'uniform-ui'</code></p>
<p>Execute:<br/><code>$ bundle</code></p>
<p>Or install it yourself:<br/><code>$ gem install uniform-ui</code></p>
<p>Include the css library in your asset pipeline.<br/><code>@import 'uniform';</code></p>
+ <p>Include the javascript library in your asset pipeline.<br/><code>//= require uniform</code></p>
+ <h3>Scope Components</h3>
+ <p>Optionally, you can scope the components you want included in your assets.</p>
+ <pre class=''>// css
+@import 'uniform';
+// - OR -
+@import 'uniform/base';
+@import 'uniform/helpers';
+@import 'uniform/defaults';
+@import 'uniform/helpers/text';
+@import 'uniform/helpers/colors';
+@import 'uniform/helpers/sizes';
+@import 'uniform/helpers/margin';
+@import 'uniform/helpers/padding';
+@import 'uniform/components/tile';
+@import 'uniform/components/label';
+@import 'uniform/components/form';
+@import 'uniform/components/buttons';
+@import 'uniform/components/select';
+@import 'uniform/components/card';
+@import 'uniform/components/grid';
+@import 'uniform/components/table';
+@import 'uniform/components/row';
+@import 'uniform/components/tabs';
+@import 'uniform/components/tooltip';
+@import 'uniform/components/dropdown';
+@import 'uniform/components/alert';
+@import 'uniform/components/loaders';
+@import 'uniform/components/nav';
+@import 'uniform/components/modal';
+
+// javascript
+//= require uniform
+// - OR -
+//= require uniform/base
+//= require uniform/select</pre>
+</div>
+<div class="section">
+ <h1>Philosophy</h1>
+ <h3>Don't use ID's</h3>
+ <p>Unless you have to, and even then, think twice. HTML Id's make things not
+ reusable. There should only be one instance of an id in a document</p>
-
- </div>
-
- <a name="philosophy"></a>
- <div class="section">
-
- <h1>Philosophy</h1>
-
- <h3>Don't use ID's</h3>
- <p>Unless you have to, and even then, think twice. HTML Id's make things not reusable. There should only be one instance of an id in a document</p>
-
<h3>Use Semanitc Classes Presentationaly :)</h3>
- <p>Here's a decent post on OOCSS (Object Oriented CSS) as it relates to semantic vs presentational classes: <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
- <p><strong>TL;DR:</strong> Semantic classes explain what that element is. Presentational classes explain what the shoud look like.</p>
- <p><code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
- <p>Some of us don't want to touch css files (preference: presentational), and some of us live there (preference: semantic). Honestly, the art of good ui development is balancing semantic and presentational classes. Each taken to their extreme is bad.</p>
- <p>Structure html so that the semantic class is first and presentational classes follow.</p>
+ <p>
+ Here's a decent post on OOCSS (Object Oriented CSS) as it relates to
+ semantic vs presentational classes:
+ <a href="http://blackfalcon.roughdraft.io/5255648-oocss-v-ooscss-sasscast-show-notes">OOCSS v OOSCSS</a>
+ <p>
+ <strong>TL;DR:</strong> Semantic classes explain what that element is.
+ Presentational classes explain what the shoud look like.
+ </p>
+ <p>
+ <code>class="property-list"</code> vs <code>class="ul-list col-sm-4"</code>
+ </p>
+ <p>
+ Some of us don't want to touch css files (preference: presentational),
+ and some of us live there (preference: semantic). Honestly, the art of
+ good ui development is balancing semantic and presentational classes.
+ Each taken to their extreme is bad.
+ </p>
+ <p>
+ Structure html so that the semantic class is first and presentational
+ classes follow.
+ </p>
<p><code>class="property-list ul-list col-sm-4"</code></p>
<h3>Save the Namespace, save the world</h3>
<p>Don't make presentational classes that will clash with elements that could mean something else. I'm looking at you Bootsrap!</p>
<p><code>class="label"</code> should be <code>class="text-label"</code></p>
- <h3>Train-case</h3>
- <p>Use train-case for class names, not camelCase or snake_case. It's quicker to type and honestly just conventional.</p>
+ <h3>camelCase vs train-case</h3>
+ <p>Use camelCase for class names for components, not train-case or snake_case.</p>
+ <p>Use tran-case for class names for helpers or modifiers.</p>
- <div class="row">
- <div class="col-sm-6">
- <h3>Wrappers and Containers</h3>
- <p>The order of nesting should go Wrapper > Element > Container. Sometimes you have to have an inside layer to do advanced css things, and the container should be that layer. This is not a suggestion for every object; use wrapper and/or container as needed.</p>
- </div>
- <div class="col-sm-6">
- <h3> </h3>
-<pre><xmp><div class="property-wrapper">
- <div class="property">
- <div class="property-container">
- </div>
- </div>
-</div></xmp></pre>
- </div>
- </div>
-
- </div>
-
- <a name="colors"></a>
- <div class="section">
-
- <h1>Colors</h1>
-
- <table>
-<tr>
- <td><span class='swatch green-light-bg'></span></td>
- <td><code>sass// $green-light</code></td>
- <td><code>class// .green-light</code></td>
- </tr>
-<tr>
- <td><span class='swatch green-bg'></span></td>
- <td><code>sass// $green</code></td>
- <td><code>class// .green</code></td>
- </tr>
-<tr>
- <td><span class='swatch green-dark-bg'></span></td>
- <td><code>sass// $green-dark</code></td>
- <td><code>class// .green-dark</code></td>
- </tr>
-<tr><td colspan='3'> </td></tr>
-<tr>
- <td><span class='swatch blue-light-bg'></span></td>
- <td><code>sass// $blue-light</code></td>
- <td><code>class// .blue-light</code></td>
- </tr>
-<tr>
- <td><span class='swatch blue-bg'></span></td>
- <td><code>sass// $blue</code></td>
- <td><code>class// .blue</code></td>
- </tr>
-<tr>
- <td><span class='swatch blue-dark-bg'></span></td>
- <td><code>sass// $blue-dark</code></td>
- <td><code>class// .blue-dark</code></td>
- </tr>
-<tr><td colspan='3'> </td></tr>
-<tr>
- <td><span class='swatch red-light-bg'></span></td>
- <td><code>sass// $red-light</code></td>
- <td><code>class// .red-light</code></td>
- </tr>
-<tr>
- <td><span class='swatch red-bg'></span></td>
- <td><code>sass// $red</code></td>
- <td><code>class// .red</code></td>
- </tr>
-<tr>
- <td><span class='swatch red-dark-bg'></span></td>
- <td><code>sass// $red-dark</code></td>
- <td><code>class// .red-dark</code></td>
- </tr>
-<tr><td colspan='3'> </td></tr>
-<tr>
- <td><span class='swatch gray-light-bg'></span></td>
- <td><code>sass// $gray-light</code></td>
- <td><code>class// .gray-light</code></td>
- </tr>
-<tr>
- <td><span class='swatch gray-bg'></span></td>
- <td><code>sass// $gray</code></td>
- <td><code>class// .gray</code></td>
- </tr>
-<tr>
- <td><span class='swatch gray-dark-bg'></span></td>
- <td><code>sass// $gray-dark</code></td>
- <td><code>class// .gray-dark</code></td>
- </tr>
-<tr><td colspan='3'> </td></tr>
-<tr>
- <td><span class='swatch yellow-light-bg'></span></td>
- <td><code>sass// $yellow-light</code></td>
- <td><code>class// .yellow-light</code></td>
- </tr>
-<tr>
- <td><span class='swatch yellow-bg'></span></td>
- <td><code>sass// $yellow</code></td>
- <td><code>class// .yellow</code></td>
- </tr>
-<tr>
- <td><span class='swatch yellow-dark-bg'></span></td>
- <td><code>sass// $yellow-dark</code></td>
- <td><code>class// .yellow-dark</code></td>
- </tr>
-<tr><td colspan='3'> </td></tr>
-</table>
-
- </div>
-
- <a name="buttons"></a>
- <div class="section">
-
- <h1>Buttons</h1>
-
- <p>Mix and match styles to make the right button, all colors are available as well.</p>
- <p><code><a href='#' class='uniform-btn'></a></code></p>
- <table class="table" cellspacing="0" cellpadding="0">
- <tr>
- <th></th>
- <th>Normal</th>
- <th><code>.green</code></th>
- </tr>
- <tr>
- <th></th>
- <td><a class="uniform-btn">Button</a></td>
- <td><a class="uniform-btn green">Button</a></td>
- </tr>
- <tr>
- <th><code>:hover</code> or <code>.hover</code></th>
- <td><a class="uniform-btn hover">Button</a></td>
- <td><a class="uniform-btn green hover">Button</a></td>
- </tr>
- <tr>
- <th><code>:active</code> or <code>.active</code></th>
- <td><a class="uniform-btn active">Button</a></td>
- <td><a class="uniform-btn green active">Button</a></td>
- </tr>
- <tr>
- <th><code>:disabled</code> or <code>.disabled</code></th>
- <td><a class="uniform-btn disabled">Button</a></td>
- <td><a class="uniform-btn green disabled">Button</a></td>
- </tr>
- <tr>
- <th><code>.subtle</code></th>
- <td><a class="uniform-btn subtle">Button</a></td>
- <td><a class="uniform-btn green subtle">Button</a></td>
- </tr>
- <tr>
- <th><code>.small</code></th>
- <td><a class="uniform-btn small">Button</a></td>
- <td><a class="uniform-btn green small">Button</a></td>
- </tr>
- <tr>
- <th><code>.large</code></th>
- <td><a class="uniform-btn large">Button</a></td>
- <td><a class="uniform-btn green large">Button</a></td>
- </tr>
- <tr>
- <th><code>.outline</code></th>
- <td><a class="uniform-btn outline">Button</a></td>
- <td><a class="uniform-btn green outline">Button</a></td>
- </tr>
- <tr>
- <th><code>.circle</code></th>
- <td><a class="uniform-btn circle">Button</a></td>
- <td><a class="uniform-btn green circle">Button</a></td>
- </tr>
- <tr>
- <th><code>.block</code></th>
- <td><a class="uniform-btn block">Button</a></td>
- <td><a class="uniform-btn green block">Button</a></td>
- </tr>
- </table>
-
- </div>
-
- <a name="grid"></a>
- <div class="section">
-
- <h1>Grid</h1>
-
- TODO
-
- </div>
-
- <a name="inputs"></a>
- <div class="section">
-
- <h1>Inputs</h1>
-
- <h3>Custom Inputs</h3>
- <div class="row">
- <div class="col-sm-6">
- <p>Styled Select Box
- <p><span class="uniform-select"><select><option>An Option</option></select></span></p>
- </div>
- <div class="col-sm-6">
-<pre><xmp><span class='uniform-select'>
- <select>
- <option>An Option</option>
- </select>
-</span></xmp></pre>
- </div>
- </div>
-
- <h3>Inline Inputs</h3>
- <p>Ever want to put in an input and it's label in line, and have it be 100% width responsive? Well, you can't, unless you use something like inline-input.</p>
- <div class="row">
- <div class="col-sm-6">
-
-
- <div class="inline-input">
- <span class="label">
- <label for="rate">$</label>
- </span>
- <span>
- <input id="rate">
- </span>
- <span class="units">
- <label for="rate">/hour</label>
- </span>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
- <span class="label">$</span>
- <span>
- <input id="name" placeholder="Jonathan Doe">
- </span>
- <span class="units">/hour</span>
-</div></xmp></pre>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-6">
- <div class="inline-input">
- <span class="label"><label for="car">Car Preference</label></span>
- <span class="select"><select id="car"><option>Tesla</option></select></span>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="inline-input">
- <span class="label">
- <label for="car">Car Preference</label>
- </span>
- <span>
- <select id="car"><option>Tesla</option></select>
- </span>
-</div></xmp></pre>
- </div>
- </div>
- <div class="row">
- <div class="col-sm-6">
- <div class="inline-input block">
- <span class="label">
- <label for="car">Car Preference</label>
- </span>
- <span>
- <input id="name" value="Jonathan Doe" disabled>
- </span>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="inline-input block">
- <span class="label">
- <label for="car">Car Preference</label>
- </span>
- <span>
- <input id="name" value="Jonathan Doe" disabled>
- </span>
-</div></xmp></pre>
- </div>
- </div>
-
- </div>
-
- <a name="forms"></a>
- <div class="section">
-
- <h1>Forms</h1>
-
- TODO
-
- </div>
-
- <a name="loaders"></a>
- <div class="section">
-
- <h1>Loaders</h1>
-
- <div class="row">
- <div class="col-sm-6">
- <div class="uniform-loader">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="uniform-loader">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
-</div></xmp></pre>
- </div>
+ <h3>Wrappers and Containers</h3>
+ <p>
+ Both <code>wrapper</code> and <code>container</code> can be used as class names
+ for an element that goes around a component. The difference is nuanced.
+ <code>wrapper</code> should be used to wrap a <strong>single</strong> element for a formatting purpose.
+ A <code>container</code> should be used to wrap <strong>multiple</strong> elements.
+ </p>
+
</div>
-<div class="row">
- <div class="col-sm-6">
- <span style="position:relative; display:inline-block">
- <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
- <div class="uniform-loader cover">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
- </div>
- </span>
- </div>
- <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
- <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
- <div class="uniform-loader cover">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
- </div>
-</span></xmp></pre>
- </div>
-</div>
-<div class="row">
- <div class="col-sm-6">
- <span style="position:relative; display:inline-block">
- <img src="https://unsplash.it/150/100/?random" style="display:inline-block;" width="150" height="100">
- <div class="uniform-loader cover light">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
- </div>
- </span>
- </div>
- <div class="col-sm-6">
-<pre><xmp><span style="position:relative; display:inline-block">
- <img src="https://unsplash.it/150/100/?random" style="display:inline-block;">
- <div class="uniform-loader cover light">
- <div class="uniform-loader-container">
- <span>•</span>
- <span>•</span>
- <span>•</span>
- </div>
- </div>
-</span></xmp></pre>
- </div>
-</div>
-
- </div>
-
- <a name="cards"></a>
- <div class="section">
-
- <h1>Cards</h1>
-
- <div class="row">
- <div class="col-sm-6">
- <div class="uniform-card">
- <div class="uniform-card-title">
- <span class="type">Sample Card</span>
- </div>
- <div class="uniform-card-body">Put Content In Here</div>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
- <div class="uniform-card-title">
- <span class="type">Sample Card</span>
- </div>
- <div class="uniform-card-body">Put Content In Here</div>
-</div></xmp></pre>
- </div>
-</div>
-<div class="row">
- <div class="col-sm-6">
- <div class="uniform-card">
- <div class="uniform-card-avatar">
- <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
- </div>
- <div class="uniform-card-container">
- <div class="uniform-card-title">
- <span class="type">John Dozer</span>
- <div class="actions">
- <a class="uniform-btn">Edit</a>
- </div>
- </div>
- <div class="uniform-card-body">
- <div class="uniform-card-attributes">
- <div>
- <div>Company</div>
- <div>Friendly Associates</div>
- </div>
- <div>
- <div>Title</div>
- <div>Head Dude</div>
- </div>
- <div>
- <div>Skills</div>
- <div>Stapling, Jogging</div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="uniform-card">
- <div class="uniform-card-avatar">
- <img src="https://unsplash.it/161/161/?random" style="display:block;" height="161" width="161">
- </div>
- <div class="uniform-card-container">
- <div class="uniform-card-title">
- <span class="type">John Dozer</span>
- <div class="actions">
- <a class="uniform-btn">Edit</a>
- </div>
- </div>
- <div class="uniform-card-body">
- <div class="uniform-card-attributes">
- <div>
- <div>Company</div>
- <div>Friendly Associates</div>
- </div>
- <div>
- <div>Title</div>
- <div>Head Dude</div>
- </div>
- <div>
- <div>Skills</div>
- <div>Stapling, Jogging</div>
- </div>
- </div>
- </div>
- </div>
-</div></xmp></pre>
- </div>
-</div>
-
- </div>
-
- <a name="tiles"></a>
- <div class="section">
-
- <h1>Tiles</h1>
-
- TODO
-
- </div>
-
- <a name="rows"></a>
- <div class="section">
-
- <h1>Rows</h1>
-
- TODO
-
- </div>
-
- <a name="lists"></a>
- <div class="section">
-
- <h1>Lists</h1>
-
- TODO
-
- </div>
-
- <a name="tables"></a>
- <div class="section">
-
- <h1>Tables</h1>
-
- TODO
-
- </div>
-
- <a name="nav"></a>
- <div class="section">
-
- <h1>Nav</h1>
-
- <div class="row">
- <div class="col-sm-6">
- <div class="uniform-nav horizontal main">
- <div class="pad">Logo</div>
- <div class="right">
- <div><a>Account</a></div>
- <div><a>Sign Out</a></div>
- </div>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="uniform-nav horizontal main">
- <div class="pad">Logo</div>
- <div class="right">
- <div><a>Account</a></div>
- <div><a>Sign Out</a></div>
- </div>
-</div></xmp></pre>
- </div>
-</div>
-<div class="row">
- <div class="col-sm-6">
- <div class="uniform-nav">
- <ul>
- <li><a>Account</a></li>
- <li><a>Sign Out</a></li>
- </ul>
- </div>
- </div>
- <div class="col-sm-6">
-<pre><xmp><div class="uniform-nav">
- <ul>
- <li><a>Account</a></li>
- <li><a>Sign Out</a></li>
- </ul>
-</div></xmp></pre>
- </div>
-</div>
-
- </div>
-
- <a name="tabs"></a>
- <div class="section">
-
- <h1>Tabs</h1>
-
- TODO
-
- </div>
-
- <a name="helpers"></a>
- <div class="section">
-
- <h1>Helpers</h1>
-
- TODO
-
- </div>
-
- </div>
- <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+</div>
+<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
+<script
+ src="https://code.jquery.com/jquery-1.11.3.min.js"
+ integrity="sha256-7LkWEzqTdpEfELxcZZlS6wAx5Ff13zZ83lYO2/ujj7g="
+ crossorigin="anonymous"></script>
+<script src="/site/preview.js"></script>
</body>
\ No newline at end of file