CKEditor - Snippets: Unterschied zwischen den Versionen
Aus Wikizone
(Die Seite wurde neu angelegt: „== 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 ui…“) |
|||
| Zeile 4: | Zeile 4: | ||
'''Bilder''' | '''Bilder''' | ||
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } }, | { name: 'Bild: Rund', element: 'img', attributes: { 'class': 'uk-border-circle' } }, | ||
| Zeile 11: | Zeile 12: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | ''' | + | '''Tabellen''' |
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
| + | { name: 'Schicke Tabelle', element: 'table', attributes: { 'class': 'uk-table'}}, | ||
| + | { name: 'Unsichtbare Tabelle', element: 'table', attributes: { 'class': 'uk-table layout-table'}}, | ||
</syntaxhighlight> | </syntaxhighlight> | ||
'''Textblöcke und Überschriften''' | '''Textblöcke und Überschriften''' | ||
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } }, | { name: 'Lead', element: 'div', attributes: { 'class': 'uk-text-lead' } }, | ||
| Zeile 32: | Zeile 37: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Buttons | + | '''Buttons''' |
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } }, | { name: 'Link-Button (UIkit)', element: 'a', attributes: { 'class': 'uk-button uk-button-text' } }, | ||
| Zeile 39: | Zeile 45: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Textauszeichnungen | + | '''Textauszeichnungen''' |
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } }, | { name: 'Klein (UIkit)', element: 'span', attributes: { 'class': 'uk-text-small' } }, | ||
| Zeile 52: | Zeile 59: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Farben | + | '''Farben''' |
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } }, | { name: 'Farbe: Hell (UIkit)', element: 'span', attributes: { 'class': 'uk-light' } }, | ||
| Zeile 63: | Zeile 71: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | Sonstiges | + | '''Sonstiges''' |
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
{ name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } }, | { name: 'Kein Randabstand', element: 'div', attributes: { 'class': 'no-padding no-margin' } }, | ||
| Zeile 76: | Zeile 85: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | + | ||
| − | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Version vom 18. August 2020, 07:58 Uhr
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
{ 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'}},
Tabellen
{ name: 'Schicke Tabelle', element: 'table', attributes: { 'class': 'uk-table'}},
{ name: 'Unsichtbare Tabelle', element: 'table', attributes: { 'class': 'uk-table layout-table'}},
Textblöcke und Überschriften
{ 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' } },
Buttons
{ 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' } },
Textauszeichnungen
{ 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öscht', element: 'del' },
{ name: 'Eingefügt', element: 'ins' },
{ name: 'Zitat', element: 'cite' }
Farben
{ 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' } },
Sonstiges
{ 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'}},
