PHP code example of alnaggar / php-css-builder
1. Go to this page and download the library: Download alnaggar/php-css-builder library . Choose the download type require .
2. Extract the ZIP file and open the index.php.
3. Add this code to the index.php.
<?php
require_once('vendor/autoload.php');
/* Start to develop here. Best regards https://php-download.com/ */
alnaggar / php-css-builder example snippets
namespace Alnaggar\PhpCssBuilder\Interfaces;
interface Cssable
{
public function toCss(): string;
}
namespace Alnaggar\PhpCssBuilder\Interfaces;
interface CssStatement extends Cssable
{
}
use Alnaggar\PhpCssBuilder\Statements\CssRuleset;
CssRuleset::make('.card')
->comment('Card base styles')
->declaration('padding', '1rem')
->declaration('border-radius', '6px')
->toCss();
use Alnaggar\PhpCssBuilder\Statements\CssRuleset;
CssRuleset::make('.card')
->declaration('padding', '1rem')
->nestedStatement(
CssRuleset::make('&:hover')
->declaration('background', '#eee')
)
->toCss();
use Alnaggar\PhpCssBuilder\Statements\CssBlockAtRule;
use Alnaggar\PhpCssBuilder\Statements\CssRuleset;
CssBlockAtRule::make('media', '(max-width: 768px)')
->nestedStatement(
CssRuleset::make('.card')
->declaration('font-size', '14px')
)
->toCss();
use Alnaggar\PhpCssBuilder\Statements\CssBlockAtRule;
use Alnaggar\PhpCssBuilder\Statements\CssRuleset;
CssBlockAtRule::make('layout', 'components')
->nestedStatement(
CssBlockAtRule::make('supports', '(backdrop-filter: blur(10px))')
->nestedStatement(
CssRuleset::make('.card-glass')
->declaration('backdrop-filter', 'blur(10px)')
->declaration('background', 'rgba(2, 6, 23, 0.7)')
)
)->toCss()
use Alnaggar\PhpCssBuilder\Statements\CssStatementAtRule;
CssStatementAtRule::make('import', 'url("theme.css")')->toCss();
namespace Alnaggar\PhpCssBuilder\Interfaces;
interface NestableCssStatement extends CssStatement
{
}
use Alnaggar\PhpCssBuilder\Html\EmbeddedCss;
/*
|--------------------------------------------------------------------------
| Create embedded stylesheet
|--------------------------------------------------------------------------
*/
$embeddedCss = EmbeddedCss::make();
/*
|--------------------------------------------------------------------------
| Style tag attributes
|--------------------------------------------------------------------------
*/
$embeddedCss->attribute('nonce', 'nonce-123')
->attribute('id', 'embedded-css');
/*
|--------------------------------------------------------------------------
| Comment
|--------------------------------------------------------------------------
*/
$embeddedCss->comment(
'Base document styles'
);
/*
|--------------------------------------------------------------------------
| Statement at-rules
|--------------------------------------------------------------------------
*/
$embeddedCss->statements([
CssStatementAtRule::make('charset', '"UTF-8"'),
CssStatementAtRule::make('import', 'url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap")')
]);
/*
|--------------------------------------------------------------------------
| Font face
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statement(
CssBlockAtRule::make('font-face', null)
->declaration('font-family', '"Panel Font"')
->declaration('src', 'url(\'assets/fonts/panel.woff2\') format(\'woff2\')')
->declaration('font-weight', 'normal')
->declaration('font-style', 'normal')
);
/*
|--------------------------------------------------------------------------
| Base styles
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statements([
CssRuleset::make(':root')
->declaration('--text-primary-color', '#DBEAFE')
->declaration('--bg-primary-color', '#2563EB')
->declaration('--text-secondary-color', '#111827')
->declaration('--bg-secondary-color', '#F3F4F6')
->declaration('--radius', '0.5rem'),
CssRuleset::make('*, *::before, *::after')
->declaration('box-sizing', 'border-box'),
CssRuleset::make('body')
->comment('Reset & typography')
->declaration('margin', '0')
->declaration('font-family', '"Panel Font", "Inter", system-ui, sans-serif')
->declaration('background', '#0f172a')
->declaration('color', '#e5e7eb')
->declaration('line-height', '1.6')
]);
/*
|--------------------------------------------------------------------------
| Utilities
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statements([
CssRuleset::make('.text-primary')
->declaration('color', 'var(--text-primary-color)'),
CssRuleset::make('.bg-primary')
->declaration('background', 'var(--bg-primary-color)'),
CssRuleset::make('.text-secondary')
->declaration('color', 'var(--text-secondary-color)'),
CssRuleset::make('.bg-secondary')
->declaration('background', 'var(--bg-secondary-color)'),
]);
/*
|--------------------------------------------------------------------------
| Components
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statements([
CssRuleset::make('.panel')
->declaration('padding', '1.5rem')
->declaration('border-radius', 'var(--radius)')
->declaration('background', '#020617'),
CssRuleset::make('.panel-title')
->declaration('font-size', '1.25rem')
->declaration('font-weight', '600')
->declaration('margin-bottom', '0.75rem'),
CssRuleset::make('.btn')
->declaration('display', 'inline-flex')
->declaration('align-items', 'center')
->declaration('gap', '0.5rem')
->declaration('padding', '0.5rem 0.75rem')
->declaration('border-radius', 'var(--radius)')
->declaration('border', 'none')
->declaration('cursor', 'pointer')
]);
/*
|--------------------------------------------------------------------------
| Animations
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statement(
CssBlockAtRule::make('keyframes', 'fade-in')
->nestedStatement(
CssRuleset::make('from')
->declaration('opacity', '0')
)
->newline()
->nestedStatement(
CssRuleset::make('to')
->declaration('opacity', '1')
)
);
$embeddedCss->newline();
$embeddedCss->statement(
CssRuleset::make('.fade-in')
->declaration('animation', 'fade-in 200ms ease-in-out')
);
/*
|--------------------------------------------------------------------------
| Media queries
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statement(
CssBlockAtRule::make('media', '(max-width: 768px)')
->nestedStatements([
CssRuleset::make('.panel')
->declaration('padding', '1rem'),
CssRuleset::make('.panel-title')
->declaration('font-size', '1.1rem')
])
);
/*
|--------------------------------------------------------------------------
| Feature queries
|--------------------------------------------------------------------------
*/
$embeddedCss->newline();
$embeddedCss->statement(
CssBlockAtRule::make('supports', '(backdrop-filter: blur(10px))')
->nestedStatement(
CssRuleset::make('.panel-glass')
->declaration('backdrop-filter', 'blur(10px)')
->declaration('background', 'rgba(2, 6, 23, 0.7)')
)
);
return $embeddedCss->toHtml();