geschrieben von , Publiziert in Blog
Freitag, 05 Februar 2016 14:51
UiKit Pricing Table

UiKit Pricing Table

    Artikel bewerten
    (3 Stimmen)

    Dieses Tutorial zeigt, wie man eine Preistabelle (pricing table) im UIKit framework erstellt.

    Als erstes brauchen wir das Framework UIkit. Dieses können Sie sich hier herunterladen. Ich nutze zum Zeitpunkt der Erstellung des Tutorials die Version 2.24.3.
    Sollten Sie ein Joomla! oder Wordpress Template nutzen was UIKit schon implementiert hat, brauchen Sie das Framework nicht extra herunterzuladen.

    Fangen wir an.
    Stellen Sie sicher das folgende Dateien im Kopfbereich ihres Templates geladen werden:

    1. <html lang="de">
    2. <head>
    3. <link rel="stylesheet" href="css/uikit.min.css" />
    4. <!-- Gradient style -->
    5. <link rel="stylesheet" href="../uikit.gradient.min.css" />
    6. <!-- JQuery -->
    7. <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    8.  
    9. <script src="../uikit.min.js"></script>
    10.  
    11. <!-- Grid Komponente -->
    12. <script src="../grid.min.js"></script>
    13. </head>

    1. Erstellen wir jetzt das Grundgerüst.

    1. <div class="uk-grid">
    2. <div class="uk-width-1-1">
    3. <div class="uk-block uk-block-primary uk-block-large">
    4. <div class="uk-container uk-container-center">
    5. <div class="uk-grid-width-small-1-1 uk-grid-width-medium-1-4" data-uk-grid>
    6. <!-- hier folgen die Preistabellen -->
    7. </div>
    8. </div>
    9. </div>
    10. </div>
    11. </div>

    Erklärung:

    • uk-width-1-1: nutzt die gesammte verfügbare Breite / 100%
    • uk-block-primary uk-block-large: Block hintergrundfarbe, Außenabstände oben und unten
    • uk-container uk-container-center: zentrierter container
    • uk-grid-width-small-1-1 uk-grid-width-medium-1-4: ab einer Bildschirmgröße von 767px werden die 4 Preistabellen übernander angezeigt.
    • data-uk-grid: ermöglicht es Ihnen, eine dynamische Grid-Layout zu erstellen

    2. Preistabellen erstellen.

    1. <div>
    2. <div class="uk-panel uk-panel-box-secondary uk-panel-hover uk-text-center tm-panel tm-panel-shadow">
    3. <div class="uk-panel-box-primary uk-panel-teaser">
    4. <h1 class="uk-panel-space">STARTER</h1>
    5. </div>
    6. <div class="uk-border-circle tm-price">
    7. <h2>Free</h2>
    8. </div>
    9. <ul class="uk-list uk-list-striped uk-text-bold">
    10. <li>* Free *</li>
    11. <li>* Free Templates *</li>
    12. <li>* Profile Page *</li>
    13. <li>* 2 months support *</li>
    14. </ul>
    15. <div class="uk-panel-box-primary uk-panel-space">
    16. <div class="uk-animation-hover uk-animation-fade">
    17. <a class="uk-button uk-button-primary uk-button-large uk-width-1-1" href="#">Buy</a>
    18. </div>
    19. </div>
    20. </div>
    21. </div>

    Erklärung:

    • der erste Div-Container wird für das dynamische Grid-Layout verwendet
    • uk-panel uk-panel-box-secondary uk-panel-hover uk-text-center tm-panel tm-panel-shadow: 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.
    • uk-panel-box-primary uk-panel-teaser: hintergrundfarbe, ein panel-teaser wird normalerweise für Bilder in Panelen genutzt ohne abstand zum außenrand
    • uk-border-circle tm-price: hier wird der Preis in einem Kreis dargestellt, eigene CSS-Klasse tm-price
    • uk-list uk-list-striped uk-text-bold: zusätliche infos für Ihre Besucher
    • uk-animation-hover uk-animation-fade: animierter Button

    3. Eigenen CSS-Style.

    1. /* UIkit 2.24.3 | Pricing Tables | 3d-hobby-art.de */
    2.  
    3. /* Schriftgestaltung */
    4. @import url(https://fonts.googleapis.com/css?family=Ubuntu);
    5.  
    6. html {
    7. font: 400 14px/20px 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
    8. }
    9.  
    10. h1, h2, h3, h4, h5, h6 {
    11. font-family: 'Ubuntu', "Helvetica Neue", Helvetica, Arial, sans-serif;
    12. }
    13.  
    14. /* Panel mit "scale" effekt, maximaler weite in px */
    15. .uk-panel.tm-panel {
    16. transition: all 0.18s ease-in-out 0s;
    17. max-width: 240px;
    18. }
    19.  
    20. .uk-panel.tm-panel:hover {
    21. transform: scale(1.03);
    22. z-index: 3;
    23. }
    24.  
    25. /* Panel-Teaser mit "border radius" */
    26. .uk-panel-hover.tm-panel > .uk-panel-teaser {
    27. -webkit-border-top-left-radius: 3px;
    28. -webkit-border-top-right-radius: 3px;
    29. -moz-border-radius-topleft: 3px;
    30. -moz-border-radius-topright: 3px;
    31. border-top-left-radius: 3px;
    32. border-top-right-radius: 3px;
    33. margin-top: -14px;
    34. margin-left: -14px;
    35. margin-right: -14px;
    36. }
    37.  
    38. .uk-panel.tm-panel > :last-child {
    39. margin-bottom: -14px;
    40. margin-left: -14px;
    41. margin-right: -14px;
    42. }
    43.  
    44.  
    45. /* http://www.paulund.co.uk/creating-different-css3-box-shadows-effects */
    46. .tm-panel-shadow {
    47. position:relative;
    48. -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    49. -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    50. box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
    51. }
    52. .tm-panel-shadow:before, .tm-panel-shadow:after {
    53. content:"";
    54. position:absolute;
    55. z-index:-1;
    56. -moz-box-shadow:0 0 18px rgba(0,0,0,0.75);
    57. -webkit-box-shadow:0 0 18px rgba(0,0,0,0.75);
    58. box-shadow:0 0 18px rgba(0,0,0,0.75);
    59. top:50%;
    60. bottom:0;
    61. left:10px;
    62. right:10px;
    63. border-radius:100px / 10px;
    64. }
    65.  
    66. /* Preisgestaltung ;-) */
    67. .tm-price {
    68. width: 100px;
    69. height: 100px;
    70. border: 2px solid #EBF7FD;
    71. margin: 0 auto;
    72. }
    73.  
    74. .tm-price h2 {
    75. font-size: 40px;
    76. line-height: 100px;
    77. }

    Das Resultat dieses Tutorials können Sie sich hier anschauen.
    Die Dateien zum nachvollziehen des Tutorials können Sie sich im Download::Bereich herunterladen.

    Schreibe einen Kommentar

    neueste Downloads

      01.09.2017
      07.05.2016

    Zufallsbild

    3d-hobby-art.de Logo

    Sprache