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

Gerenderte Ausgabe der Datei editorghsvs-classes-bs4.php

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 | codecode-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>


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

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

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

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


  • code-htmltag | codecode-htmltag | abbr

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

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

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

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


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse codecode-htmltag.

    <span class="codecode-htmltag"></span>

    Ich bin ein P-Beispiel mit der CSS-Klasse codecode-htmltag.

    <p class="codecode-htmltag"></p>


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

    <span class="abbr"></span>

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

    <p class="abbr"></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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link | articleStatus_1alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></p>


    Ich bin ein SPAN-Beispiel mit der CSS-Klasse articleStatus_1alert-link.

    <span class="articleStatus_1alert-link"></span>

    <p class="articleStatus_1alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • 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>


  • alert-link

    Ich bin ein SPAN-Beispiel mit der CSS-Klasse alert-link.

    <span class="alert-link"></span>

    <p class="alert-link"></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>


  • Quelltext der Datei editorghsvs-classes-bs4.php

    <?php
    /**
    2019-10-30
    editorghsvs-classes-bs4.php
    Liest editorghsvs.css des akt. Template aus.
    Siehe Hinweis im Kopf von editorghsvs.css.
    Beitrag: 115
    */
    
    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);
    }