Oletusteeman CSS-gridi

Perusteet

CSS-gridi koostuu container-elementistä, jonka sisään sijoitetaan rinnakkaisia palstoja. Palstojen maksimimäärä containerissa on oletusarvoisesti 12, mutta määrää on mahdollista muokata SASS-tyyleissä.

Elementin palstaleveys määritellään antamalla sille luokkanimiä, jotka kertovat, kuinka monen palstan levyinen elementti on milläkin ikkunan leveydellä.

Alla näet malliksi yksinkertaisen griditoteutuksen:

<div class="Container">
	<div class="Grid">
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
		<div class="Col-Mobile-12-12 Col-Tablet-4-12"></div>
	</div>
</div>

Yllä oleva merkkaus tuottaisi siis kolme palstaa, jotka vievät mobiilikoossa koko containerin leveyden (12 palstaa) ja tablettikoosta ylöspäin kolmasosan containerin leveydestä (4/12).

Oletusteema sisältää kolme erilaista CSS-gridiä eri tarkoituksia varten. Nämä ovat:

• Tavallinen CSS-gridi
• GridList: tuotelistojen muotoiluun suunniteltu gridi, jossa elementit voidaan latoa useaan riviin.
• Flex-gridi: gridi jossa elementit vievät oletuksena vain tarvitsemansa tilan.

Gridin breakpointit

Tavallisen CSS-gridin breakpointit määrittävät gridin palstojen koon riippuen näyttökoosta. Gridi sisältää oletusarvoisesti seuraavat breakpointien luokkanimet:

/* 0px–600px */
.Col-Mobile-*-12

/* 601px–800px */
.Col-Mobile-Wide-*-12

/* 801px–1024px */
.Col-Tablet-*-12

/* 1025px–1200px */
.Col-Desktop-*-12

Jokaisessa luokkanimessä määritellään lopussa (*-merkin kohdalla) palstojen määrä kyseisellä ikkunan koolla ja lopussa palstojen maksimimäärä.

Esimerkiksi .Col-Tablet-6-12 määrittää että elementti vie puolet (6/12) containerin leveydestä tablettikoossa. Jos elementille ei anneta desktop-kokoa, tablettikoko on käytössä myös desktop-leveyksillä.

Push/pull-luokat

CSS-gridin push/pull-luokkien avulla voit vaihtaa elementtien järjestystä ikkunan koon perusteella. Nämä luokat nimensä mukaisesti joko työntävät elementtejä oikealle tai vetävät niitä vasemmalle muuttaen niiden esitysjärjestystä näytöllä.

Push/pull-luokkien avulla voidaan samalla muuttaa elementtien kokoa eri ikkunan leveyksillä.

Alla näet esimerkin push/pull-luokkien käytöstä:

<div class="Container">
	<div class="Grid">
		<div class="Col-Mobile-12 Col-Tablet-Push-6-12"></div>
		<div class="Col-Mobile-12 Col-Tablet-Pull-6-12"></div>
	</div>
</div>

Mobiilikoossa elementit vievät 100 % containerin leveydestä, jolloin ne esitetään päällekkäin. Tablettikoossa otetaan käyttöön push/pull-luokat, jolloin palstat muuttuvat 50 %:n levyisiksi.

Elementti .Col-Tablet-Pull-6-12 vedetään vasemmalle ja elementti .Col-Tablet-Push-6-12 työnnetään oikealle. Huomaa että tablettikoon push/pull-järjestys on käytössä kaikille ikkunan leveyksille tablettikoosta ylöspäin, vaikka määrittäisit elementeille oman koon desktop-leveyksillä.

Gridilista

Verkkokaupan tuotelistojen muotoilu on hankalaa tavallisen CSS-gridin avulla, koska jos tuotelistan elementtien korkeudet vaihtelevat, niiden järjestys listalla menee sekaisin. Tätä varten MyCashflow'n oletusteemassa on GridList-komponentti. Gridilistan avulla voit latoa gridin palstoja useaan riviin.

.GridList
/*
* Listaelementtien leveydet:
* - Oletus 20 %
* - Mobile: 50 %
* - Tablet: 33.33 %
* - Desktop: 25 %
*
* Mobile-, Tablet- ja Desktop-näyttökokojen leveydet
* ovat yhteisiä kaikille listatyypeille
*/

.GridList-Wide
/*
* Listaelementtien leveydet:
* - Oletus 16.66 %
*/

.GridList-Narrow
/*
* Listaelementtien leveydet:
* - Oletus 25 %
*/

Jos haluat luoda leveän tai kapean gridilistan, sinun pitää lisätä listan containerille sekä pohjaluokka että tarkentava luokka, esim. <div class="GridList GridList-Wide"></div>.

Tuotelistoilla gridilistaa voitaisiin käyttää esimerkiksi seuraavasti:

{Products(
    before: '
        <h2>Tuotteita</h2>
        <ul class="GridList GridList-Wide">
    ',
    helper: {{
        <li class="ListItem">
            {ProductName}
            {ProductListImage}
            {ProductShortDesc}
        </li>
    }},
    after: '</ul>'
)}

Näin saadaan aikaan gridilista, jonka elementit ovat oletuksena 16.66 % -leveitä, ja skaalautuvat eri ikkunan leveyksille GridList-luokan kokojen mukaan.

Flex-gridi

