Grid-system

Vi benytter et tolv-spalters grid-system laget med CSS Grid til å utforme sidemaler. Grid-systemet har egne klasser for å endre layout på mobil og nett-brett, og dersom ingen egne klasser for mobil og nett-brett er satt, vil elementet automatisk falle tilbake til å dekke hele skjermens bredde.

Enkelt forklart

For å ta i bruk grid-systemet trenger du to ting:

Fremfor å benytte klasse-navn som sier hvor mange spalter et element skal dekke, benytter vi heller klasse-navn som sier hvilket forholdstall elementet dekker i forhold til containeren. Klasse-navnene du kan bruke er:

I tillegg kan du legge på -on-tablet og -on-mobile på slutten av et klasse-navn dersom det skal gjelde kun for nett-brett eller kun for mobil. Merk at dette ikke gjelder for alle klassene; se implementasjonen for detaljer.

Vanlig oppførsel er at grid elementer hopper en rad opp om det er plass, men om man ønsker at elementet skal forbli på raden den er så kan man bruke -fill-rest for å forandre strøelse men ikke posisjon


  <section class="grid">
    <div class="span-third span-half-on-tablet span-whole-on-mobile>
      <p>
        Jeg vises som en tredjedel av bredden til vanlig, halvparten av bredden 
        på nettbrett og hele bredden på mobil. Smart, hva?
      </p>
    </div>
  </section>



Grid konfigurasjoner

Span-whole behavoir

Help-text vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Help-text brukes.

PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.




Diifrent span behavoir

Help-text vises som ekstra info som brukeren kan vise/skjule.

Det er ønskelig å bruke denne minst mulig:

  • Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.
  • Dersom dette ikke lar seg gjøre kan Help-text brukes.

PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.

Jeg bekrefter ditten og datten


-fill-rest examples

<div class="grid" style="align-items: end;">
    <h2 class="span-whole">Span-whole behavoir</h2>

    <lk-input-block
        guid="spm1"
        input-name="spm1"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    ></lk-input-block>


    <lk-input-block
        guid="spm2"
        input-name="spm2"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    >

        <div slot="help-text">
            <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
            </ul>
        </div>

    </lk-input-block>


    <lk-input-block
        guid="spm3"
        input-name="spm3"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-whole"
    >

        <p slot="help-text">PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.</p>

    </lk-input-block>

    <lk-input-block
        guid="pid"
        input-name="pid"
        preset="personalid"
        class="span-whole"
    ></lk-input-block>

    <lk-input-block
        guid="orgid"
        input-name="orgid"
        preset="organisationid"
        class="span-whole"
    ></lk-input-block>

    <lk-input-block
        guid="datefrom"
        input-name="datefrom"
        label="Dato"
        input-type="date"
        min="2022-06-23"
        max="today"
        class="span-whole"
    ></lk-input-block>

    <br>
    <br>
    <br>

    <h2 class="span-whole">Diifrent span behavoir</h2>

    <lk-input-block
        guid="spm1"
        input-name="spm1"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-half"
    ></lk-input-block>


    <lk-input-block
        guid="spm2"
        input-name="spm2"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-half"
    >

        <div slot="help-text">
            <p>Help-text vises som ekstra info som brukeren kan vise/skjule.</p>
            <p>Det er ønskelig å bruke denne minst mulig:</p>
            <ul>
                <li>Målet burde alltid være at Label alene kommuniserer med klarhet hva som skal fylles ut.</li>
                <li>Dersom dette ikke lar seg gjøre kan Help-text brukes.</li>
            </ul>
        </div>

    </lk-input-block>


    <lk-input-block
        guid="spm3"
        input-name="spm3"
        label="Label teksten fungerer som felt-overksrifter"
        placeholder="Placeholder brukes som eksempel-input"
        required-message="Required-message vises hvis feltet er tomt etter at brukeren har markert feltet"
        error-message="Error-message vises om det er en feil i brukeren sin input"
        class="span-two-thirds"
    >

        <p slot="help-text">PS. Help-text "slotten" trenger ikke nødvendigvis å være en div.</p>

    </lk-input-block>

    <lk-input-block
        guid="pid"
        input-name="pid"
        preset="personalid"
        class="span-third"
    ></lk-input-block>

    <lk-input-block
        guid="orgid"
        input-name="orgid"
        preset="organisationid"
        class="span-quarter"
    ></lk-input-block>

    <lk-input-block
        guid="datefrom"
        input-name="datefrom"
        label="Dato"
        input-type="date"
        min="2022-06-23"
        max="today"
        class="span-quarter"
    ></lk-input-block>

    <lk-checkbox 
        class="span-half"
        required
    >
        Jeg bekrefter ditten og datten 
    </lk-checkbox>

    <lk-input-block
        class="span-sixth"
        guid="fullname"
        input-name="fullname"
        preset="fullname"
    >
    </lk-input-block>

    <lk-input-block
        class="span-sixth"
        guid="street"
        input-name="street"
        preset="street"
    >
    <!--
    preset="address"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-sixth"
        guid="postcode"
        input-name="postcode"
        preset="postcode"
    >
    <!--
    preset="postalcode"
    preset="zipcode"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-half"
        guid="postarea"
        input-name="postarea"
        preset="postarea"
    >
    <!--
    preset="postalarea"
    preset="ziparea"
    -->
    </lk-input-block>

    <br>
    <br>
    <br>

    <h2 class="span-whole">-fill-rest examples</h2>

    <lk-input-block
        class="span-half span-half-on-laptop span-half-on-tablet"
        guid="apartmentnumber"
        input-name="apartmentnumber"
        preset="apartmentnumber"
    >
    <!--
    preset="apartmentunitnumber"
    preset="propertyunitnumber"
    preset="dwellingnumber"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-half-fill-rest"
        guid="phone"
        input-name="phone"
        preset="phone"
    >
    <!--
    preset="phonenumber"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-third"
        guid="mob"
        input-name="mob"
        preset="mob"
    >
    <!--
    preset="mobile"
    preset="mobilenumber"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-third"
        guid="email"
        input-name="email"
        preset="email"
    >
    <!--
    preset="emailaddress"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-third-fill-rest"
        guid="pid"
        input-name="pid"
        preset="pid"
    >
    <!--
    preset="personalid"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-sixth"
        guid="orgid"
        input-name="orgid"
        preset="orgid"
    >
    <!--
    preset="organisationid"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-sixth"
        guid="account"
        input-name="account"
        preset="account"
    >
    <!--
    preset="account"
    preset="bankaccount"
    -->
    </lk-input-block>

    <lk-input-block
        class="span-sixth-fill-rest"
        guid="clubname"
        input-name="clubname"
        preset="clubname"
    >
    </lk-input-block>

</div>