Editor-CSS-Klassen für Text-Stile (rückwärtskompatibel), kompiliert aus _text-styles.scss. Die Programmlogik für dyn. Ausgabe in /media/php-includes_ghsvs/editorghsvs-classes-bs4.php

CSS-Klassen, dynamisch aus editorghsvs.css ausgelesen

Link zur CSS-Datei editorghsvs.css

templates/bs4ghsvs/css/editorghsvs.css

CSS-Klassen und Ausgabe-Beispiele

  • EXCLUDEVENOBOX

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse EXCLUDEVENOBOX.

    <span class="EXCLUDEVENOBOX"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse EXCLUDEVENOBOX.

    <p class="EXCLUDEVENOBOX"></p>


  • breakall

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse breakall.

    <span class="breakall"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse breakall.

    <p class="breakall"></p>


  • code-filename

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse code-filename.

    <span class="code-filename"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse code-filename.

    <p class="code-filename"></p>


  • code-eigenname

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse code-eigenname.

    <span class="code-eigenname"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse code-eigenname.

    <p class="code-eigenname"></p>


  • code-fachausdruck

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse code-fachausdruck.

    <span class="code-fachausdruck"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse code-fachausdruck.

    <p class="code-fachausdruck"></p>


  • code-zeilenverweis

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse code-zeilenverweis.

    <span class="code-zeilenverweis"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse code-zeilenverweis.

    <p class="code-zeilenverweis"></p>


  • code-inline

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse code-inline.

    <span class="code-inline"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse code-inline.

    <p class="code-inline"></p>


  • text-courier | text-monospace

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-courier.

    <span class="text-courier"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-courier.

    <p class="text-courier"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-monospace.

    <span class="text-monospace"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-monospace.

    <p class="text-monospace"></p>


  • text-fett | text-bold

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett.

    <span class="text-fett"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett.

    <p class="text-fett"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-bold.

    <span class="text-bold"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-bold.

    <p class="text-bold"></p>


  • text-fett-blau

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-blau.

    <span class="text-fett-blau"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-blau.

    <p class="text-fett-blau"></p>


  • text-fett-gruen

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-gruen.

    <span class="text-fett-gruen"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-gruen.

    <p class="text-fett-gruen"></p>


  • text-fett-lila | text-fett-purple

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-lila.

    <span class="text-fett-lila"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-lila.

    <p class="text-fett-lila"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-purple.

    <span class="text-fett-purple"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-purple.

    <p class="text-fett-purple"></p>


  • text-fett-orange

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-orange.

    <span class="text-fett-orange"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-orange.

    <p class="text-fett-orange"></p>


  • text-fett-rot

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-rot.

    <span class="text-fett-rot"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-rot.

    <p class="text-fett-rot"></p>


  • text-fett-unterstrichen

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-unterstrichen.

    <span class="text-fett-unterstrichen"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-unterstrichen.

    <p class="text-fett-unterstrichen"></p>


  • text-fett-zentriert

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-fett-zentriert.

    <span class="text-fett-zentriert"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-fett-zentriert.

    <p class="text-fett-zentriert"></p>


  • text-kursiv | text-italic

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-kursiv.

    <span class="text-kursiv"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-kursiv.

    <p class="text-kursiv"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-italic.

    <span class="text-italic"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-italic.

    <p class="text-italic"></p>


  • text-large | large

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-large.

    <span class="text-large"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-large.

    <p class="text-large"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse large.

    <span class="large"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse large.

    <p class="large"></p>


  • text-large-lineheight

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-large-lineheight.

    <span class="text-large-lineheight"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-large-lineheight.

    <p class="text-large-lineheight"></p>


  • text-lila | text-purple

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-lila.

    <span class="text-lila"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-lila.

    <p class="text-lila"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-purple.

    <span class="text-purple"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-purple.

    <p class="text-purple"></p>


  • text-links

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-links.

    <span class="text-links"></span>

    <p class="text-links"></p>


  • text-medium

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-medium.

    <span class="text-medium"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-medium.

    <p class="text-medium"></p>


  • text-medium-lineheight

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-medium-lineheight.

    <span class="text-medium-lineheight"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-medium-lineheight.

    <p class="text-medium-lineheight"></p>


  • text-lineheight-small

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-lineheight-small.

    <span class="text-lineheight-small"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-lineheight-small.

    <p class="text-lineheight-small"></p>


  • text-rot | text-red

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-rot.

    <span class="text-rot"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-rot.

    <p class="text-rot"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-red.

    <span class="text-red"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-red.

    <p class="text-red"></p>


  • text-smaller

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-smaller.

    <span class="text-smaller"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-smaller.

    <p class="text-smaller"></p>


  • text-mini

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-mini.

    <span class="text-mini"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-mini.

    <p class="text-mini"></p>


  • text-unterstrichen | text-underline

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-unterstrichen.

    <span class="text-unterstrichen"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-unterstrichen.

    <p class="text-unterstrichen"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-underline.

    <span class="text-underline"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-underline.

    <p class="text-underline"></p>


  • text-zentriert

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse text-zentriert.

    <span class="text-zentriert"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse text-zentriert.

    <p class="text-zentriert"></p>


  • block-primary

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-primary.

    <span class="block-primary"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-primary.

    <p class="block-primary"></p>


  • block-secondary

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-secondary.

    <span class="block-secondary"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-secondary.

    <p class="block-secondary"></p>


  • block-success

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-success.

    <span class="block-success"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-success.

    <p class="block-success"></p>


  • block-info

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-info.

    <span class="block-info"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-info.

    <p class="block-info"></p>


  • block-warning

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-warning.

    <span class="block-warning"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-warning.

    <p class="block-warning"></p>


  • block-danger | articleStatus_1

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-danger.

    <span class="block-danger"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-danger.

    <p class="block-danger"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse articleStatus_1.

    <span class="articleStatus_1"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse articleStatus_1.

    <p class="articleStatus_1"></p>


  • block-light

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-light.

    <span class="block-light"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-light.

    <p class="block-light"></p>


  • block-dark

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse block-dark.

    <span class="block-dark"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse block-dark.

    <p class="block-dark"></p>


  • inline-primary

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-primary.

    <span class="inline-primary"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-primary.

    <p class="inline-primary"></p>


  • inline-secondary

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-secondary.

    <span class="inline-secondary"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-secondary.

    <p class="inline-secondary"></p>


  • inline-success

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-success.

    <span class="inline-success"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-success.

    <p class="inline-success"></p>


  • inline-info

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-info.

    <span class="inline-info"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-info.

    <p class="inline-info"></p>


  • inline-warning

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-warning.

    <span class="inline-warning"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-warning.

    <p class="inline-warning"></p>


  • inline-danger

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-danger.

    <span class="inline-danger"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-danger.

    <p class="inline-danger"></p>


  • inline-light

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-light.

    <span class="inline-light"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-light.

    <p class="inline-light"></p>


  • inline-dark

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse inline-dark.

    <span class="inline-dark"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse inline-dark.

    <p class="inline-dark"></p>


  • hyphenate

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse hyphenate.

    <span class="hyphenate"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse hyphenate.

    <p class="hyphenate"></p>


  • donthyphenate

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse donthyphenate.

    <span class="donthyphenate"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse donthyphenate.

    <p class="donthyphenate"></p>


