Egyedi komponensek.

Összetettebb felületi elemek, amelyeket újra és újra használunk: kártyák, idővonal, árazó tábla, statisztika, profil. A szerkezetet a Bootstrap adja (rács, flex, utility osztályok), a megjelenést néhány saját, beszédes nevű osztály. A mintaadatok kitaláltak, de egymással egyeznek: a százalékok a számokból jönnek ki, a grafikonok aránya a feliratokat követi.

• újrahasználható szerkezet saját osztályokkal
• CSS-változók a közös színekhez
• egyszerű diagramok SVG-vel, szkript nélkül
• hozzáférhető állapotjelzés (nem csak színnel)

Három változat: képre írt kategóriacímkével és szerzői lábléccel; megforduló kártya, amelynek gombja fordítja (nem csak rámutatás, így érintőképernyőn és billentyűzettel is működik); és színátmenetes kártya statisztikával. A gombokra kattintva a szkript a kártya .fordult osztályát kapcsolja, a CSS pedig erre az osztályra fordítja meg a kártyát; a fókusz átkerül a látható oldal gombjára.

Az idővonal egy rendezett lista (<ol>): a sorrendnek jelentése van. A függőleges vonalat a lista ::before pszeudo-eleme rajzolja, a jelölők a vonalra kerülnek. Az állapotot szöveg és ikon is jelzi, nem csak a szín – így színtévesztő látogató is érti.

Három csomag egymás mellett (mobilon egymás alatt). A kiemelt csomagot nem csak a szín különbözteti meg: szalagcímke („Legnépszerűbb”) és nagyobb méret is. A nem elérhető szolgáltatásnál áthúzás és „nem” szövegű ikon jelzi a hiányt. Az árak magyar formátumban: szóköz az ezresek között.

Négy kártya, négyféle diagram – mindegyik szkript nélkül: oszlopok div-ekből (a magasság százalékban), körgyűrű SVG-ben (a stroke-dasharray a kitöltött ívhossz), vonaldiagram SVG polyline-nal, és két összehasonlító oszlop. A számok összeillenek: 13 978-ról 15 234 felhasználó = +1 256 = +9,0%; 45/60 feladat = 75%; 85 M Ft terv, 115 M Ft tény = +35,3%.

Három profilkártya ugyanarra a szerkezetre építve: fejléc (háttérszín vagy kép), kerek profilkép, név, szerep, címkék, számok és gombok. A profilkép a fejlécből „kilóg”: negatív felső margó (mt-n5 helyett saját osztály, mert a Bootstrap negatív margó-osztályai alapból ki vannak kapcsolva).

1. Készíts összehasonlító árazó táblát, amelyben a havi és az éves díj között kapcsolóval (form-switch) lehet váltani – az éves 15%-kal olcsóbb.
2. Bővítsd az idővonalat két ággal (két párhuzamos feladatsor), és mobilon egy oszlopba rendezd.
3. Készíts statisztikai kártyát saját adatokkal (pl. a csoportod jegyei): ellenőrizd, hogy a százalék tényleg kijön-e a számokból!
4. Készíts profilkártya-rendszert három méretben (kicsi, közepes, nagy), ugyanazokkal az osztályokkal.