Bearbeiten von „CKEditor - Snippets“

== Snippets für Stildefinitionen in mystyles.js ==
Hier eine Auswahl von Stilen die man immer wieder brauchen kann. Zum Teil mit den passenden Klassen für uiKit.


'''Bilder'''
<syntaxhighlight lang="javascript">
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } },
{ name: 'Bild kein Abstand unten', element: 'img', attributes: { 'class': 'nmb npb'}},
{ name: 'Bild kein Abstand links', element: 'img', attributes: { 'class': 'nml npl'}},
{ name: 'Bild kein Abstand', element: 'img', attributes: { 'class': 'nm np'}},
</syntaxhighlight>

'''Tabelle'''
<syntaxhighlight lang="javascript">
</syntaxhighlight>

'''Textblöcke und Überschriften'''
<syntaxhighlight lang="javascript">
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } },
{ name: 'Textblock - M', element: 'div', attributes: { 'class': 'uk-width-medium' } },
{ name: 'Textblock - L', element: 'div', attributes: { 'class': 'uk-width-large' } },
{ name: 'Textblock - XL', element: 'div', attributes: { 'class': 'uk-width-xlarge' } },
{ name: 'Zweispalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s' } },
{ name: 'Dreipalter', element: 'div', attributes: { 'class': 'uk-column-1-2@s uk-column-1-3@m' } },
{ name: 'Autocol', element: 'div', attributes: { 'class': 'autocol' } },
{ name: 'H2 Extra Bold', element: 'h2', attributes: { 'class': 'extra-bold' } },
{ name: 'H2 kein Abstand unten', element: 'h2', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'H3 kein Abstand unten', element: 'h3', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'H4 kein Abstand unten', element: 'h4', attributes: { 'class': 'uk-margin-remove-adjacent uk-margin-remove-bottom' } },
{ name: 'H2 Abstand unten', element: 'h2', attributes: { 'class': 'extra-margin-bottom' } },
{ name: 'H3 Abstand unten', element: 'h3', attributes: { 'class': 'extra-margin-bottom' } },
</syntaxhighlight>

Buttons
<syntaxhighlight lang="javascript">
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } },
{ name: 'Primary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-primary' } },
{ name: 'Secondary Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-secondary' } },
</syntaxhighlight>

Textauszeichnungen
<syntaxhighlight lang="javascript">
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } },
{ name: 'Groß (UIkit)', element: 'span', attributes: { 'class': 'uk-text-large' } },
{ name: 'Kleinbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-lowercase' } },
{ name: 'Großbuchstaben (UIkit)', element: 'span', attributes: { 'class': 'uk-text-uppercase' } },
{ name: 'Kapitälchen (UIkit)', element: 'span', attributes: { 'class': 'uk-text-capitalize' } },
{ name: 'Klein', element: 'small' },
{ name: 'Gel&ouml;scht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
</syntaxhighlight>

Farben
<syntaxhighlight lang="javascript">
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } },
{ name: 'Farbe: Dunkel (UIkit)', element: 'span', attributes: { 'class': 'uk-dark' } },
{ name: 'Farbe: Muted (UIkit)', element: 'span', attributes: { 'class': 'uk-text-muted' } },
{ name: 'Farbe: Primär (UIkit)', element: 'span', attributes: { 'class': 'uk-text-primary' } },
{ name: 'Farbe: Erfolg (UIkit)', element: 'span', attributes: { 'class': 'uk-text-success' } },
{ name: 'Farbe: Warnung (UIkit)', element: 'span', attributes: { 'class': 'uk-text-warning' } },
{ name: 'Farbe: Gefahr (UIkit)', element: 'span', attributes: { 'class': 'uk-text-danger' } },
</syntaxhighlight>

Sonstiges
<syntaxhighlight lang="javascript">
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } },
/*{ name: 'Heading Line', element: 'h3', attributes: { 'class': 'uk-heading-line' } },
{ name: 'Heading Bullet', element: 'h3', attributes: { 'class': 'uk-heading-bullet' } },*/
{ name: 'Dropcap', element: 'div', attributes: { 'class': 'uk-dropcap' } },
{ name: 'Liste', element: 'ul', attributes: { 'class': 'uk-list uk-list-bullet'}},
{ name: 'Liste gestreift', element: 'ul', attributes: { 'class': 'uk-list uk-list-striped'}},
{ name: 'Bilderreihe', element: 'div', attributes: { 'class': 'image-row'}},
</syntaxhighlight>

<syntaxhighlight lang="javascript">
</syntaxhighlight>
<syntaxhighlight lang="javascript">
</syntaxhighlight>
<syntaxhighlight lang="javascript">
</syntaxhighlight>