Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/luizbills/css-generator.php
Write CSS programatically using PHP :paintbrush:
https://github.com/luizbills/css-generator.php
css generator php
Last synced: 29 days ago
JSON representation
Write CSS programatically using PHP :paintbrush:
- Host: GitHub
- URL: https://github.com/luizbills/css-generator.php
- Owner: luizbills
- License: mit
- Created: 2017-02-11T18:11:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-09-12T19:06:42.000Z (about 2 years ago)
- Last Synced: 2024-05-01T14:12:46.274Z (7 months ago)
- Topics: css, generator, php
- Language: PHP
- Homepage:
- Size: 108 KB
- Stars: 18
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# CSS Generator
Write CSS programatically using PHP.
## Install
```bash
composer require luizbills/css-generator
```
## Usage
### Create a generator
```php
require_once 'vendor/autoload.php';
use luizbills\CSS_Generator\Generator as CSS_Generator;
$options = [
// default values
// 'indent_style' => 'space', // you can change to 'tab'
// 'indent_size' => 4 // 4 spaces by default
];
$css = new CSS_Generator( $options );
// define your css code (see below)
// output the generated code
echo "" . $css->get_output() . "";
```
### Add rules
```php
$css->add_rule( 'a', [ 'color' => 'red' ] );
$css->add_rule(
[ 'p', 'div' ],
[
'margin' => '13px',
'padding' => '9px'
]
);
```
Output:
```css
a {
color: red;
}
p,
div {
margin: 13px;
padding: 9px;
}
```
### Add global variables
```php
$css->root_variable( 'color1', 'red' );
$css->add_rule( 'a', [ 'color' => 'var(--color3)' ] );
$css->root_variable( 'color2', 'green' );
$css->root_variable( 'color3', 'blue' );
```
Output:
```css
:root {
--color1: red;
--color2: green;
--color3: blue;
}
a {
color: var(--color3);
}
```
**Note:** all variables declared by `root_variable` will be placed at the beginning.
### Add comments
```php
$css->add_comment( 'Lorem ipsum...' )
```
Output:
```css
/* Lorem ipsum... */
```
### Open and close blocks
```php
$css->open_block( 'media', 'screen and (min-width: 30em)' );
$css->add_rule( 'a', [ 'color' => 'red' ] );
$css->close_block(); // close the last opened block
```
Output:
```css
@media screen and (min-width: 30em) {
a {
color: red;
}
}
```
### Escape selectors
Sometimes you need to escape your selectors.
```html
```
```php
$css->add_rule( '#' . $css->esc( '@' ), [
'animation' => 'shake 1s'
] );
$css->add_rule( '.' . $css->esc( '3dots' ) . '::after', [
'content' => '"..."'
] );
$css->add_rule( '.' . $css->esc( 'red:hover' ) . ':hover', [
'color' => 'red'
] );
```
Output:
```css
#\@ {
animation: shake 1s;
}
.\33 dots::after {
content: "...";
}
.red\:hover:hover {
color: red;
}
```
### Include anything (be careful)
```php
$css->add_raw( 'a{color:red}' );
```
Output:
```css
a{color:red}
```
### Minify your CSS
```php
echo $css->get_output( true ); // returns the compressed code
echo $css->get_output( false ); // returns the pretty code
```
## License
MIT License © 2022 Luiz Bills