coulis_campus

Arrabiata Styleguide

Format

kss-node ist nahezu kompatibel mit der KSS-Dokumentation. Aber der kss-Knoten kann sich nur auf einen Kommentar im Quellcode verlassen, da er die Markup: Direktive zur Anzeige des Sample Markups hat.

Hier ist ein Basisformat für die kss-Knoten-Dokumentation.

Erstellen Sie einen neuen Abschnitt.

/ / / Typografie
//
// Styleguide 1.

Grundlegende CSS-Dokumentation.

/*
Tasten

Die meisten Schaltflächen auf der Website sind aus der gleichen Basisklasse aufgebaut.


deaktiviert : - Lassen Sie die Schaltfläche so aussehen, dass sie sich so ändert, dass sie deaktiviert wird.


Markup:
<a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>

Styleguide 1.1
*/

.button {
  ...
}
.button:hover { {
  ...
}
.button:disabled { disabled {
  ...
}
.button.primary {
  ...
}

Kss-Node unterstützt auch CSS-Präprozessoren wie LESS, SASS und Stylus. Sie können den // Kommentarbereich zum Schreiben Ihres Dokuments verwenden.

/ / / Schaltflächen
//
// Die meisten Schaltflächen auf der Website sind aus der gleichen Basisklasse aufgebaut.
//

// Deaktiviert : - Lassen Sie die Schaltfläche so aussehen, dass sie sich so ändert, dass sie deaktiviert wird.
//.primär × × - Geben Sie an, dass die Schaltfläche das Hauptmerkmal dieses Formulars ist.
//
// Markup:
// <a href="#" class="button {$modifiers}">Link Button</a>
<button class="button {$modifiers}">Button Element</button>
//
// Styleguide 1.1
.button {
  ...
  & :hover {
    ...
  }
  deaktiviert {
    ...
  }
  .primary {
    ...
  }
}

Wie du in den obigen Beispielen siehst, hat der Kommentar zum kss-Knoten einige Blöcke. Von oben,

1. Titel des Elements
2. Beschreibung des Elements
3. Liste der Modifikatorklassen oder Pseudoklassen
4. HTML-Markup
5. Referenz auf die Position des Elements im Styleguide

Und jede Beschreibung unterstützt das Markdown-Schreiben.