Designsystem - 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:

En grid-container med klasse-navnet grid. Dette gjør at containeren får riktig display og layoutdeling. Typiske elementer du vil bruke her er blokk-elementer som <section> eller <div>.
En rekke elementer inne i grid-containeren med klasser som begynner med span- satt på seg.

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:

span-whole
span-three-quarters
span-two-thirds
span-half
span-third
span-quarter
span-sixth

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 eksempler

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.

<div class="grid" style="align-items: end;">
    <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>
</div>

Span-* eksempler

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

<div class="grid" style="align-items: end;">
    <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>
</div>

Fill-rest eksempler

<div class="grid" style="align-items: end;">
    <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>

No gap eksempler

grid--no-gap

grid--no-column-gap

grid--no-row-gap

<div class="grid grid--no-gap">
    <h3 class="small-title span-whole">grid--no-gap</h3>
    <lk-input-block
        guid="no-gap"
        input-name="no-gap"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-gap2"
        input-name="no-gap2"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-gap3"
        input-name="no-gap3"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-gap4"
        input-name="no-gap4"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
</div>

<div class="grid grid--no-column-gap">
    <h3 class="small-title span-whole">grid--no-column-gap</h3>
    <lk-input-block
        guid="no-column-gap"
        input-name="no-column-gap"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-column-gap2"
        input-name="no-column-gap2"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-column-gap3"
        input-name="no-column-gap3"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-column-gap4"
        input-name="no-column-gap4"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
</div>

<div class="grid grid--no-row-gap">
    <h3 class="small-title span-whole">grid--no-row-gap</h3>
    <lk-input-block
        guid="no-row-gap"
        input-name="no-row-gap"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-row-gap2"
        input-name="no-row-gap2"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-row-gap3"
        input-name="no-row-gap3"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
    <lk-input-block
        guid="no-row-gap4"
        input-name="no-row-gap4"
        label="Label teksten fungerer som felt-overksrifter"
        class="span-half"
    ></lk-input-block>
</div>