{"id":15396041,"url":"https://github.com/luizbills/css-generator.php","last_synced_at":"2025-04-16T00:18:14.983Z","repository":{"id":48137636,"uuid":"81672016","full_name":"luizbills/css-generator.php","owner":"luizbills","description":"Write CSS programatically using PHP :paintbrush:","archived":false,"fork":false,"pushed_at":"2022-09-12T19:06:42.000Z","size":111,"stargazers_count":21,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-16T00:18:06.727Z","etag":null,"topics":["css","generator","php"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luizbills.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-11T18:11:50.000Z","updated_at":"2025-02-04T19:34:14.000Z","dependencies_parsed_at":"2022-08-12T19:31:26.856Z","dependency_job_id":null,"html_url":"https://github.com/luizbills/css-generator.php","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luizbills%2Fcss-generator.php","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luizbills%2Fcss-generator.php/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luizbills%2Fcss-generator.php/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luizbills%2Fcss-generator.php/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luizbills","download_url":"https://codeload.github.com/luizbills/css-generator.php/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249173099,"owners_count":21224485,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","generator","php"],"created_at":"2024-10-01T15:30:37.464Z","updated_at":"2025-04-16T00:18:14.963Z","avatar_url":"https://github.com/luizbills.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CSS Generator\n\nWrite CSS programatically using PHP.\n\n## Install\n\n```bash\ncomposer require luizbills/css-generator\n```\n\n## Usage\n\n\n### Create a generator\n\n```php\nrequire_once 'vendor/autoload.php';\n\nuse luizbills\\CSS_Generator\\Generator as CSS_Generator;\n\n$options = [\n    // default values\n    // 'indent_style' =\u003e 'space', // you can change to 'tab'\n    // 'indent_size' =\u003e 4 // 4 spaces by default\n];\n\n$css = new CSS_Generator( $options );\n\n// define your css code (see below)\n\n// output the generated code\necho \"\u003cstyle\u003e\" . $css-\u003eget_output() . \"\u003c/style\u003e\";\n```\n\n### Add rules\n\n```php\n$css-\u003eadd_rule( 'a', [ 'color' =\u003e 'red' ] );\n\n$css-\u003eadd_rule(\n    [ 'p', 'div' ],\n    [\n        'margin' =\u003e '13px',\n        'padding' =\u003e '9px'\n    ]\n);\n```\n\nOutput:\n\n```css\na {\n    color: red;\n}\np,\ndiv {\n    margin: 13px;\n    padding: 9px;\n}\n\n```\n\n### Add global variables\n\n```php\n$css-\u003eroot_variable( 'color1', 'red' );\n$css-\u003eadd_rule( 'a', [ 'color' =\u003e 'var(--color3)' ] );\n$css-\u003eroot_variable( 'color2', 'green' );\n$css-\u003eroot_variable( 'color3', 'blue' );\n```\n\nOutput:\n\n```css\n:root {\n    --color1: red;\n    --color2: green;\n    --color3: blue;\n}\n\na {\n    color: var(--color3);\n}\n\n```\n\n**Note:** all variables declared by `root_variable` will be placed at the beginning.\n\n### Add comments\n\n```php\n$css-\u003eadd_comment( 'Lorem ipsum...' )\n```\n\nOutput:\n\n```css\n/* Lorem ipsum... */\n\n```\n\n### Open and close blocks\n\n```php\n$css-\u003eopen_block( 'media', 'screen and (min-width: 30em)' );\n$css-\u003eadd_rule( 'a', [ 'color' =\u003e 'red' ] );\n$css-\u003eclose_block(); // close the last opened block\n```\n\nOutput:\n\n```css\n@media screen and (min-width: 30em) {\n    a {\n        color: red;\n    }\n}\n\n```\n\n### Escape selectors\n\nSometimes you need to escape your selectors.\n\n```html\n\u003c!-- Examples --\u003e\n\u003cdiv id='@'\u003e\u003c/div\u003e\n\u003cdiv class='3dots'\u003e\u003c/div\u003e\n\u003cdiv class='red:hover'\u003e\u003c/div\u003e\n```\n\n```php\n$css-\u003eadd_rule( '#' . $css-\u003eesc( '@' ), [\n    'animation' =\u003e 'shake 1s'\n] );\n$css-\u003eadd_rule( '.' . $css-\u003eesc( '3dots' ) . '::after', [\n    'content' =\u003e '\"...\"'\n] );\n$css-\u003eadd_rule( '.' . $css-\u003eesc( 'red:hover' ) . ':hover', [\n    'color' =\u003e 'red'\n] );\n```\n\nOutput:\n\n```css\n#\\@ {\n    animation: shake 1s;\n}\n.\\33 dots::after {\n    content: \"...\";\n}\n.red\\:hover:hover {\n    color: red;\n}\n\n```\n\n### Include anything (be careful)\n\n```php\n$css-\u003eadd_raw( 'a{color:red}' );\n```\n\nOutput:\n\n```css\na{color:red}\n```\n\n### Minify your CSS\n\n```php\necho $css-\u003eget_output( true ); // returns the compressed code\necho $css-\u003eget_output( false ); // returns the pretty code\n```\n\n## License\n\nMIT License \u0026copy; 2022 Luiz Bills\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluizbills%2Fcss-generator.php","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluizbills%2Fcss-generator.php","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluizbills%2Fcss-generator.php/lists"}