UiKit Pricing Table
Dieses Tutorial zeigt, wie man eine Preistabelle (pricing table) im UIKit framework erstellt.
!--
function popupPricingTable()
{
var breite=960;
var hoehe=660;
var positionX=((screen.availWidth / 2) - breite / 2);
var positionY=((screen.availHeight / 2) - hoehe / 2);
var url='../tutorials/pricingTable/index.html';
pop=window.open('','','fullscreen=1,toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=no,resizable=0,width='+breite+',height='+hoehe+',top=10000,left=10000');
pop.resizeTo(breite,hoehe);
pop.moveTo(positionX,positionY);
pop.location=url;
}
//-->
</script>
</code>
<p>Als erstes brauchen wir das Framework UIkit. Dieses können Sie sich <a target:"_blank" href="http://getuikit.com/" title="getuikit">hier</a> herunterladen. Ich nutze zum Zeitpunkt der Erstellung des Tutorials die Version 2.24.3.<br />Sollten Sie ein <a href="downloads/category/42-joomla-ab-v-3-0-templates.html" title="Joomla! Templates">Joomla!</a> oder Wordpress Template nutzen was UIKit schon implementiert hat, brauchen Sie das Framework nicht extra herunterzuladen.</p>
<p>Fangen wir an.<br />Stellen Sie sicher das folgende Dateien im Kopfbereich ihres Templates geladen werden:</p>
<pre xml:lang="html" lines="true"><html lang="de">
<head>
<link rel="stylesheet" href="css/uikit.min.css" />
<!-- Gradient style -->
<link rel="stylesheet" href="../uikit.gradient.min.css" />
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="../uikit.min.js"></script>
<!-- Grid Komponente -->
<script src="../grid.min.js"></script>
</head></pre>
<p class="uk-h3">1. Erstellen wir jetzt das Grundgerüst.</p>
<pre xml:lang="html" lines="true"><div class="uk-grid">
<div class="uk-width-1-1">
<div class="uk-block uk-block-primary uk-block-large">
<div class="uk-container uk-container-center">
<div class="uk-grid-width-small-1-1 uk-grid-width-medium-1-4" data-uk-grid>
<!-- hier folgen die Preistabellen -->
</div>
</div>
</div>
</div>
</div></pre>
<p>Erklärung:</p>
<ul class="uk-list uk-list-striped">
<li><span class="uk-text-bold">uk-width-1-1:</span> nutzt die gesammte verfügbare Breite / 100%</li>
<li><span class="uk-text-bold">uk-block-primary uk-block-large:</span> Block hintergrundfarbe, Außenabstände oben und unten</li>
<li><span class="uk-text-bold">uk-container uk-container-center:</span> zentrierter container</li>
<li><span class="uk-text-bold">uk-grid-width-small-1-1 uk-grid-width-medium-1-4:</span> ab einer Bildschirmgröße von 767px werden die 4 Preistabellen übernander angezeigt.</li>
<li><span class="uk-text-bold">data-uk-grid:</span> ermöglicht es Ihnen, eine dynamische Grid-Layout zu erstellen</li>
</ul>
<p class="uk-h3">2. Preistabellen erstellen.</p>
<pre xml:lang="html" lines="true"><div>
<div class="uk-panel uk-panel-box-secondary uk-panel-hover uk-text-center tm-panel tm-panel-shadow">
<div class="uk-panel-box-primary uk-panel-teaser">
<h1 class="uk-panel-space">STARTER</h1>
</div>
<div class="uk-border-circle tm-price">
<h2>Free</h2>
</div>
<ul class="uk-list uk-list-striped uk-text-bold">
<li>* Free *</li>
<li>* Free Templates *</li>
<li>* Profile Page *</li>
<li>* 2 months support *</li>
</ul>
<div class="uk-panel-box-primary uk-panel-space">
<div class="uk-animation-hover uk-animation-fade">
<a class="uk-button uk-button-primary uk-button-large uk-width-1-1" href="#">Buy</a>
</div>
</div>
</div>
</div></pre>
<p>Erklärung:</p>
<ul class="uk-list uk-list-striped">
<li>der erste Div-Container wird für das dynamische Grid-Layout verwendet</li>
<li><span class="uk-text-bold">uk-panel uk-panel-box-secondary uk-panel-hover uk-text-center tm-panel tm-panel-shadow:</span> UIKit verwendet Panele für bestimmte Abschnitte um Ihrer Inhalte zu umschließen und zu gestalten. Diese Panele nutze ich hier auch, zentriere den gesammten Text, erstelle ein hover effekt und verwende noch 2 weiter eigene CSS-Klassen: tm-panel tm-panel-shadow.</li>
<li><span class="uk-text-bold">uk-panel-box-primary uk-panel-teaser:</span> hintergrundfarbe, ein panel-teaser wird normalerweise für Bilder in Panelen genutzt ohne abstand zum außenrand</li>
<li><span class="uk-text-bold">uk-border-circle tm-price:</span> hier wird der Preis in einem Kreis dargestellt, eigene CSS-Klasse tm-price</li>
<li><span class="uk-text-bold">uk-list uk-list-striped uk-text-bold:</span> zusätliche infos für Ihre Besucher</li>
<li><span class="uk-text-bold">uk-animation-hover uk-animation-fade:</span> animierter Button</li>
</ul>
<p class="uk-h3">3. Eigenen CSS-Style.</p>
<pre xml:lang="css" lines="true">/* UIkit 2.24.3 | Pricing Tables | 3d-hobby-art.de */
/* Schriftgestaltung */
@import url(https://fonts.googleapis.com/css?family=Ubuntu);
html {
font: 400 14px/20px 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/* Panel mit "scale" effekt, maximaler weite in px */
.uk-panel.tm-panel {
transition: all 0.18s ease-in-out 0s;
max-width: 240px;
}
.uk-panel.tm-panel:hover {
transform: scale(1.03);
z-index: 3;
}
/* Panel-Teaser mit "border radius" */
.uk-panel-hover.tm-panel > .uk-panel-teaser {
-webkit-border-top-left-radius: 3px;
-webkit-border-top-right-radius: 3px;
-moz-border-radius-topleft: 3px;
-moz-border-radius-topright: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-top: -14px;
margin-left: -14px;
margin-right: -14px;
}
.uk-panel.tm-panel > :last-child {
margin-bottom: -14px;
margin-left: -14px;
margin-right: -14px;
}
/* http://www.paulund.co.uk/creating-different-css3-box-shadows-effects */
.tm-panel-shadow {
position:relative;
-moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.tm-panel-shadow:before, .tm-panel-shadow:after {
content:"";
position:absolute;
z-index:-1;
-moz-box-shadow:0 0 18px rgba(0,0,0,0.75);
-webkit-box-shadow:0 0 18px rgba(0,0,0,0.75);
box-shadow:0 0 18px rgba(0,0,0,0.75);
top:50%;
bottom:0;
left:10px;
right:10px;
border-radius:100px / 10px;
}
/* Preisgestaltung ;-) */
.tm-price {
width: 100px;
height: 100px;
border: 2px solid #EBF7FD;
margin: 0 auto;
}
.tm-price h2 {
font-size: 40px;
line-height: 100px;
}</pre>
<a id="resultat"></a>
<p>Das Resultat dieses Tutorials können Sie sich <a href="#resultat" onClick="popupPricingTable()">hier</a> anschauen. <br />Die Dateien zum nachvollziehen des Tutorials können Sie sich im <a href="downloads/tutorials.html">Download::Bereich</a> herunterladen.</p>'