UIKIT

Aktuelle Version vom 29.06.2021: 3.7.0
Achtung: Canvas-Navi wird in der aktuellen Version nicht korrekt dargestellt. Die Pfeile werden nicht via float:right rechts positioniert, sondern direkt hinter dem Navi-Namen.
Verwenden Sie hierzu die Version: 3.6.22.

Zum Changelog und Download

<form action="" method="post" class="uk-form-stacked uk-grid-small" uk-grid>

Input

<div class="uk-width-1-1">
   <input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>" placeholder="feldname">
</div>

Mehrspaltige Inputfelder 

<div class="uk-width-1-2@s uk-margin-small-top">
    <label class="uk-form-label" for="feldname">Name</label>
    <div class="uk-form-controls">
        <input class="uk-input" type="text" name="feldname" id="feldname" value="<?php echo $m1[feldname]; ?>">
    </div>
</div>

Textarea

<div class="uk-width-1-1 uk-margin-small-top">
<textarea name="feldname" rows="5" class="uk-textarea uk-form-small uk-resize-vertical" placeholder="feldname"><?php echo $m1[feldname]; ?></textarea>
</div>

Checkboxen

<div class="uk-width-1-2@s uk-margin-small-top">
<?php if ($m1[feldname]=="1") { $auswahl="checked"; } else { $auswahl=""; } 	?>
<label>
  <input class="uk-checkbox" type="checkbox" name="feldname" id="feldname" value="1" <?php echo $auswahl; ?>> Name
</label>
</div>  

Select

<div class="uk-width-1-2@s uk-margin-small-top">
    <label class="uk-form-label" for="feldname">Name</label>
    <div class="uk-form-controls">
        <select name="feldname" id="feldname" class="uk-select">
        </select> 
    </div>
</div>

Submit

<div class="uk-width-1-1">
<input type="hidden" name="act" value="ACTNAME">
<input type="hidden" name="variable" value="<?php echo $variable; ?>">
<input type="submit" value="speichern" class="uk-button uk-button-primary" tabindex="-1">
</div>

Um die Lesbarkeit auf kleineren Bildschirmen zu gewährleisten, sollten nicht zwingend benötigte Elemente ausgeblendet werden.
Mit UIkit bieten sich zwei Varianten an:

uk-visible@s
Element wird angezeigt, wenn das Browserfenster mindestens 640 Pixel breit ist.

uk-hidden@s
Element wird ausgeblendet, wenn das Browserfenster mindestens 640 Pixel breit ist.

Der Wert hinter @ gibt die Bildschirmbreite an:
s: >= 640px
m: >= 960px
l: >= 1200px;
xl: >= 1600px

Da mobile Geräte, wie z.B. das iPhone, lediglich 320 bis 375px aufweisen, ist die Nutzung nur dann sinnvoll,
wenn aus die Klassen uk-width-1-1 oder wk-width-1-2@s eingesetzt werden.

getuikit.com/docs/visibility

<div class="toggle1">
   <p>Diesen Bereich sofort anzeigen</p>
   <button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
      mehr ...
   </button>
</div>
<div class="toggle1" hidden>
   <p>Diesen Bereich bei Bedarf einblenden</p>
   <button class="uk-button uk-button-link" type="button" uk-toggle="target: .toggle1">
      ausblenden
   </button>
</div>

UIkit bietet mehrere Möglichkeiten, Boxen mit Schatten zu versehen.
Hier die schönsten Varianten.

Box shadow bottom

Auffälliger Schatten unterhalb der Box lässt das Element schweben.

<div class="uk-box-shadow-bottom uk-box-shadow-small uk-width-1-2@s uk-text-center">
    <div class="uk-background-default uk-padding-large">
        Box shadow bottom
    </div>
</div>

getuikit.com

Hover

Animation per Mouseover

<div class="uk-child-width-1-2@s uk-text-center" uk-grid>
  <div>
    <div class="uk-box-shadow-small uk-box-shadow-hover-large uk-padding">
    Small + Hover Large
    </div>
  </div>
  <div>
    <div class="uk-box-shadow-xlarge uk-box-shadow-hover-medium uk-padding">
    XLarge + Hover Medium
    </div>
  </div>
</div>