o-
Version:
A collection of functions, mixins, and placeholders for sass
210 lines • 6.14 kB
HTML
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>o- test suite</h1>
<div class="test">
<h2>o-checkbox</h2>
<div class="checkbox">
<input type="checkbox">
<label></label>
</div>
</div>
<div class="test">
<h2>o-radio</h2>
<div class="radio">
<input type="radio" name="r">
<label></label>
</div>
<div class="radio">
<input type="radio" name="r">
<label></label>
</div>
</div>
<div class="test">
<h2>o-generate-grid-classes</h2>
<div class="o-grid">
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
<div class="o-col-1">1</div>
</div>
<div class="o-grid">
<div class="o-col-2">2</div>
<div class="o-col-2">2</div>
<div class="o-col-2">2</div>
<div class="o-col-2">2</div>
<div class="o-col-2">2</div>
<div class="o-col-2">2</div>
</div>
<div class="o-grid">
<div class="o-col-3">3</div>
<div class="o-col-3">3</div>
<div class="o-col-3">3</div>
<div class="o-col-3">3</div>
</div>
<div class="o-grid">
<div class="o-col-4">4</div>
<div class="o-col-4">4</div>
<div class="o-col-4">4</div>
</div>
<div class="o-grid">
<div class="o-col-6">6</div>
<div class="o-col-6">6 </div>
</div>
<div class="o-grid">
<div class="o-col-7">7</div>
<div class="o-col-5">5</div>
</div>
<div class="o-grid">
<div class="o-col-8">8</div>
<div class="o-col-4">4</div>
</div>
<div class="o-grid">
<div class="o-col-9">9</div>
<div class="o-col-3">3</div>
</div>
<div class="o-grid">
<div class="o-col-10">10</div>
<div class="o-col-2">2 </div>
</div>
<div class="o-grid">
<div class="o-col-11">11</div>
<div class="o-col-1">1 </div>
</div>
</div>
<div class="test">
<h2>o-closest-md-color(o-random-color()) | o-size</h2>
<div class="rc rc-1"></div>
<div class="rc rc-2"></div>
<div class="rc rc-3"></div>
<div class="rc rc-4"></div>
<div class="rc rc-5"></div>
<div class="rc rc-6"></div>
<div class="rc rc-7"></div>
<div class="rc rc-8"></div>
<div class="rc rc-9"></div>
<div class="rc rc-10"></div>
<div class="rc rc-11"></div>
<div class="rc rc-12"></div>
<div class="rc rc-13"></div>
<div class="rc rc-14"></div>
<div class="rc rc-15"></div>
<div class="rc rc-16"></div>
<div class="rc rc-17"></div>
<div class="rc rc-18"></div>
<div class="rc rc-19"></div>
<div class="rc rc-20"></div>
<div class="rc rc-21"></div>
<div class="rc rc-22"></div>
<div class="rc rc-23"></div>
<div class="rc rc-24"></div>
<div class="rc rc-25"></div>
<div class="rc rc-26"></div>
<div class="rc rc-27"></div>
<div class="rc rc-28"></div>
<div class="rc rc-29"></div>
<div class="rc rc-30"></div>
<div class="rc rc-31"></div>
<div class="rc rc-32"></div>
<div class="rc rc-33"></div>
<div class="rc rc-34"></div>
<div class="rc rc-35"></div>
<div class="rc rc-36"></div>
<div class="rc rc-37"></div>
<div class="rc rc-38"></div>
<div class="rc rc-39"></div>
<div class="rc rc-40"></div>
<div class="rc rc-41"></div>
<div class="rc rc-42"></div>
<div class="rc rc-43"></div>
<div class="rc rc-44"></div>
<div class="rc rc-45"></div>
<div class="rc rc-46"></div>
<div class="rc rc-47"></div>
<div class="rc rc-48"></div>
<div class="rc rc-49"></div>
<div class="rc rc-50"></div>
<div class="rc rc-51"></div>
<div class="rc rc-52"></div>
<div class="rc rc-53"></div>
<div class="rc rc-54"></div>
<div class="rc rc-55"></div>
<div class="rc rc-56"></div>
<div class="rc rc-57"></div>
<div class="rc rc-58"></div>
<div class="rc rc-59"></div>
<div class="rc rc-60"></div>
<div class="rc rc-61"></div>
<div class="rc rc-62"></div>
<div class="rc rc-63"></div>
<div class="rc rc-64"></div>
<div class="rc rc-65"></div>
<div class="rc rc-66"></div>
<div class="rc rc-67"></div>
<div class="rc rc-68"></div>
<div class="rc rc-69"></div>
<div class="rc rc-70"></div>
<div class="rc rc-71"></div>
<div class="rc rc-72"></div>
<div class="rc rc-73"></div>
<div class="rc rc-74"></div>
<div class="rc rc-75"></div>
<div class="rc rc-76"></div>
<div class="rc rc-77"></div>
<div class="rc rc-78"></div>
<div class="rc rc-79"></div>
<div class="rc rc-80"></div>
<div class="rc rc-81"></div>
<div class="rc rc-82"></div>
<div class="rc rc-83"></div>
<div class="rc rc-84"></div>
<div class="rc rc-85"></div>
<div class="rc rc-86"></div>
<div class="rc rc-87"></div>
<div class="rc rc-88"></div>
<div class="rc rc-89"></div>
<div class="rc rc-90"></div>
<div class="rc rc-91"></div>
<div class="rc rc-92"></div>
<div class="rc rc-93"></div>
<div class="rc rc-94"></div>
<div class="rc rc-95"></div>
<div class="rc rc-96"></div>
<div class="rc rc-97"></div>
<div class="rc rc-98"></div>
<div class="rc rc-99"></div>
<div class="rc rc-100"></div>
</div>
<div class="test">
<h2>o-range</h2>
<input type="range">
<div class="range">
<input type="range">
</div>
</div>
<div class="test">
<h2>o-md-color</h2>
<p class="p1">some text</p>
<p class="p2">some text</p>
<p class="p3">some text</p>
</div>
<div class="test">
<h2>o-closest-md-color</h2>
<p class="p4">some text</p>
<p class="p5">some text</p>
<p class="p6">some text</p>
</div>
<div class="test">o-media | o-trickle
<div class="media">hello</div>
</div>
</body>