PHP code example of popphp / pop-css

    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

popphp / pop-css example snippets

use Pop\Css\Css;
use Pop\Css\Selector;

$css = new Css();

$html = new Selector('html');
$html->setProperties([
    'margin'           => 0,
    'padding'          => 0,
    'background-color' => '#fff',
    'font-family'      => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

$css->addSelectors([$html, $login]);

echo $css;

$cssString = $css->render();

echo $css;

$css->writeToFile(__DIR__ . '/styles.css');

use Pop\Css\Css;
use Pop\Css\Selector;

$html = new Selector('html');
$html->setProperties([
    'margin'           => 0,
    'padding'          => 0,
    'background-color' => '#fff',
    'font-family'      => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

$css = new Css($html, $login);

use Pop\Css\Css;
use Pop\Css\Selector;

$css = new Css();

// Element selector
$html = new Selector('p');
$html->setProperties([
    'margin'      => 0,
    'padding'     => '3px',
    'color'       => '#555',
    'font-family' => 'Arial, sans-serif'
]);

// ID selector
$login = new Selector('#login');
$login->setProperty('margin', 0)
    ->setProperty('padding', 0);

// Class selector
$bold = new Selector('.bold');
$bold->setProperty('font-weight', 'bold');

$css->addSelectors([$html, $login, $bold]);

echo $css;

$grouped = new Selector('h1, h2, h3');
$grouped->isMultipleSelector(); // true

$descendant = new Selector('.login-footer > div');
$descendant->hasDescendant();   // true

$box = new Selector('.box');

$box->setProperty('color', '#333');   // setProperty()
$box->padding = '10px';               // magic property
$box['margin'] = 0;                   // ArrayAccess

echo $box;

$box = new Selector('.box');
$box->setProperty('margin', '10px 20px 30px 40px');

echo $box['margin-top'];    // 10px
echo $box['margin-right'];  // 20px
echo $box['margin-bottom']; // 30px
echo $box['margin-left'];   // 40px

$box = new Selector('.box');
$box->setProperties(['color' => 'red', 'margin' => 0]);

$box->hasProperty('color');   // true
$box->getProperties();        // ['color' => 'red', 'margin' => 0]
$box->removeProperty('margin');
$box->getProperties();        // ['color' => 'red']

$box = new Selector('div', 2);
$box->setProperty('color', 'red');
echo $box;

$css = new Css();
$css->addSelector(new Selector('html'));

$css->hasSelector('html');        // true
$css->getSelector('html');        // Selector instance
$css->removeSelector('html');

// ArrayAccess - equivalent to addSelector(), naming the selector for you
$css['html'] = new Selector();
$css['html']->setProperty('margin', 0);
isset($css['html']);              // true
unset($css['html']);

// Countable / IteratorAggregate
count($css);
foreach ($css as $name => $selector) {
    // ...
}

$css = new Css();
$css->addSelector((new Selector('h1'))->setProperty('font-size', '32px'));
$css->addSelector((new Selector('h1'))->setProperty('color', '#cc0000'));

$css->getSelector('h1')->getProperty('font-size'); // '32px' - preserved
$css->getSelector('h1')->getProperty('color');     // '#cc0000'

use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$login = new Selector('#login');
$login->setProperty('margin', 0);
$login->setProperty('padding', 0);
$login->setProperty('width', '50%');

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['#login'] = new Selector();
$media['#login']->setProperty('width', '75%');
$media['p'] = new Selector();
$media['p']->setProperty('width', '75%');

$css->addSelectors([$html, $login, $p])
    ->addMedia($media);

echo $css;

$media = new Media('screen');
$media->setCondition('not');

echo $media;

$media = new Media('screen', ['max-width' => '480px'], 'only', 2);

$media = new Media('screen');
$media->setFeatures(['max-width' => '480px', 'min-width' => '320px']);

$media->getFeatures();          // ['max-width' => '480px', 'min-width' => '320px']
$media->hasFeature('max-width'); // true
$media->getFeature('max-width'); // '480px'

$css = new Css();
$css->addMedia(new Media('screen'))
    ->addMedia(new Media('print'));

$css->getAllMedia();   // array of both Media objects
$css->getMedia(0);     // the 'screen' Media object

$css->removeMedia(0);  // remove by index
$css->removeAllMedia();

use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();
$css->addComment('This is a global comment');

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');
$p->addComment('This is a comment for the P selector');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['html'] = new Selector();
$media['html']->setProperty('padding', '1%');
$media['html']->addComment('This is a comment for the HTML selector in the media query');
$media->addComment('This is a comment for the media query');

$css->addSelectors([$html, $p])
    ->addMedia($media);

echo $css;

use Pop\Css\Css;
use Pop\Css\Selector;

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');
$p->addComment('This is a comment for the P selector', 0, false);

$css = new Css($p);
echo $css;

$css = new Css();
$css->addComment('First comment');
$css->addComment('Second comment');

$css->hasComments();      // true
$css->getComments();      // array of Comment objects

$css->removeComment(0);   // remove by index
$css->removeAllComments();

use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Color\Color;

$box = new Selector('.box');
$box->setProperty('color', Color::rgb(255, 0, 0));
$box->setProperty('background-color', Color::cmyk(30, 20, 10, 5));
$box->setProperty('border-color', Color::oklch(0.7, 0.15, 30));

$css = new Css($box);
echo $css;

$color = $box->getColorProperty('color');
echo $color->toHex();

use Pop\Css\Css;

$css = Css::parseFile('path/to/styles.css');

$css = Css::parseString($cssString);

$css = Css::parseUri('http://www.domain.com/css/styles.css');

use Pop\Css\Css;
use Pop\Css\Exception;

try {
    $css = Css::parseFile('path/to/missing.css');
} catch (Exception $e) {
    // file does not exist
}

try {
    $css = Css::parseUri('http://www.domain.com/css/missing.css');
} catch (Exception $e) {
    // URI could not be fetched
}

$css = new Css();
$css->parseCss($cssString);       // equivalent to Css::parseString()
$css->parseCssFile($cssFile);     // equivalent to Css::parseFile()
$css->parseCssUri($cssUri);       // equivalent to Css::parseUri()

use Pop\Css\Css;
use Pop\Css\Selector;
use Pop\Css\Media;

$css = new Css();
$css->addComment('This is a global comment');

$html = new Selector('html');
$html->setProperties([
    'margin'  => 0,
    'padding' => 0,
    'background-color' => '#fff',
    'font-family' => 'Arial, sans-serif'
]);

$p = new Selector('p');
$p->setProperty('margin', 0);
$p->setProperty('padding', 0);
$p->setProperty('width', '50%');

$media = new Media('screen');
$media->setFeature('max-width', '480px');
$media['html'] = new Selector();
$media['html']->setProperty('padding', '1%');

$css->addSelectors([$html, $p])
    ->addMedia($media);

$css->minify(true);

echo $css;