Flex-gridi eroaa toiminnaltaan tavallisesta ja listagridistä. Siinä gridin palstat vievät oletusarvoisesti vain niin paljon tilaa, kuin ne tarvitsevat, eikä niille määritellä ennalta leveyttä. Lisäluokilla elementit voidaan myös saada käyttämään niin paljon tilaa, kuin rivillä on saatavilla.

Flex-gridin container-elementille annetaan luokka Flex. Gridin palstat taas merkitään luokalla FlexItem. Alla esimerkki:

<div class="Container">
	<div class="Flex">
		<div class="FlexItem"></div>
		<div class="FlexItem"></div>
	</div>
</div>

Esimerkin kaksi palstaa asettuvat vierekkäin ja ne vievät vaakasuunnassa niin paljon tilaa, kuin niiden sisältö vaatii. FlexItem-Grow-luokalla palstat saadaan venymään ottamaan kaikki mahdollinen tila:

<div class="Container">
	<div class="Flex">
		<div class="FlexItem FlexItem-Grow"></div>
		<div class="FlexItem FlexItem-Grow"></div>
	</div>
</div>

Nyt molemmat elementit vievät 50 % leveydestä, koska containerin kokonaisleveys jaetaan kahden elementin kesken. Jos elementtejä olisi kolme, jokainen niistä veisi 33.33 % leveydestä, jne.

Lisäksi Flex-gridissä on spacer-elementti .FlexSpacer, joka vie kaiken käytössä olevan tilan kahden .FlexItem-elementin välissä:

<div class="Container">
	<div class="Flex">
		<div class="FlexItem"></div>
		<div class="FlexSpacer"></div>
		<div class="FlexItem"></div>
	</div>
</div>

Tällöin esimerkin kaksi .FlexItem-elementtiä vievät vain sen verran leveyttä, kuin niiden sisältö vaatii. Väliin sijoitettu .FlexSpacer taas vie kaiken jäljelle jäävän tilan niiden välistä, jolloin sisällöt asettuvat containerin vastakkaisiin reunoihin.

Lopuksi gridiin kuuluu vielä luokka Flex-Collapse, joka pakottaa mobiilikoossa elementin viemään 100 % containerin leveydestä. Luokka annetaan flex-elementtien containerille:

<div class="Container">
	<div class="Flex Flex-Collapse">
		<div class="FlexItem"></div>
		<div class="FlexItem"></div>
	</div>
</div>

Tässä esimerkissä molemmat .FlexItem-elementit asettuvat mobiilikoossa päällekkäin (molemmat vievät 100 % leveydestä) ja suuremmilla näytöillä ne käyttäytyvät samoin kuin .FlexItem normaalisti.

Apuluokat

Oletusteema sisältää responsiivisia apuluokkia, joiden avulla voit piilottaa valittuja elementtejä kokonaan halutuilla näytönleveyksillä:

• .Hide-Desktop piilottaa elementin työpöytäkoossa
• .Hide-Tablet piilottaa elementin tablettikoossa
• .Hide-Mobile piilottaa elementin mobiilikoossa

Gridin käyttäminen omissa SASS-tyyleissä

Voit käyttää oletusteeman tavallista CSS-gridiä osana omia SASS-tyylejäsi. Näin voit esimerkiksi tehdä gridin palstoja elementeistä, joiden luokkanimiin sinulla ei ole mahdollisuutta vaikuttaa.

.TargetElement {
    @extend .Grid;
    
    .Child-1, .Child-2 {
        @extend .Col-6-12;
    }

    .Child-1 {
        @extend .Col-Tablet-4-12;
    }
    
    .Child-2 {
        @extend .Col-Tablet-8-12;
    }
}

Esimerkissä käytetään oletusteeman gridiluokkia tekemään .TargetElement-elementin kahdesta lapsesta oletusarvoisesti 6 gridipalstan levyisiä. Tablettikoossa ensimmäinen muuttuu 4-palstaa leveäksi ja toinen 8.

Huomaa että parent-elementille annetaan luokka .Container, jolloin kelluvat lapsielementit eivät karkaa sen sisältä.

Voit käyttää myös Flex-gridiä SASS-tyyleissä:

.TargetElement {
    @extend .Flex;
    
    .Child-1, .Child-2 {
        @extend .FlexItem;
    }
}

Yllä lapsielementeistä tehdään flex-palstoja käyttämällä oletusteeman FlexItem-luokkaa. Voit käyttää myös teeman flex()-mixiniä samaan tarkoitukseen:

.TargetElement {
    @extend .Flex;
    
    .Child-1, .Child-2 {
        @include flex(1);
    }
}

Anna flex()-mixinille arvoksi mikä tahansa CSS:n flex-tyylin hyväksymistä arvoista.

Gridin muokkaaminen

Voit muokata CSS-gridiä sopimaan oman teemasi tarpeisiin oletusteeman SASS-tyylien avulla. /styles/scss/common/_variables.scss-tiedostosta löydät muuttujia, joita käsittelemällä voit tehdä helposti muutoksia gridiin.

Voit esimerkiksi muuttaa gridin maksimileveyttä $container-max-width-muuttujalla.

Myös gridin oletusarvoisten breakpointien muuttaminen on mahdollista. Tämä on hyödyllistä esimerkiksi jos haluat että mobiilinäkymä tulee käyttöön jo leveämmille näytöille. Breakpointit määritellään seuraavien muuttujien avulla:

• $breakpoint-desktop
• $breakpoint-tablet
• $breakpoint-mobile-wide
• $breakpoint-mobile