{"id":26406147,"url":"https://github.com/kazewaze/stylze","last_synced_at":"2026-05-08T05:36:39.197Z","repository":{"id":57381985,"uuid":"393812715","full_name":"kazewaze/stylze","owner":"kazewaze","description":"A simple styling library for jsx elements.","archived":false,"fork":false,"pushed_at":"2021-08-30T00:47:33.000Z","size":4,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-04-23T06:25:29.864Z","etag":null,"topics":["css","javascript","jsx","library","reactjs","styles"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/stylze","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kazewaze.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-07T23:23:39.000Z","updated_at":"2023-03-07T09:51:23.000Z","dependencies_parsed_at":"2022-09-20T00:21:54.012Z","dependency_job_id":null,"html_url":"https://github.com/kazewaze/stylze","commit_stats":null,"previous_names":["kayceeingram/stylze"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazewaze%2Fstylze","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazewaze%2Fstylze/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazewaze%2Fstylze/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kazewaze%2Fstylze/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kazewaze","download_url":"https://codeload.github.com/kazewaze/stylze/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244075643,"owners_count":20393980,"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","javascript","jsx","library","reactjs","styles"],"created_at":"2025-03-17T17:18:34.931Z","updated_at":"2026-05-08T05:36:34.149Z","avatar_url":"https://github.com/kazewaze.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Stylze\n\nA simple styling library for jsx elements.\n\n~ **Stylze has not been actively worked on in ages. My apologies... I might pick back up on it shortly. Stay tuned!** ~\n\n## Installation\n\n```\nnpm install stylze\n```\n\nor\n\n```\nyarn add stylze\n```\n\n## Example code\n--------------------\n```js\nimport React, { Component } from 'react';\nimport stylze from 'stylze';\n\nclass App extends Component {\n\n  /* The eventHandler for 'myButton' below. */\n  greet()  {\n    console.log('Hello Kaycee!');\n  }\n\n  render() {\n\n    // pre-defined styles for h1 elements.\n    const h1 = stylze('h1-1-px', 'Hello world!');\n\n    // You can also override the existing styles\n    // with the optional third arg (styles override object).\n    const h1 = stylze('h1-1-em', 'Hello world!',\n      { color: '#333',\n        backgroundColor: '#eee',\n        fontSize: `${33}px`\n      });\n\n    /*\n    You simply pass your eventHandler through the 'styles override object',\n    as shown above on the h1 element.\n\n    You have to use the property name 'eventHandler' so stylze can\n    find the it. Stylze automatically adds everything else. Eazy Peazy...\n\n    Once the button is clicked it will now log 'Hello Kaycee!' to the console.\n\n    There are 3 sizes of buttons: button-1-sm, button-1-md, button-1-lg.\n    */\n\n    const myButton = stylze('button-1-lg', 'Click me', { \n      eventHandler: this.greet\n    });\n\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003cdiv className=\"SomeClassThatHandlesPositioning\"\u003e\n          { h1 }\n          { myButton }\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n## Pre-defined styles (So far)\n\n### h1:\n\n- h1-1-px\n- h1-2-px\n- h1-3-px\n\n- h1-1-em\n- h1-2-em\n- h1-3-em\n\n### button\n\n- button-1-sm\n- button-1-md\n- button-1-lg","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazewaze%2Fstylze","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkazewaze%2Fstylze","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkazewaze%2Fstylze/lists"}