SmartGrid BBCode - 12er System

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • SmartGrid BBCode - 12er System

    30 Jul 2015 6

    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 zum Darstellen der Inhalte solche Grid-Systeme nutzen.

    Was macht ein Grid-System?
    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 dem entsprechend 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 daher visuell sehr gut. 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 Grid-System, das 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, setzt man den BBCode nur 2 Mal.

    Hier ein Beispiel:
    Spoiler anzeigen

    Quellcode

    1. [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]
    2. [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 nach einem etwas anderen System. Hier müssen die angegebenen 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 stärker die Möglichkeit, seinen Text zu individualisieren.

    Hier ein Beispiel:
    Spoiler anzeigen

    Quellcode

    1. [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, nutzt man einfach den Zusatz =old (also [ smartgrid=old ])
    • Beim SG muss man bei XX die Zahlen eintragen; beim alten System die Anzahl der Spalten, die man möchte, z.B. 4 (dann muss man das SG auch 4 Mal wiederholen), beim neuen System müssen die SG Zahlen im Smartgrid auf 12 kommen.


    Zum Abschluss jetzt nochmals ein Bild, wie es in einem laufenden Text aussieht:


    Ach ja, bevor nun jemand fragt: Ich weiß noch nicht, wann ich dazu komme den BBCode 100% fertigzustellen und zu veröffentlichen. ;)
    Gruß
    Jonas


    Hallo – Hello – Bonjour – Merhaba – Hei - Γεια σας – Hej – مرحبا – Halo – Olá – Hallå – здраво - ¡Hola
    #welcome #refugeeswelcome #statement

    3.974 mal gelesen

Kommentare 6