<?php
/**
2019-10-30
editorghsvs-classes-bs4.php
Liest editorghsvs.css des akt. Template aus.
Siehe Hinweis im Kopf von editorghsvs.css.
*/

defined('_JEXEC') or die;

use Joomla\CMS\Factory;
use Joomla\CMS\Uri\Uri;
use Joomla\CMS\Language\Text;

$cssFile = 'editorghsvs.css';

$template = Factory::getApplication()->getTemplate();
$file = 'templates/' . $template . '/css/' . $cssFile;
$fileAbs = JPATH_SITE . '/' . $file;
$html = array();
$lessFile = '';
$link = '';
$error = array();

if (!is_file($fileAbs) || !($fileContent = trim(file_get_contents($fileAbs))))
{
	$error[] = 'Error! File not found or empty: ' . $file;
}
else
{
	$link = '<h4>Link zur CSS-Datei ' . $cssFile . '</h4><p><a href="'
		. Uri::root() . $file . '">' . $file . '</a></p>';
	$muster = '/(\.[-a-z0-9]+(,.+?|))\s*{/si';
	$found = preg_match_all($muster, $fileContent, $matches, PREG_SET_ORDER);

	foreach ($matches as $key => &$match)
	{
		// e.g. ".text-courier, .text-monospace {" or ".text-fett-blau {"
		if (!$match[1])
		{
			unset($matches[$key]);
			continue;
		}
		// No need:
		unset($match[0], $match[2]);
		
		$match[1] = str_replace(array(' ', ':before', "\n", "\r", '.'), '', $match[1]);
		
		// multiple classes for one rule separated by comma.
		$match[1] = explode(',', $match[1]);
	}
	
	// We used a &$match reference. Thus no need anymore.
	unset($match);
	
	/* Array of arrays like
	[23] => Array
	(
		[1] => Array
		(
			[0] => text-unterstrichen
			[1] => text-underline
		)
	)
	*/
	$matches = array_values($matches);
	$nl = PHP_EOL;

	if (count($matches))
	{
		$html[] = '<ul class="list-group">' . $nl;

		foreach ($matches as $match)
		{
			$html[] = '<li class="list-group-item">';
			$html[] = '<h5>' . implode(' | ', $match[1]) . '</h5>' . $nl;

			foreach ($match[1] as $cssClass)
			{
				if (strpos($cssClass, 'icon-') === false)
				{
					$spanText = Text::sprintf('EDITORGHSVS_SPAN_BEISPIEL', $cssClass);
					$pText = JText::sprintf('EDITORGHSVS_P_BEISPIEL', $cssClass);
				}
				else
				{
					$spanText = $pText = '';
				}

				$html[] = '<p><span class="' . $cssClass . '">' . $spanText . '</span></p>';
				$html[] = '<p><code>'
					. htmlentities('<span class="' . $cssClass . '"></span>') . '</code></p>';

				$html[] = '<p class="' . $cssClass . '">' . $pText . '</p>';
				$html[] = '<p><code>'
					. htmlentities('<p class="' . $cssClass . '"></p>') . '</code></p><hr>';
			}
			$html[] = '</li>' . $nl;
		}
		$html[] = '</ol>' . $nl;
	}
}

if (!count($html))
{
	$error[] = 'Error! Nothing to output.';
}

if ($error)
{
	$html[] = '<p class="block-danger">';
	$html[] = implode('<br>', $error);
	$html[] = '</p>';
}
else
{
	echo $link . '<h4>CSS-Klassen und Ausgabe-Beispiele</h4>' . implode('', $html);
}

Allgemeiner Hinweis zu Erweiterungen und Code-Schnipseln

Verbesserungsvorschläge, Fragen und Feature-Wünsche sind willkommen.

Alle nicht explizit als fertige Erweiterung markierten Skripte und Codes von www.ghsvs.de dienen als Ansätze / Ideen für eigene Ausarbeitung. GHSVS bzw. die jeweiligen Autoren übernehmen keinerlei Garantien beim Einsatz Ihrer kostenlosen Erweiterungen, Programme, Codes und Skripte, helfen aber gerne bei Rückfragen, soweit zeitlich möglich.