kafein
Version:
Caffeine is a set of SASS mixins and functions ready use for projects.
228 lines (199 loc) • 5.8 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<title>Caffeine Function & Mixin tests</title>
<meta name="viewport" content="initial-scale=1, width=device-width">
<link rel="stylesheet" href="tests.css" />
<style>
.page-wrap { width: 960px; padding: 50px 0; margin: 0 auto; }
pre { padding: 1em; border: 1px solid #eee; border-radius: 3px; background-color: #fafafa; }
.tests { padding-bottom: 2em; margin-bottom: 2em; border-bottom: 1px solid #eee; }
.tests:last-child { padding-bottom: 0; border-bottom: 0; }
.test { position: relative; margin-top: 1em; }
.test:first-child { margin-top: 0; }
textarea,
input:not([type="checkbox"]),
input:not([type="radio"]) {
min-width: 25em;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.centering {
position: relative;
width: 100%;
height: 150px;
background: #fafafa;
}
</style>
</head>
<body>
<div id="wrapper" class="page-wrap">
<h1 class="test-title"><a href="http://github.com/bcinarli/caffeine">Caffeine</a> Tests</h1>
<section class="tests">
<h2 class="tests-heading">CSS3 Mixins</h2>
<article class="test">
<h3 class="test-heading">Box Shadow</h3>
<pre>
.box-shadow {
@include box-shadow(0 0 1px rgba(0, 0, 0, .3));
}
</pre>
<p class="single-test box-shadow">
This paragraph will have a <code>0 0 1px</code> with 30% transparent black
</p>
</article>
<article class="test">
<h3 class="test-heading">Transform</h3>
<pre>
.transform-rotate {
@include transform(rotate(15deg));
}
.transform-skew {
@include transform(skew(15deg));
}
</pre>
<p class="single-test">
<span class="transform-rotate">This box is rotated 15deg</span>
</p>
<p> </p>
<p class="single-test">
<span class="transform-skew">This box is skewed 15deg</span>
</p>
</article>
<article class="test">
<h3 class="test-heading">Transition</h3>
<pre>
.transition-size,
.transition-radius {
@include transition(all ease .4s);
}
</pre>
<p class="single-test">
<span class="transition-size">This box will resize on mouse enter</span>
</p>
<p> </p>
<p class="single-test">
<span class="transition-radius">This box's radius will change on mouse enter</span>
</p>
</article>
<article class="test">
<h3 class="test-heading">Linear Gradient</h3>
<pre>
.linear-gradient {
@include linear-gradient(to bottom, #ccc, #999);
}
</pre>
<p class="single-test linear-gradient"></p>
</article>
<article class="test">
<h3 class="test-heading">Radial Gradient</h3>
<pre>
.radial-gradient {
@include radial-gradient(ellipse at center, #ccc, #999, #222);
}
</pre>
<p class="single-test radial-gradient"></p>
</article>
</section>
<section class="tests">
<h2 class="tests-heading">Position Mixins</h2>
<article class="test">
<h3 class="test-heading">Center</h3>
<pre>
.center {
@include center();
}
</pre>
<p class="single-test centering">
<span class="center">This element should be centered both vertical and horizontal</span>
</p>
</article>
<article class="test">
<h3 class="test-heading">Vertical Center</h3>
<pre>
.center-vertical {
@include center-vertical();
}
</pre>
<p class="single-test centering">
<span class="center-vertical">This element should be centered vertically</span>
</p>
</article>
<article class="test">
<h3 class="test-heading">Horizontal Center</h3>
<pre>
.center-horizontal {
@include center-horizontal();
}
</pre>
<p class="single-test centering">
<span class="center-horizontal">This element should be centered horizontally</span>
</p>
</article>
</section>
<section class="tests">
<h2 class="tests-heading">Text Mixins</h2>
<article class="test">
<h3 class="test-heading">Font Size</h3>
<pre>
.font-size {
@include font-size(14px);
}
</pre>
<p class="single-test font-size">This text should have both REM font unit and PX fallback<p>
</article>
</section>
<section class="tests">
<h2 class="tests-heading">Form Related Mixins</h2>
<article class="test">
<h3 class="test-heading">Placeholder</h3>
<pre>
.placeholder {
@include placeholder {
font-style: italic;
}
}
</pre>
<p class="single-test"><input placeholder="This is default browser style" /></p>
<p class="single-test"><input placeholder="Styled placeholder" class="placeholder" /></p>
<p class="single-test"><textarea placeholder="Styled placeholder" class="placeholder"></textarea></p>
</article>
</section>
<section class="tests">
<h2 class="tests-heading">Other Mixins</h2>
<article class="test">
<h3 class="test-heading">CSS Arrows</h3>
<pre>
.arrow-top {
@include arrow(lightblue, 10px);
}
.arrow-right {
@include arrow(olive, 10px, right);
}
.arrow-bottom {
@include arrow(turquoise, 10px, bottom);
}
.arrow-left {
@include arrow(yellow, 10px, left);
}
</pre>
<div style="position: relative; height: 20px;">
<p class="single-test"><span class="arrow-top"></span></p>
<p class="single-test"><span class="arrow-right"></span></p>
<p class="single-test"><span class="arrow-bottom"></span></p>
<p class="single-test"><span class="arrow-left"></span></p>
</div>
<pre>
.bordered-arrow {
@include arrow(lightblue navy, 10px 12px);
}
</pre>
<p class="single-test"><span class="bordered-arrow"></span></p>
<p><em>Because of size, position issues, you have to position arrows manually</em></p>
</article>
</section>
</div>
</body>
</html>