Komponens lista építés

Standard Komponens Lista (SCL) vs static sitebuild

A komponens alapú sitebuild esetén nem a kész sitebuild készül el először, hanem különálló, egymástól független komponensek, amikből utána össze lehet rakni egy kész sitebuild-et úgy, hogy a sitebuildnél már kizárólag

• a grid rendszer kelljen felépíteni, és egy-egy oszlopba berakni a megfelelő komponenseket
• a komponensek változó adatait (szöveg, kép, link url-ek, stb) kelljen szerkeszteni

Komponens lista építés célja

Ezzel a módszerrel egységes weblapot tudunk építeni, újrafelhasználható elemekkel.

Így grafikai és sitebuild időt és költségeket lehet csökkenteni, és nincs szükség grafikusra egy új oldal elkészítéséhez, a marketing manager is össze tudja ollózni pl Figma-ban.

A ConyCMS támogatja ezt a módszert a template specifikus css és js fájlok behívásával, a HTML sablonokkal, illetve a Landing Builder szerkesztővel.

Előfeltétel

• Kész design terv
  • Ránézésre jó design
  • Grafikai tervek ellenőrzése dokumentáció alapján
• Alap paraméterek rögzítése specifikáció formájában
  • távolságok
    • margin
    • padding
  • font méretek
  • sortávolságok
  • kép méretek
  • stb ...

Folyamat

1. Tervezés
   • Konkrét komponensek meghatározása a tervekből (ügyfelekkel egyeztetve, pl word dokumentumba kivagdosva a terv részletei)
   • Komponens lista elfogadtatás ügyféllel (ez jellemzően új weblap; cms-re migrálás esetén szükséges)
2. Fejlesztés
   • Minden komponensnek külön html-t nyitni (minden dependency-t, pl css, js-t be kell húzni. Ez arra jó, hogy könnyen kiderül, hogy van-e összeakadás komponensek css-ei között, plusz elkerülhetjük a kontextusfüggő komponens stílusozást)
     • Ezek a komponensek reszponzívak, minden méretben jó kell legyen a kinézetük (css).
     • Működés (js) még nem szükséges.
3. A grid rendszer (container, sidebar, TOC, etc..) nem komponensként készül, ezeket az adott oldalakhoz (pl.: Blog, főoldal, LP) készítjük el.
   • A komponensek beszórásra kerülnek az oldalak gridjeibe.

Fontos szabályok a fejlesztéshez

• HTML legyen a legrövidebb, törekedjünk rá a komponensek attribútum listája lehetőleg rövid legyen.
• CSS: komponenseket úgy érdemes megcsinálni, hogy a szülője 100% szélességét kitöltse, mert egy komponens egy jövőbeli design tervben nagyobb konténerben is meg tud jelenni
• A méretezések (pl margin: 16px, 32px, stb..) nem a bootstrap alap méretezésével való kompatibilitás miatt vannak betartva, hanem hogy ne kelljen mindig mindent egyesével külön megmérni pixel pontossággal a terveken

Komponensek meghatározása

Módszertanilag minden elemet komponensként kezelünk, és az adott elem gyerek elemeit is rekurzívan komponensekként kezeljük egészen az elemi egységekig (gomb, link, szöveg, kép, stb).

A gyakorlatban nem építünk így fel teljesen minden egyes komponens-t, hanem

1. felépítjük az elemi egységeket
   • gombok
   • linkek
   • szövegek
   • képek
   • fejlécek
   • űrlap elemek
   • grafikai elemek
   • stb …
2. felépítjük azokat a komponenseket, amik önállóan használhatók bármelyik oldalon
   • ezek tipikusan elemi egységekből ÉS különböző wrapper, illetve konténer elemekből állnak
3. bármilyen lista egy konkrét elemét mindig különálló komponensként kezeljük

Fontos, hogy a komponens listában szereplő komponenseket nem feltétlenül közvetlenül építjük be a ConyCMS-be, mint HTML sablon, hanem több komponensből kialakítunk egy összetettebb komponenst, és az kerül a CMS-be, mivel jelenleg a Landing Builder nem támogatja a komponensbe épített komponenseket.