Hallo,
ich habe heute mal an einem BBCode gearbeitet der zukünftig dafür sorgen soll, den Text besser einzuteilen. Man kennt die Systeme bereits von Webseiten, die nutzen häufiger zum darstellen der Inhalte solche Gridsysteme.
Was macht ein Grid System?
[Blocked Image: https://www.cls-design.com/index.php/Attachment/22014-grid-PNG/?thumbnail=1&s=1ae9f5d1d0ff756197f5e6d587072174d6964f80]Ein Grid System teilt die Seite in maximal 12 Spalten auf, die sich gleichmäßig über die Seite verteilen. Der Text oder der Inhalt der Box passen sich dementsprechend an. An dieser stelle sei erwähnt, ich bin mir gerade nicht wirklich sicher wie ich es am besten Beschreibe, ich glaube das Foto Rechts beschreibt es am besten. Ich habe mich bei der Entwicklung dazu entschlossen, auf ein 12 Grid zu gehen, damit man möglichst viele möglichkeiten als Endnutzer hat, den Text darzustellen.
Das GridSystem was ich erstellt habe kommt in 2 Varianten. Die eine Variante (Variante old) teilt den Text in abschnitte ein bzw. spalten. möchte man 12 Spalten setzt man 12 mal den BBCode möchte man nur 2 Spalten setzten man den BBCode nur 2 mal.
Hier ein Beispiel:
Quellcode
- [smartgrid=old][sg=2] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][sg=2] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][/smartgrid]
- [smartgrid=old][sg=4] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][sg=4] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][sg=4] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][sg=4] Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][/smartgrid]
Die zweite Variante (Variante new, Standardmäßig Aktiv!) arbeitet nac einem etwas anderen System. Hier müssen die Angegeben Zahlen der SG im SMARTGRID am Ende 12 ergeben. Ein Beispiel im smartgrid stehen folgende angaben sg=2; sg=3; sg=4; sg=3; dann ergibt dieses wenn man alle Zahlen addiert am Ende die Zahl 12. Bei dieser Methode hat man noch mehr die möglichkeit, seinen Text zu Personaliseren.
Hier ein Beispiel:
Quellcode
- [smartgrid=second][sg=2][sbox=rot]Lorem ipsum dolor sit amet, consetetur sadipscing elitr,[/sbox][/sg][sg=8]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.[/sg][sg=2]Lorem ipsum dolor sit amet, consetetur sadipscing elitr, [/sg][/smartgrid]
Aufbau des BBCodes
- Der BBCode sieht wie folgt aus [ smartgrid ] [ sg=XX ] text [ /sg ] [ /smartgrid ]
- Möchte man die alte Version nutzen man einfach den zusatz =old (also [ smartgrid=old ])
- Beim SG muss man beim XX die Zahlen eintragen beim Alten die Anzahl der Spalten die man möchte z.B. 4 (dann muss man das SG auch 4 mal wiederholen) beim Neuen müssen die SG Zahlen im Smartgrid auf 12 kommen.
Zum Abschluss jetzt nochmal ein Bild wie es im fließenden Text aussieht
[Blocked Image: https://www.cls-design.com/community/wcf/images/smilies/wink.png]
[Blocked Image: https://www.cls-design.com/index.php/Attachment/22013-beispieltext-PNG/?thumbnail=1&s=1ae9f5d1d0ff756197f5e6d587072174d6964f80]Achja und bevor nun jemand Fragt, ich weiß noch nicht wann ich dazu komme den BBCode 100% fertig zustellen und zu veröffentlichen.
Quelle: https://www.cls-design.com/blog/index.php…de-12er-System/