Design mit UIKIT

  • Ich möchte gerade mit den aktuellen UiKit 3.4 ein Design erstellen.


    Es soll 3 spaltig sein:


    Links 3/6 bzw 1/2 Breite soll ein Bild dargestellt werden.

    In der Mitte 2/6 der Text

    Rechts 1/6 eine Spalte mit kleinen Bildern.


    Ich habe es so gemacht:

    Code
    1. <div uk-grid>
    2. <div class="uk-width-1-2 uk-flex-first">GROSS</div>
    3. <div class="uk-width-2-6">Mitte</div>
    4. <div class="uk-width-1-6 uk-flex-last">KLEIN</div>
    5. </div>

    Ich bin eigentlich immer mit Bootstrap gut klargekommen und wollte mal was neues probieren.


    Er legt über JS an jeden Child Div ein "uk-first-column" mit an daher denke ich mal das es deswegen nicht nebeneinander angezeigt. wird

    Meine Frage daher:

    1. brauche ich einen uk-container
    2. was gibt es als Alternative zur "row" von Bootstrap
    3. oder muss ich mit anderen Komponenten arbeiten (Flex, usw)

    Derzeit bin ich gerade ein wenig überfragt. Weil er nicht so richtig es anordnen will.

  • Ok habe eine Lösung gefunden weil ich bei den rechten spalten darüber eine Menu wollte:


    Code
    1. <div uk-grid>
    2. <div class="uk-width-1-2 uk-visible@l">GROSS</div>
    3. <div class="uk-width-1-2@l uk-width-1-1@s" uk-grid>
    4. <div class="uk-width-3-4">Content</div>
    5. <div class="uk-width-1-4">KLEIN</div>
    6. </div>
    7. </div>

    Würde mich aber über Verbesserungsvorschlägen oder allgemeine Tipps dennoch freuen.

  • SPQRInc

    Approved the thread.